DEVELOPER GUIDE

Mount the Widget

Add the Flow widget to your checkout page and start the payment session.

After you create a Payment Intent, you can render Flow on your checkout page. Load the SDK, give it a mount target, and start the session with the { token, action } from your backend.

Add the SDK and a mount target

<script src="https://go.sandbox.zeptopayments.com/flow/assets/flow.js"></script>
<div id="zepto-flow"></div>

The <div> is where the widget renders. Size and position it as you would any element on your page. This example loads the sandbox bundle. When you go live, load https://go.zeptopayments.com/flow/assets/flow.js instead.

Mount the widget

Fetch the { token, action } from your backend and pass it to ZeptoFlow.mount():

<script>
  // { token, action } from your create-payment-intent response
  const { token, action } = await fetch('/api/payment-intent', {
    method: 'POST',
  }).then((r) => r.json());

  const widget = ZeptoFlow.mount('#zepto-flow', { token, action });

  widget.subscribe((event) => {
    if (event.type === 'zepto:payto:payment-settled') {
      window.location.assign('/checkout/success');
    }
    if (event.type === 'zepto:payto:payment-failed') {
      showRetry(event.payload.errors);
    }
  });
</script>

That is the whole client integration. mount() renders the widget and starts the workflow. subscribe() lets your page react as the workflow progresses.

The mount handle

ZeptoFlow.mount(target, options) returns a handle you can use to control the widget:

Method	Purpose
`element`	The element the widget rendered into.
`update(partial)`	Patch mounted options. A fresh `{ token, action }` restarts the widget for a new Payment Intent on the same host.
`subscribe(listener)`	Register a lifecycle-event listener. Returns an unsubscribe function.
`destroy()`	Unmount the widget and abort any in-flight request.

See the SDK reference for full signatures, mount options, and theming.

The target accepts a selector or an element

Pass a CSS selector string (like '#zepto-flow') or a DOM Element. mount() throws immediately if the selector matches nothing.

Next steps

Learn how to handle the payment lifecycle: the events the widget emits and what each one means.