Skip to main content
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;
  cart: [
    {
      quantity: 1,
      variant: YOUR_VARIANT_ID,
      product: YOUR_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.

​
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

{
  productId: YOUR_PRODUCT_ID,
  sessionId: 'YOUR_SESSION_ID',
  environment: 'sandbox',
  amount: 0,
  savePaymentMethod: true,
  shopify: {
    cart: [{ quantity: 1, variant: YOUR_VARIANT_ID, product: YOUR_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'.
EventWhen
CART_READYCart UI mounts
CART_UPDATECart config changes
PAYMENT_STARTUpsell charge started
PAYMENT_SUCCESSUpsell succeeded (mode: 'upsell')
PAYMENT_ERRORUpsell failed
DUPLICATE_TRANSACTIONUpsell 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.