Zepto Flow Overview
Accept payments with Zepto's embeddable Flow widget. Your server creates a Payment Intent. The browser mounts the widget, and the widget does the rest.
Zepto Flow is an embeddable PayTo experience for your own checkout. You create a Payment Intent with a single API call from your server, then you hand the result to the widget in the payer's browser. From there the widget does the work: it collects the payer's account details, it waits while the payer approves the PayTo agreement in the banking app, then it tells your page the outcome.
You get a PayTo integration, without having to build the UI or manage multiple calls to Zepto's APIs. The payer's payment details never touch your servers.
What is a Payment Intent?
A Payment Intent is a server-side object that represents one checkout session. It holds the agreement and the payment you want to take, and it drives the widget from start to finish.
You create a Payment Intent on your server with your secret API key. In return you get a browser-safe token and the first action. Pass both to your page.
A Payment Intent has four traits worth knowing:
- One per checkout. It covers a single session: one PayTo agreement and one payment. Create a new Payment Intent for each checkout attempt.
- Temporary. It is short-lived. The
tokenis scoped to this one Payment Intent, and it cannot be reused across sessions. - Client-side safe. The
tokenis the only credential that reaches the browser. Your secret API key is only used between your server and our API. - Self-driving. After the widget is mounted with the
tokenandaction, the Payment Intent advances through the workflow until it settles or fails.
You create it in the first step. See Create a Payment Intent for the full request.
Accept a PayTo payment with Zepto Flow in 3 simple steps
Accept a PayTo payment with Zepto Flow in 3 simple steps
Create a Payment Intent, embed the widget, and redirect the payer once the payment settles.
How it works
Flow splits cleanly into two responsibilities.
Your backend makes one server-to-server call to create a Payment Intent. It uses your secret API key for authentication. It gets back a token and the first action.
Your checkout page loads the Flow SDK. It mounts the widget with that { token, action }. Then it listens for lifecycle events. The widget makes every later API call with the browser-safe token for authentication - your secret key isn't needed.
The end-to-end sequence:
- Your backend calls
create-payment-intentand receives{ token, action }. - Your page mounts the widget:
ZeptoFlow.mount('#el', { token, action }). - The widget collects the payer's PayID or BSB and account number. Then it creates the PayTo agreement.
- The payer approves the agreement in the banking app. The widget waits.
- The widget creates the payment and waits for settlement.
- The widget emits a terminal event:
zepto:payto:payment-settledorzepto:payto:payment-failed.
One call is yours, the rest are the widget's
Your server calls create-payment-intent directly. The widget makes the agreement, payment, and settlement calls for the payer. You react to the events it emits.
What Flow supports today
Flow now supports the one-time payment flow (PayTo.Debtor.OneTimePayment). It creates an agreement and takes one payment against it in one guided session. We will add more flows to this guide when they become available.
Flow is built to grow beyond PayTo. Events are namespaced by rail (zepto:payto:*), which leaves room for future rails such as PayID (zepto:payid:*).
Build it in five pages
This guide shows you a complete integration:
- Before you begin: API keys, environments, and how to load the SDK.
- Create a Payment Intent: the one server-side call.
- Mount the widget: add Flow to your checkout page.
- Handle the payment lifecycle: react to the events.
- Test in the sandbox: check the success and failure paths.
For theming, see Theming the widget. For the complete client API, see the SDK reference.
Updated 5 days ago
