Shopify two-page flow

For checkout and every upsell, reuse the same Paysight productId and the initial successful paysightSession. Give each offer a unique, stable upsellId, set its own amount (or Shopify cart), and submit the accepted offer with submitUpsell(). Paysight product IDs are separate from Shopify cart product/variant IDs. See Saved payment & upsell. Shopify cart mode computes totals from line items. Combine with saved payment for a two-page funnel.

Live demo

Open the interactive Shopify cart demo in the sandbox playground.

Page 1 — cart checkout

This example creates a Shopify order without subscription opt-in (shopify.optIn: false). If the customer accepts the subscription configured on your Paysight productId, set shopify.optIn: true before submitting the initial payment and omit singlePurchase or set it to false. See Subscription opt-in.

PaySightSDK.createWidget({
  targetId: 'checkout-widget',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: 'checkout-' + Date.now(),
    environment: 'sandbox',
    amount: 0,
    savePaymentMethod: true,
    shopify: {
      showCart: true,
      optIn: false,
      cart: [
        {
          quantity: 1,
          variant: YOUR_VARIANT_ID,
          product: YOUR_SHOPIFY_PRODUCT_ID,
          price: 29.99,
          name: 'Main product',
        },
      ],
      shipping: {
        product: YOUR_SHIPPING_PRODUCT_ID,
        name: 'Standard shipping',
        price: 4.95,
      },
    },
    customer: {
      email: 'customer@example.com',
      firstName: 'Jane',
      lastName: 'Doe',
      country: 'US',
    },
  },
  onMessage: (msg) => {
    if (msg.type === 'CART_READY') {
      console.log('Cart total:', msg.payload.total);
    }
    if (msg.type === 'PAYMENT_SUCCESS') {
      sessionStorage.setItem('paysightSession', msg.payload?.paysightSession ?? '');
      window.location.href = '/upsell';
    }
  },
});

Page 2 — cart upsell

PaySightSDK.createWidget({
  targetId: 'upsell-widget',
  config: {
    productId: YOUR_PRODUCT_ID,
    sessionId: 'upsell-' + Date.now(),
    environment: 'sandbox',
    amount: 0,
    usePreviousPaymentMethod: true,
    upsell: {
      upsellId: 'extended-warranty',
      initialPaymentSession: sessionStorage.getItem('paysightSession'),
      upsellButton: { text: 'Add protection plan' },
    },
    shopify: {
      cart: [
        {
          quantity: 1,
          variant: YOUR_UPSELL_VARIANT_ID,
          product: YOUR_UPSELL_PRODUCT_ID,
          price: 9.99,
          name: 'Protection plan',
        },
      ],
    },
    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') {
      alert(msg.payload?.message ?? 'Upsell failed');
    }
  },
});

Cart events

Listen for CART_READY and CART_UPDATE to sync order summary on your host page:

if (msg.type === 'CART_UPDATE') {
  const { subtotal, shipping, total, currency } = msg.payload;
  updateOrderSummary({ subtotal, shipping, total, currency });
}

Widget SDK

Integration Guides

Widget SDK Reference

Examples

Live demo

Page 1 — cart checkout

Page 2 — cart upsell

Cart events

Live demo

​Page 1 — cart checkout

​Page 2 — cart upsell

​Cart events

​Related

Page 1 — cart checkout

Page 2 — cart upsell

Cart events

Related