> ## Documentation Index
> Fetch the complete documentation index at: https://developers.loyaltylion.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WebView JS API reference

When running inside a WebView, the LoyaltyLion JS SDK exposes additional APIs the
parent mobile app can use to trigger updates and pass information

WebView APIs can be used by executing JavaScript inside the WebView and calling
`loyaltylion.webview.methodName`, where `methodName` is one of the documented
API methods below.

Interacting with the JS API is typically not required for a basic WebView setup,
but is often used to support [advanced features](/sdk/webviews/advanced/setup)

Unless otherwise specified, you must wait for the LoyaltyLion SDK to report that
it has finished loading before using WebView APIs. You can do this by listening
to the [sdkReady event](/sdk/webviews/advanced/webview-js-events#sdkready).

## setShopifyCartState

`loyaltylion.webview.setShopifyCartState`

This can be used to inform the LoyaltyLion SDK about the current Shopify cart
state, which is needed for some functionality. For example, free product rewards
often require a cart to contain a paid item before they can be redeemed, so the
SDK needs to know about the cart first.

`setShopifyCartState` expects a single argument, which should be a JSON object
representing the cart state. All fields can be retrieved from the Storefront API
[Cart object](https://shopify.dev/docs/api/storefront/latest/objects/Cart).

### Properties

<ParamField path="id" type="string" required>
  The ID of the cart
</ParamField>

<ParamField path="totalCost" type="string" required>
  The total amount for the customer to pay, as a decimal money amount. From `cost.totalAmount.amount` on the Storefront API [Cart
  object](https://shopify.dev/docs/api/storefront/latest/objects/Cart).
</ParamField>

<ParamField path="lines" type="object[]" required>
  An array of objects describing the current lines on the cart

  <Expandable title="properties" defaultOpen>
    <ResponseField name="id" type="string" required>
      The ID of the cart line

      Example: `gid://shopify/CartLine/19fdf4cb-5495-4c2f-83d0-40c6a4898f5e`
    </ResponseField>

    <ResponseField name="quantity" type="number" required>
      Quantity of the cart line
    </ResponseField>

    <ParamField path="totalCost" type="string" required>
      The total cost of the line, as a decimal money amount. From `cost.totalAmount.amount` on the Storefront API [BaseCartLine object](https://shopify.dev/docs/api/storefront/latest/interfaces/BaseCartLine)
    </ParamField>

    <ResponseField name="merchandiseId" type="string" required>
      The product variant ID, from `merchandise.id` on the Storefront API [BaseCartLine object](https://shopify.dev/docs/api/storefront/latest/interfaces/BaseCartLine)

      Example: `gid://shopify/ProductVariant/1001`
    </ResponseField>

    <ResponseField name="productId" type="string" required>
      The product ID, from `merchandise.product.id` on the Storefront API [BaseCartLine object](https://shopify.dev/docs/api/storefront/latest/interfaces/BaseCartLine)

      Example: `gid://shopify/Product/1001`
    </ResponseField>

    <ResponseField name="attributes" type="object" required>
      The attributes for the cart line as a key-value object

      Example:

      ```json theme={null}
      {
        "attributeOne": "value",
        "attributeTwo": "value"
      }
      ```
    </ResponseField>
  </Expandable>
</ParamField>

### Example

```javascript theme={null}
loyaltylion.webview.setShopifyCartState({
  id: 'gid://shopify/Cart/Z2NwLWV1cm9',
  totalCost: '79.99',
  lines: [
    {
      id: 'gid://shopify/CartLine/19fdf4cb-5495-4c2f-83d0-40c6a4898f5e',
      quantity: 1,
      totalCost: '79.99',
      merchandiseId: 'gid://shopify/ProductVariant/600',
      productId: 'gid://shopify/Product/100',
      attributes: {},
    },
    {
      id: 'gid://shopify/CartLine/90ce960d-237e-4a02-bc28-8e4c80c112c4',
      quantity: 1,
      totalCost: '0.00',
      merchandiseId: 'gid://shopify/ProductVariant/500',
      productId: 'gid://shopify/Product/200',
      attributes: {
        __lion_sfp_id: '40c6a4898',
      },
    },
  ],
})
```