Skip to main content
All systems operationalChangelogv1
Log in
Web SDK

Complete checkout on the Web

Choose the supported DEUNA Web integration for a complete checkout and migrate from the retired initCheckout surface.

Last updated October 16, 2026
On this page

The current DEUNA Web SDK does not expose initCheckout. Build the merchant-owned checkout page and embed initPaymentWidget for payment, or use the maintained native SDK when the checkout lives in a mobile application.

Choose the supported integration#

Flow diagram
1Where does checkoutrun?2-- Mobile app3-- DEUNAconfiguration4Merchant page +Payment Widget5Confirm availablehosted experiencewith DEUNA6iOS, Android, orReact Native SDK7Backend creates andverifies order
Merchant or customerDEUNA
NeedSupported surface
Add payment methods to an existing web checkoutPayment Widget for Web
Vault a card or run Click to PayElements and card vault
Continue 3DS or an APM actionNext Action
Build a native mobile checkoutiOS, Android, or React Native
Wrap an existing merchant web checkoutWeb SDK in a mobile WebView, with the documented limitations

Recommended web architecture#

01 · merchant UI
Collect checkout data
Own cart, contact, shipping, and consent fields in your application.
02 · merchant backend
Create the order
Validate totals and send the supported order contract.
03 · DEUNA widget
Collect payment
Open Payment Widget with the returned order token.
04 · merchant backend
Verify and fulfill
Use the final DEUNA order state and webhooks.
JavaScript
const {orderToken, merchantOrderId} = await createOrderFromServer(checkoutState);

await DeunaSDK.initPaymentWidget({
  orderToken,
  mode: 'target',
  target: '#payment-step',
  callbacks: {
    onSuccess: () => renderVerifiedResult(merchantOrderId),
    onError: showPaymentRecovery,
    onClosed: () => returnToPaymentMethods(),
    onResize: ({height}) => resizePaymentStep(height),
  },
});

Migration from initCheckout#

  1. Keep cart, shipping, billing, customer, and consent state in the merchant application.
  2. Move order creation to the merchant backend if it was client-side.
  3. Replace initCheckout(...) with initPaymentWidget({orderToken, ...}).
  4. Map old checkout completion handling to onSuccess, then retrieve the order on the backend.
  5. Map old lifecycle analytics to the current SDK events.
  6. Test mobile widths, address editing, browser navigation, 3DS, APM redirects, and recovery after refresh.

State ownership#

StateOwner
Cart contents, prices, inventory, shipping, taxMerchant backend
Checkout form and step navigationMerchant application
Eligible payment methods and credential entryDEUNA Payment Widget and configured connections
Payment processing and normalized order stateDEUNA API
Fulfillment decisionMerchant backend after verification

Responsive layout#

Place the payment target in a one-column flow on small screens. Avoid side-by-side order summary and payment content below your layout breakpoint, keep the target at width: 100%, and respond to onResize. Sticky headers and footers must not cover issuer challenges or the widget action.

Payment WidgetCurrent supported browser payment surface.Create paymentBackend order and payment contract.WebhooksServer-side final-state updates.