use-stripe-cart

A Shopping Cart State and Logic for Stripe in React

Installation

npm install --save use-stripe-cart

or

yarn add use-stripe-cart

Usage

At the root level of your app, wrap your Root app in the <CartProvider />.

Remember to add your public Stripe key, in this example it's added in in the environment process.env.REACT_APP_STRIPE_API_PUBLIC.

/** @jsx jsx */
import { jsx } from 'theme-ui';
import ReactDOM from 'react-dom';
import { Elements, ElementsConsumer } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { CartProvider } from 'use-stripe-cart';
import './index.css';
import App from './App';

const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API_PUBLIC);

ReactDOM.render(
  <Elements stripe={stripePromise}>
    <ElementsConsumer>
      {({ stripe }) => (
        <CartProvider
          stripe={stripe}
          billingAddressCollection={false}
          successUrl={'https://stripe.com'}
          cancelUrl={'https://twitter.com/dayhaysoos'}
          currency={'USD'}
        >
          <App />
        </CartProvider>
      )}
    </ElementsConsumer>
  </Elements>,
  document.getElementById('root')
);

To add an item to the cart, use addItem()

/**@jsx jsx */
import { jsx, Box, Image, Button, Flex } from 'theme-ui';
import { useStripeCart } from 'use-stripe-cart';
import { toCurrency } from '../util';

/**
 * PRODUCT DATA COMING FROM PROPS
const fakeData = [
  {
    name: 'Bananas',
    sku: 'sku_GBJ2Ep8246qeeT',
    price: 400,
    image: 'https://www.fillmurray.com/300/300',
    currency: 'USD',
  },
  {
    name: 'Tangerines',
    sku: 'sku_GBJ2WWfMaGNC2Z',
    price: 100,
    image: 'https://www.fillmurray.com/300/300',
    currency: 'USD',
  },
];
*/

const Product = (product) => {
  const { addItem } = useStripeCart();
  const { name, sku, price, image, currency } = product;
  return (
    <Flex
      sx={{
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Image src={image} />
      <Box>
        <p>{name}</p>
        <p>{toCurrency({ price: price, currency })}</p>
      </Box>
      <Button onClick={() => addItem({ ...product })} backgroundColor={'black'}>
        Add To Cart
      </Button>
    </Flex>
  );
};

For displaying what's actually in the cart, refer to the CartDisplay component: https://github.com/dayhaysoos/use-stripe-cart/blob/master/example/src/components/cart-display.js

API

cartDetails: Object

Cart details is an object with skus of the items in the cart as keys and details of the items as the value, for example:

{
  sku_GBJ2Ep8246qeeT: {
    name: 'Bananas';
    sku: 'sku_GBJ2Ep8246qeeT';
    price: 400;
    image: 'https://www.fillmurray.com/300/300';
    currency: 'USD';
    quantity: 1;
    formattedPrice: '$4.00';
  }
}