> ## Documentation Index
> Fetch the complete documentation index at: https://docs.paysight.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Saved payment & upsell example

> Two-page flow with savePaymentMethod and paysightSession handoff

This example shows checkout on page 1 with `savePaymentMethod: true`, then an upsell charge on page 2 using `upsell.initialPaymentSession`.

<Card title="Live demo" icon="play" href="https://payment.paysight.io/demo?preset=upsell">
  Open the interactive upsell demo in the sandbox playground.
</Card>

## Page 1 — checkout

```html theme={null}
<div id="checkout-widget"></div>
<script src="https://payment.paysight.io/widget-sdk.js"></script>
<script>
  PaySightSDK.createWidget({
    targetId: 'checkout-widget',
    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;
        if (session) {
          sessionStorage.setItem('paysightSession', session);
          window.location.href = '/upsell';
        }
      }
    },
  });
</script>
```

## Page 2 — upsell

```html theme={null}
<div id="upsell-widget"></div>
<button id="upsell-btn" type="button">Add offer — $9.99</button>

<script>
  const paysightSession = sessionStorage.getItem('paysightSession');

  const widget = PaySightSDK.createWidget({
    targetId: 'upsell-widget',
    config: {
      productId: YOUR_PRODUCT_ID,
      sessionId: 'upsell-' + Date.now(),
      environment: 'sandbox',
      amount: 9.99,
      hidePaymentButton: true,
      usePreviousPaymentMethod: true,
      upsell: {
        upsellId: 'addon-offer',
        initialPaymentSession: paysightSession,
      },
      customer: { email: 'customer@example.com' },
    },
    onMessage: (msg) => {
      if (msg.type === 'PAYMENT_SUCCESS' && msg.payload?.mode === 'upsell') {
        window.location.href = '/thank-you';
      }
      if (msg.type === 'DUPLICATE_TRANSACTION') {
        window.location.href = '/thank-you';
      }
      if (msg.type === 'PAYMENT_ERROR' && msg.payload?.mode === 'upsell') {
        alert(msg.payload?.message ?? 'Upsell failed');
      }
    },
  });

  document.getElementById('upsell-btn').onclick = () => widget.submitUpsell();
</script>
```

## Key points

* Store `paysightSession` from `PAYMENT_SUCCESS.payload`, not your `sessionId`.
* Handle `DUPLICATE_TRANSACTION` as success if the user refreshes page 2.
* `submitUpsell()` requires `hidePaymentButton: true` or the in-iframe upsell button.

## Related

* [Saved payment & upsell guide](/widget-sdk/guides/saved-payment-and-upsell)
* [External button example](/widget-sdk/examples/external-button-checkout-upsell)