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…

1. Find redirect methods​

2. Render the payment element​

3. Submit payment​

Complete example​

See also​

1. Find redirect methods

2. Render the payment element

3. Submit payment

Complete example

See also