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

# Shopify cart checkout

> Cart line items, totals, and upsell with shopify config

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

```typescript theme={null}
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,
  },
},
```

<Callout type="info">
  `variant` and `product` are numeric Shopify IDs sent to the Paysight API. `name`, `description`, and `imageUrl` are display-only.
</Callout>

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

```javascript theme={null}
{
  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

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

See [Saved payment & upsell](/widget-sdk/guides/saved-payment-and-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](/widget-sdk/examples/shopify-two-page-flow) — live demo at `https://payment.paysight.io/demo?preset=shopify`.

## Related

* [Configuration reference](/widget-sdk/reference/configuration)
* [Events reference](/widget-sdk/reference/events)
* [External payment button](/widget-sdk/guides/external-payment-button)