Abcart-react NPM

abcart-react

This repository holds the abcart-react SDK. It is build to work with the abcart service as provided by abcart.io. 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: abcart.io/documentation.

Example application: https://github.com/abcloudio/abcart-react-example

Installation

npm install -s react-cart

Quick Start

Sign-up for an account at abcart.io
Connect your Stripe account, from your abcart account dashboard.

Add products and subscriptions to your Stripe account that you would like to charge through the abcart service. https://www.abcart.io/documentation/working-with-products-and-skus-using-stripe

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. https://www.abcart.io/documentation/signing-json-web-tokens

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
    },
    "your-secret-key",
    { 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 />
    </AbcartProvider>
);

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
        </button>
    );
};
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 (
        <div>
            {cartItems.map(item => (
                <div>
                    {item.sku} | {item.quantity} | {item.metadata.name}
                </div>
            ))}
        </div>
    );
};

export default connectCartItems(ShoppingCart);