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 />
/** @jsx jsx */import CartProvider from 'use-stripe-cart';import './index.css';import App from './App'; const stripe = window; ReactDOM;
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 PROPSconst 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 = { const addItem = ; const name sku price image currency = product; return <Flex = > <Image = /> <Box> <p>name</p> <p></p> </Box> <Button = => 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!