Shopify cart checkout

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. Integrate Paysight with Shopify-style carts and a two-page upsell flow.

Overview

When shopify is present on WidgetConfig:

Cart totals are computed from cart line items — amount is ignored (pass 0).
Page 1 (checkout) typically sets savePaymentMethod: true.
Page 2 (upsell) charges via usePreviousPaymentMethod: true and paysightSession from page 1.

Configuration

shopify: {
  showCart?: boolean;       // default true
  disableWallets?: boolean;   // hide Apple/Google Pay in shopify mode
  optIn?: boolean;          // true requests subscription opt-in
  cart: [
    {
      quantity: 1,
      variant: YOUR_VARIANT_ID,
      product: YOUR_SHOPIFY_PRODUCT_ID,
      price: 29.99,
      name: 'Product name',
      description?: string,
      imageUrl?: string,
      discountCodeAmount?: 5,
    },
  ],
  shipping?: {
    product: YOUR_SHIPPING_PRODUCT_ID,
    name: 'Standard Shipping',
    price: 4.95,
  },
},

variant and product are numeric Shopify IDs sent to the Paysight API. name, description, and imageUrl are display-only.

Subscription opt-in

For the initial Shopify cart checkout, set config.shopify.optIn: true when the customer accepts the subscription. This requests the subscription configured on the top-level Paysight productId in addition to the Shopify order. The subscription must already be configured on that Paysight product; this flag does not create a subscription plan or select a Shopify selling plan.

`shopify.optIn`	Initial checkout behavior
`true`	Requests subscription opt-in alongside the Shopify order.
`false`	Processes the Shopify order without subscription opt-in.
Omitted	Same opt-in behavior as `false`.

The widget forwards the boolean to the Paysight API as shopify.optIn, nested inside the shopify object.

singlePurchase is a separate top-level flag for one-time purchases. Setting singlePurchase: false alone does not opt a Shopify checkout into a subscription — use shopify.optIn: true. When opting in, omit singlePurchase or set it to false; do not combine shopify.optIn: true with singlePurchase: true. Likewise, savePaymentMethod: true only saves the payment method and does not request subscription opt-in.

Choose shopify.optIn before submitting the initial payment. A later cart upsell uses the original payment session and is not a new subscription opt-in step.

Amount calculation

lineTotal = (price - discountCodeAmount) × quantity
subtotal  = sum(lineTotal) excluding shipping product if duplicated in cart
total     = subtotal + shipping.price

This total is sent to the API as amount.

Page 1 example

This example assumes the customer has accepted the subscription. Set optIn: false when they decline or when the checkout is only for the Shopify order.

{
  productId: YOUR_PRODUCT_ID,
  sessionId: 'YOUR_SESSION_ID',
  environment: 'sandbox',
  amount: 0,
  savePaymentMethod: true,
  shopify: {
    optIn: true,
    cart: [{ quantity: 1, variant: YOUR_VARIANT_ID, product: YOUR_SHOPIFY_PRODUCT_ID, price: 29.99, name: 'Item' }],
    shipping: { product: YOUR_SHIPPING_PRODUCT_ID, name: 'Shipping', price: 4.95 },
  },
  customer: { email: 'customer@example.com', country: 'US' },
}

Page 2 upsell

{
  amount: 0,
  usePreviousPaymentMethod: true,
  upsell: {
    upsellId: 'warranty-upsell',
    initialPaymentSession: paysightSessionFromPage1,
    upsellButton: { text: 'Add to order' },
  },
  shopify: {
    cart: [/* upsell line items */],
  },
}

See Saved payment & upsell for session handoff.

Events

Upsell charges use PAYMENT_START, PAYMENT_SUCCESS, and PAYMENT_ERROR with payload.mode === 'upsell'.

Event	When
`CART_READY`	Cart UI mounts
`CART_UPDATE`	Cart config changes
`PAYMENT_START`	Upsell charge started
`PAYMENT_SUCCESS`	Upsell succeeded (`mode: 'upsell'`)
`PAYMENT_ERROR`	Upsell failed
`DUPLICATE_TRANSACTION`	Upsell already completed

CART_READY / CART_UPDATE payload: { subtotal, shipping, total, currency, itemCount }.

Styling

Cart and upsell UI use .ps-cart, .ps-cart-inner, .ps-cart-*, and .ps-upsell-submit classes — override via theme.css.

Live demo

Shopify two-page example — live demo at https://payment.paysight.io/demo?preset=shopify.

Widget SDK

Integration Guides

Widget SDK Reference

Examples

Overview

Configuration

Subscription opt-in

Amount calculation

Page 1 example

Page 2 upsell

Events

Styling

Live demo

​Overview

​Configuration

​Subscription opt-in

​Amount calculation

​Page 1 example

​Page 2 upsell

​Events

​Styling

​Live demo

​Related

Overview

Configuration

Subscription opt-in

Amount calculation

Page 1 example

Page 2 upsell

Events

Styling

Live demo

Related