1.0.0-alpha.5 • Public • Published


This repository holds the abcart-react SDK. It is build to work with the abcart service as provided by The library provides a set of Higher Order Components that provide a full-featured cart, payments, & subscriptions. The abcart service works with your Stripe account and eliminates the need for you to manage your own backend to interface with Stripe's apis.

The library's design is based on a redux style state store and actions that get dispatched. All your components that are using abcart-react state providers will receive updated props whenever the state changes from any action dispatched across your application.

Full documentation:

Example application:


npm install -s react-cart

Quick Start
  • Sign-up for an account at

  • Connect your Stripe account, from your abcart account dashboard.

  • Get your apikey, appId, and secret from the abcart dashboard.

  • Create a JSON webtoken signed with your secret for each unique user to your website. This passes your users identity to the abcart service. This MUST be done in a secure environment, ideally on your server during each request.

import jwttoken from "jsonwebtoken";
const token = jwttoken.sign(
        appId: "your-app-id",
        // continue sending the userId as it is linked to
        // cart items
        userId: "anonymous-user-id",

        // add loggedInUserId
        loggedInUserId: "your-users-id-from-your-system",

        // email will be associated with Stripe customer
        email: "customers-email",

        // optional, to enable test mode in your Stripe account
        // will work with Stripe test cards and save all data
        // to your Test dashboard in Stripe
        test: true
    { issuer: "your-app-id" }
  • Wrap your React application in the AbcartProvider, passing it your apikey and the signed JWT you created on your server.
import React from "react";
import { AbcartProvider } from "abcart-react";

const JWT = localStorage.get("ABCART_JWT");
const App = () => (
    <AbcartProvider apikey="your-api-key" token={JWT}>
        <YourApp />
  • Use this libraries Higher Order Components to provide your application with state and actions.

An example add to cart button.

import React from "react";
import { connectUpdateCartItem } from "abcart-react";

const AddToCart = ({ updateCartItem, sku, metadata }) => {
    return (
        <button onClick={() => updateCartItem({ sku, quantity: 1, metadata })}>
            Add To Cart
AddToCart.PropTypes = {
    sku: PropType.string,
    metadata: PropType.object

export default connectUpdateCartItem(AddToCart);

An example connecting to the shopping cart items.

import React from "react";
import { connectCartItems } from "abcart-react";

const ShoppingCart = ({ cartItems }) => {
    return (
            { => (
                    {item.sku} | {item.quantity} | {}

export default connectCartItems(ShoppingCart);
For further examples and documentation see

Full documentation:

Example application:


Install dependencies

npm install

Run the tests

npm run test




npm i abcart-react

DownloadsWeekly Downloads






Unpacked Size

271 kB

Total Files


Last publish


  • abcloud