Skip to main content
Charge once on page 1, then charge again on page 2 without re-entering card details.

​
Flow

​
Page 1 — checkout

PaySightSDK.createWidget({
  targetId: 'payment-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: 'checkout-' + Date.now(),
    environment: 'sandbox',
    amount: 29.99,
    savePaymentMethod: true,
    customer: { email: 'customer@example.com', country: 'US' },
  },
  onMessage: (msg) => {
    if (msg.type === 'PAYMENT_SUCCESS') {
      const session = msg.payload?.paysightSession;
      sessionStorage.setItem('paysightSession', session);
      window.location.href = '/upsell';
    }
  },
});
savePaymentMethod applies to card, Apple Pay, and Google Pay.

​
Page 2 — upsell

const paysightSession = sessionStorage.getItem('paysightSession');

PaySightSDK.createWidget({
  targetId: 'upsell-container',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: 'upsell-' + Date.now(),
    environment: 'sandbox',
    amount: 9.99,
    usePreviousPaymentMethod: true,
    upsell: {
      upsellId: 'addon-offer',
      initialPaymentSession: paysightSession,
      upsellButton: { text: 'Add to order' },
    },
    customer: { email: 'customer@example.com' },
  },
  onMessage: (msg) => {
    if (msg.type === 'PAYMENT_SUCCESS' && msg.payload?.mode === 'upsell') {
      redirectToThankYou();
    }
    if (msg.type === 'DUPLICATE_TRANSACTION') redirectToThankYou();
    if (msg.type === 'PAYMENT_ERROR' && msg.payload?.mode === 'upsell') {
      showError(msg.payload);
    }
  },
});
Upsell is active when both upsell.upsellId and upsell.initialPaymentSession are set.
initialPaymentSession must be the paysightSession from page 1 PAYMENT_SUCCESS — not your sessionId.

​
External pay button on upsell

Combine with hidePaymentButton: true: 
widget.submitUpsell();
See External payment button.

​
3DS on upsell

Set top-level 3DS flags on page 2, or override per upsell: 
upsell: {
  upsellId: 'addon-offer',
  initialPaymentSession: paysightSession,
  threeDSRequired: true,
  cancelOnThreeDSFailure: true,
  failOnThreeDSChallenge: false,
}

​
Events

Upsell charges emit the standard payment events. Use payload.mode to tell checkout from upsell.
EventWhen
PAYMENT_SUCCESSPage 1: read paysightSession. Page 2: mode === 'upsell'
PAYMENT_STARTUpsell charge started
PAYMENT_ERRORUpsell charge failed (mode === 'upsell')
DUPLICATE_TRANSACTIONAlready charged for this session

​
Shopify variant

The same handoff works with Shopify cart mode on page 1. See Shopify cart checkout.

​
Live demo

Saved payment example — live demo at https://payment.paysight.io/demo?preset=upsell (sandbox).