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
npm install -s react-cart
-
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
, andsecret
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 yourapikey
and the signedJWT
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
andactions
.
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);
Full documentation: abcart.io/documentation.
Example application: https://github.com/abcloudio/abcart-react-example
Install dependencies
npm install
Run the tests
npm run test