Skip to main content
You’ve installed the SDK and rendered <primer-checkout>. You’re ready to accept payments.

​
The Default Payment Flow

When a customer lands on your checkout page, here’s what happens:
  1. Primer loads your payment methods from the Dashboard configuration
  2. Customer selects a payment method and enters their details
  3. Customer submits the form to complete the payment
  4. Primer handles the result and notifies your application
No additional code is required for this flow to work.

​
What Primer Handles for You

Out of the box, Primer Checkout manages:
ConcernWhat Primer Does
ValidationReal-time input validation with inline error messages
Error displayPayment failures shown automatically in the UI
Redirects3DS challenges, bank redirects, and wallet flows
Loading statesVisual feedback during processing
Payment method logicEach method’s specific requirements and flows
You don’t need to write code for any of these behaviors.

​
Listening for Results

To react to payment outcomes, register callbacks when the SDK is ready: 
const checkout = document.querySelector('primer-checkout');

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

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

  primer.onPaymentFailure = ({ error }) => {
    // Error is already displayed in the checkout UI
    console.error('Payment failed:', error.diagnosticsId);
  };
});

​
Testing in Sandbox

Use these test cards to verify your integration:
Card NumberResult
4111 1111 1111 1111Success
4000 0000 0000 0002Declined
Use any future expiry date and any 3-digit CVV.

​
What’s Next?

Your checkout is now accepting payments. Here are common next steps:

Styling

Match the checkout to your brand

Layout

Control the structure of checkout components

Redirect After Payment

Navigate to a confirmation page

Track in Analytics

Send events to your analytics platform