Saved payment & upsell example

<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>

<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>