Skip to main content
Display a personalized success message or modal to users after their payment completes.

​
Recipe

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

  primer.onPaymentSuccess = ({ payment, paymentMethodType }) => {
    const message = `Payment of ${payment.amount} completed via ${paymentMethodType}`;
    showSuccessModal(message);
  };
});

​
How it works

  1. Listen for the primer:ready event to access the Primer SDK instance
  2. Set the onPaymentSuccess callback
  3. Access payment details and paymentMethodType from the callback parameters
  4. Display your custom UI (modal, toast, inline message, etc.)

​
Variations

​
Show success with order details

primer.onPaymentSuccess = ({ payment }) => {
  document.getElementById('success-container').innerHTML = `
    <h2>Thank you for your order!</h2>
    <p>Order ID: ${payment.orderId}</p>
    <p>Amount: ${formatCurrency(payment.amount, payment.currencyCode)}</p>
  `;
};

​
Animate success state

primer.onPaymentSuccess = () => {
  const successEl = document.getElementById('success-message');
  successEl.classList.add('visible');

  // Hide checkout form
  document.querySelector('primer-checkout').style.display = 'none';
};

​
See also