Redirect Payments

Some payment methods (e.g., Bancontact, iDEAL, PayPal) redirect the customer to an external page to complete payment. These are identified by integrationType === 'redirection' on the payment method object.

Prerequisites

This recipe assumes you have a checkout instance already initialized. See the Getting Started guide if you haven't done this yet.

---

1. Find redirect methods

Filter paymentMethods by integrationType:

const redirectMethods = checkout.paymentMethods.value.filter(
    m => !m.isSecondary && m.integrationType === 'redirection'
);

2. Render the payment element

Call getPaymentElement() with the redirection option to render the redirect notice:

const element = method.getPaymentElement({
    redirection: { title: `You will be redirected to ${method.name}` },
});
element.appendTo(document.getElementById('form'));

3. Submit payment

Once checkout.isPaymentFulfilled is true, submit with checkout.submitPayment(). The SDK handles the redirect automatically.

checkout.isPaymentFulfilled.subscribe((isReady) => {
    payButton.disabled = !isReady;
});

payButton.addEventListener('click', async () => {
    await checkout.submitPayment();
    // Browser is redirected to the payment provider
});

After the customer completes payment on the external page, they are sent back to the redirection URL configured on the order.

Redirection URL

Set the return URL when creating the order — pass it as order.order.redirection in the session request body. The customer lands on that page after completing or cancelling payment.

Complete example

Loading demo…

See also

• Getting Started — Initialize the checkout and handle the full payment flow
• Digital Wallets — Wallet buttons (Google Pay, Apple Pay) that also redirect for authorization
• Event Handling — React to checkout events during the payment flow