Package Exports

@reflowhq/cart-react
@reflowhq/cart-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@reflowhq/cart-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Reflow CartView

This is a React 18+ component for rendering a Reflow shopping cart in your application.

Installation

Install it in your project with npm or another package manager:

npm install @reflowhq/cart-react

Usage

This library is meant to run in the browser. Just import the hook and pass your storeID, which you can obtain from Reflow's website:

import CartView, { useCart } from "@reflowhq/cart-react";
import useAuth from "@reflowhq/auth-react";
import "@reflowhq/cart-react/src/cartview.css";

const config = {
  storeID: "1234",
};

function App() {
  const auth = useAuth(config);
  const cart = useCart(config);

  return (
    <div>
      <CartView
        cart={cart}
        auth={auth}
        successURL={"https://example.com/success"}
        cancelURL={"https://example.com/cancel"}
        onMessage={(message) => {
          console.log(message.type, message.title, message.description);
        }}
      />
      <button onClick={() => cart.addProduct({ id: "5678" })}>Add to cart</button>
    </div>
  );
}

You can see a full featured example in the examples directory.

API

Calling the useCart hook returns an object containing the current cart state as well as methods for managing it.

const cart = useCart(config);
console.log(cart);

/*
{
  "isLoaded": true,
  "isUnavailable": false,
  "products": [],
  "locations": [],
  ...
}
*/

Cart state

Prop	Type	Description
`isLoaded`	boolean	True if the cart has been fetched.
`isUnavailable`	boolean	True if there were issues while fetching the cart.
`vacationMode`	object	Includes a boolean status and a message if the store is in vacation mode.
`products`	array	The line items currently in the shopping cart.
`footerLinks`	array	An array of the links to terms of service/privacy/refund policy that are configured in the Reflow store's settings.
`signInProviders`	array	An array of the configured payment providers e.g. "facebook", "google", etc.
`paymentProviders`	array	An array of objects describing the configured payment providers e.g. Paypal, Stripe, etc.
`currency`	string	The cart currency.
`subtotal`	number	The cart subtotal. Use `cart.formatCurrency(subtotal)` to format the price.
`total`	number	The cart total. Use `cart.formatCurrency(total)` to format the price.
`discount`	number	The cart discount. Use `cart.formatCurrency(discount)` to format the price.
`coupon`	object	An object describing the coupon applied to the cart or `null`. Includes the coupon name, code, discount amount, etc.
`giftCard`	object	An object describing the gift card applied to the cart or `null`. Includes the gift card code, discount amount, balance, etc.
`taxes`	object	An object describing the taxes applicable to the order or `null`. Includes the tax amount, as well as tax exemption details.
`taxExemption`	object	An object describing the applied tax exemption.
`locations`	array	The available pickup locations.
`shippingMethods`	array	The available shipping methods for the provided shipping address.
`shippableCountries`	array	The countries the items in the cart can be shipped to.
`shippingAddress`	object	The shipping address entered by the user.
`errors`	array	An array of objects describing the errors encountered. Includes error type, severity, message.

Reflow API

`cart.refresh()`

Updates the cart state with fresh data. If a cart has not yet been created, it creates a new cart.

`cart.addProduct(options, quantity)`

Adds a new product to the cart.

options can have the following keys:

Prop	Required	Description
`id`	Yes	The `id` of the product you want to add to the cart.
`variantID`	No*	The id of the selected product variant (* required if the product has variants)
`personalization`	No	An array of objects describing the applied personalizations.
`files`	No	An array of objects describing the files that need to be uploaded for personalizations of type `"file"`.

Each personalization object can have the following props:

Prop	Required	Description
`id`	Yes	The personalization id.
`inputText`	No	The personalization text (for personalizations of type `"text"`).
`selected`	No	The selected value from the personalization dropdown (for personalizations of type `"dropdown"`).
`filename`	No	The name of the uploaded file (for personalizations of type `"file"`).
`filehash`	No	//TODO (for personalizations of type `"file"`).

Each file object can have the following props:

Prop	Required	Description
`hash`	Yes	//TODO
`file`	Yes	A Blob or a File object that will be uploaded to the server.

let result = await cart.addProduct(
  {
    id: "1234",
    variantID: "1234_m",
    personalization: [
      {
        id: "1234_engraving",
        inputText: "Hello World",
      },
      {
        id: "1234_gift_wrap",
      },
    ],
  },
  2
);

console.log(result);

/*
{
    "cartKey": <your-cart-key>
    "cartQuantity": 2,
    "success": true
}
*/

`cart.updateLineItemQuantity(lineItemID, quantity)`

Updates the quantity of a line item in the cart.

let result = await cart.updateLineItemQuantity(product.lineItemID, 3);

console.log(result);

/*
{
    "cartQuantity": 3,
    "success": true
}
*/

`cart.removeLineItem(lineItemID)`

Removes a line item from the cart.

let result = await cart.removeLineItem(product.lineItemID);

console.log(result);

/*
{
    "cartQuantity": 0,
    "success": true
}
*/

`cart.applyDiscountCode({ code })`

Adds a coupon/gift card code to the cart.

let result = await cart.applyDiscountCode({ code: "1234" });

console.log(result);

/*
{
    "type": "coupon",
    "success": true
}
*/

`cart.removeDiscountCode({ code })`

Removes the coupon/gift card with the given code from the cart.

let result = await cart.applyDiscountCode({ code: "1234" });

console.log(result);

/*
{
    "type": "coupon",
    "success": true
}
*/

`cart.updateAddress({ address, deliveryMethod })`

Updates the shipping/digital address and fetches the contents of the Cart with updated tax regions, shipping methods, etc. taking into account the new address.

let result = await cart.updateAddress({
  address: {
    name: "John Doe",
    address: {
      city: "New York",
      country: "US",
      postcode: "1234",
      state: "NY",
    },
  },
  deliveryMethod: "shipping",
});

console.log(result);

/*
{
    "success": true
}
*/

`cart.updateTaxExemption({ address, deliveryMethod, exemptionType, exemptionValue })`

Updates the tax exemption.

exemptionType - "tax-exemption-file" or "tax-exemption-text"
exemptionValue - a Blob or a File object that will be uploaded to the server or a string (VAT number)

let result = await cart.updateTaxExemption({
  address: {
    name: "John Doe",
    address: {
      city: "New York",
      country: "US",
      postcode: "1234",
      state: "NY",
    },
  },
  deliveryMethod: "shipping",
  exemptionType: "tax-exemption-text",
  exemptionValue: "1234",
});

console.log(result);

/*
{
    "success": true
}
*/

`cart.removeTaxExemptionFile({ address, deliveryMethod, exemptionType, exemptionValue })`

Removes the applied tax exemption.

let result = await cart.removeTaxExemptionFile();

console.log(result);

/*
{
    "success": true
}
*/

`cart.checkout(data)`

data can have the following keys:

Prop	Required	Possible Values	Description
`success-url`	Yes	URL	The URL the user should be redirected to after a successful checkout.
`cancel-url`	Yes	URL	The URL where the customer will be redirected after a failed or cancelled payment.
`payment-method`	Yes	`'stripe'`, `'custom'`, `'pay-in-store'`, `'zero-value-cart'`	The URL where the customer will be redirected after a failed or cancelled payment.
`payment-id`	No*	string	The `id` of the payment method. * Required if the payment method is `'custom'`.
`email`		string
`phone`		string
`customer-name`		string
`delivery-method`	Yes	`'shipping'`, `'pickup'`, `'digital'`
`store-location`	No*	number	The index of the selected pickup location. * Required if the delivery method is `'pickup'`
`shipping-method`	No*	number	The index of the selected shipping method. * Required if the delivery method is `'shipping'`
`note-to-seller`	No	string
`auth-account-id`	No	number	The user `id`. * If the store provides sign in methods and a user is logged in.
`auth-save-address`	No	boolean

Additional methods

`cart.getProducts()`

License

Released under the MIT license.