Advanced Flow
Introduction
The Advanced Flow gives you full control over how payment data is collected and processed. It separates the secure collection of sensitive card information (handled by the SecureFields SDK) from the actual payment creation (handled by the Payment API).
This flow is recommended if you want to:
- Keep a low-level integration with maximum flexibility.
- Control when and how payments are created.
- Handle business rules before sending a payment request.
Flow description
- Checkout initialization — The customer opens checkout; the Merchant Frontend initializes the SecureFields SDK.
- Card data collection — The customer enters card details in secure iframes. On submit, the SDK returns a
vault_form_token— no PAN or CVV ever touches your systems. - Payment creation — The Merchant Backend calls the Payment API with the token, order data, and 3DS preferences. The API returns a
redirectionobject for 3DS. - 3DS authentication — The customer completes authentication, then is redirected back to your
shopper_redirection_url. - Final update — The Payment API sends the final payment status via webhook.
Before you start
- Ask your Purse Integration Team for a Vault Tenant ID and a Payment API Key.
Collect card data: choose your SDK
Card data is collected client-side by a SecureFields SDK. Pick the one that matches your platform — all three collect the card on the client, keep raw data out of your code, and return the same vault_form_token. The Payment API steps that follow are identical on every platform.
| Platform | SDK | Highlights |
|---|---|---|
| Web | Web SDK | Secure iframes, CDN or npm, framework-agnostic |
| iOS | iOS SDK | Native UIKit / SwiftUI views, Swift Package Manager |
| Android | Android SDK | Jetpack Compose / View system, Maven Central |
Payment API steps
Once a SecureFields SDK returns a vault_form_token, these server-side steps are the same regardless of the SDK you used to collect the card:
| Step | What it covers |
|---|---|
| Retrieve payment methods | Check eligible MOPs before rendering the UI |
| Create a payment | Call the Payment API with the token and 3DS params |
| Token payment | Save cards, pay with saved tokens, delete tokens |
| Complete payment flow | End-to-end example connecting collection and creation |