Accept payments in a web checkout
Create an order on your backend and open DEUNA Payment Widget with the CDN-distributed Web SDK.
On this page
Overview#
The integration has four parts. Your server owns the order and the private key; the browser receives only an order token and your public key.
server
Create order
Backend creates and tokenizes the order.
browser
Open Payment Widget
Customer selects a payment method and pays.
deuna
Route and process
DEUNA applies routing, provider, and fallback rules.
server
Confirm
A verified webhook confirms the final state.
Before you begin#
- Sandbox private and public keys — see API keys.
- The Web SDK loaded from the DEUNA CDN.
- A backend endpoint that creates a
PAYMENT-LINKorder and returns its order token. - A public HTTPS endpoint for DEUNA webhooks.
1. Create and tokenize the order#
Create the order on your backend with the private API key. Return only its token to the browser.
server.jsJavaScript
app.post('/api/deuna/checkout-session', async (request, response) => {
const cart = await carts.get(request.session.cartId);
const order = await createDeunaOrder({
orderType: 'PAYMENT-LINK',
currency: cart.currency,
items: cart.items,
totalAmount: cart.totalAmount,
});
response.json({orderToken: order.token});
});2. Load and initialize the Web SDK#
HTML
<script crossorigin src="https://cdn.deuna.io/web-sdk/v1.7/index.js"></script>
<script type="module">
await DeunaSDK.initialize({
publicApiKey: 'YOUR_PUBLIC_API_KEY',
env: 'sandbox',
});
</script>3. Open Payment Widget#
checkout.jsJavaScript
const {orderToken} = await fetch('/api/deuna/checkout-session', {
method: 'POST',
}).then((response) => response.json());
await DeunaSDK.initPaymentWidget({
orderToken,
callbacks: {
onSuccess: async (order) => {
await DeunaSDK.close();
showConfirmation(order);
},
onError: (error) => showRetry(error),
onClosed: () => showCart(),
},
});The current Web SDK does not expose initCheckout. Payment Widget is the supported SDK flow for accepting payment inside an existing web checkout.
4. Confirm with webhooks#
Use browser callbacks to update the interface, but fulfill the order only after your backend receives and verifies the corresponding webhook. See Verify webhook signatures.