use-stripe-cart

1.2.1 • Public • Published

use-stripe-cart

A Shopping Cart State and Logic for Stripe in React

NPM JavaScript Style Guide

All Contributors

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 />

/** @jsx jsx */
import { CartProvider } from 'use-stripe-cart';
import './index.css';
import App from './App';
 
const stripe = window.Stripe(process.env.REACT_APP_STRIPE_API_PUBLIC);
 
ReactDOM.render(
  <CartProvider
    stripe={stripe}
    billingAddressCollection={false}
    successUrl={'stripe.com'}
    cancelUrl={'twitter.com/dayhaysoos'}
    currency={'USD'}
  >
    <App />
  </CartProvider>,
  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';
  }
}

License

MIT © dayhaysoos


This hook is created using create-react-hook.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Kevin Cunningham

⚠️ 💻

Ian Jones

⚠️

Christopher Brown

⚠️ 💻

Nick DeJesus

💻 ⚠️

Shodipo Ayomide

📖

This project follows the all-contributors specification. Contributions of any kind welcome!

Readme

Keywords

none

Package Sidebar

Install

npm i use-stripe-cart

Weekly Downloads

37

Version

1.2.1

License

MIT

Unpacked Size

624 kB

Total Files

37

Last publish

Collaborators

  • dayhaysoos