Embed
Portone's pre built checkout
Embed SDK Overview
The Embed SDK is designed for rapid integration across multiple platforms like Android, Flutter, iOS, and React Native. It allows developers to integrate payment processing using a WebView, making it ideal for apps that prioritize speed and simplicity over full UI customization.
Platform-Specific Integration Overview
The integration pattern is consistent across platforms, opening a WebView for payment processing. While the steps are similar, code and setup vary slightly based on the platform.
| Android | Flutter | iOS | React Native | |
|---|---|---|---|---|
| Integration Type : WebView | ✓ | ✓ | ✓ | ✓ |
| Integration Process | Android | Flutter | iOS | React Native |
When to Use the Embed SDK
| Use Case | Description |
|---|---|
| Quick Launch | For projects that need speed-to-market with minimal development effort. |
| Standardized Checkout | Apps that can rely on PortOne's pre-designed checkout UI without customizations. |
| Unified Experience | Provides a consistent payment flow across different platforms and devices. |
Sequence Diagram
Normal Flow
The Normal Flow redirects users to the webView to complete the payment process. After authentication and verification in the web interface, the user is redirected back to the app with the payment result.
App-to-App Flow
The App-to-App Flow is used when the payment method requires the user to complete the payment process in another application (such as a banking or wallet app). After authentication in the external app, the user is redirected back to the merchant app.
| Aspect | Normal Flow | App-to-App Flow |
|---|---|---|
| User Stays in App | Maybe (Redirect to web browser/WebView) | No (Redirect to external app) |
| Authentication | Handled via web interface | Handled by an external app |
| Redirects | Yes (to and from web browser/WebView) | Yes (to and from external app) |
| User Experience | User is redirected but can complete in-app | Requires app switching, possible disruption |
Why Embed SDK ?
- Simple Integration : Apps that need a fast, simple integration with minimal customization effort, and where the entire payment flow can occur in a WebView.
Embed Flow - PortOne's Pre-built Checkout
Overview of the Embed flow
- Displayed the Checkout page created by Portone.
- Opened the Checkout page URL in a WebView.
- Renders the wallet element when the "Wallets" option is selected, and likewise for other payment methods.
- Upon selecting COD and tapping "Pay Now," the transaction is initiated and processed.
- The final confirmation page is shown.
- This entire flow is handled by the SDK.
Updated 12 days ago