Skip to main content
Redirect users to a confirmation or thank you page after a successful payment.

​
Recipe

checkout.addEventListener('primer:ready', (event) => {
  const primer = event.detail;

  primer.onPaymentSuccess = ({ payment }) => {
    window.location.href = `/order/confirmation?id=${payment.orderId}`;
  };
});

​
How it works

  1. Listen for the primer:ready event to get access to the Primer SDK instance
  2. Set the onPaymentSuccess callback to handle successful payments
  3. Use window.location.href to redirect to your confirmation page
  4. Pass the orderId as a query parameter so your confirmation page can display order details

​
Variations

​
Redirect with payment ID

primer.onPaymentSuccess = ({ payment }) => {
  window.location.href = `/order/confirmation?paymentId=${payment.id}`;
};

​
Redirect to different pages based on payment method

primer.onPaymentSuccess = ({ payment, paymentMethodType }) => {
  const redirectUrls = {
    PAYMENT_CARD: '/confirmation/card',
    PAYPAL: '/confirmation/paypal',
    default: '/confirmation',
  };

  const url = redirectUrls[paymentMethodType] || redirectUrls.default;
  window.location.href = `${url}?id=${payment.orderId}`;
};

​
See also