Packages
react
components
ShopPayButton

ShopPayButton Component

The ShopPayButton component renders a button that redirects to the Shop Pay checkout. It relies on the ShopProvider context provider.

Usage

import React from "react";
import { ShopPayButton } from "@airsoko/react";
 
const MyComponent = () => {
  const variantIds = ["1", "2"];
 
  return <ShopPayButton variantIds={variantIds} />;
};
 
export default MyComponent;

Props

NameTypeDescription
variantIdsstring[] An array of IDs of the variants to purchase with Shop Pay. If you want to use other quantities, then use variantIdsAndQuantities.
variantIdsAndQuantitiesArray\<{ id: string; quantity: number; }\>An array of variant IDs and quantities to purchase with Shop Pay. If you want to use only variant IDs with quantity 1, then use variantIds.

Notes

  • Ensure that either variantIds or variantIdsAndQuantities is passed to the ShopPayButton component.
  • The ShopPayButton component internally handles the loading of the Shop Pay script and lazy-loads the source code.
  • If both variantIds and variantIdsAndQuantities are provided, an error will be thrown.
  • If neither variantIds nor variantIdsAndQuantities are provided, an error will be thrown.