\n\n[](https://travis-ci.org/escaladesports/zygote-cart)\n[](https://www.npmjs.com/package/@escaladesports/zygote-cart)\n\n[Documentation](https://escaladesports.github.io/zygote-cart/index.html)\n\nZygote is a drop-in e-commerce front end built in React. It takes a \"bring your own backend\" approach so it can work with any payment processor or order fulfillment system. Out of the box it works very well with Stripe.\n\n**Notes:** At the moment Zygote only works with React. However there will be a universal option in the future.\n\n## Installation\n\nWith npm:\n\n```bash\nnpm install --save @escaladesports/zygote-cart\n```\n\nOr with Yarn:\n\n```bash\nyarn add @escaladesports/zygote-cart\n```\n\n## Usage\n\n```jsx\nimport { Cart, addToCart } from '@escaladesports/zygote-cart'\n\n\n\n\n```\n## Styling\n\nThere's two options for styling. You can either add in colors and fonts as a property. Or you can turn off the auto styling and supply your own by targeting the classes in the cart.\n\nEditable style variables:\n\n```jsx\n\n```\n\nRemoving styles:\n\n```jsx\n\n```\n\n## Custom Components\n\nSome areas can contain custom components like header and footer areas.\n\nExample:\n\n```jsx\n}\n infoFooter={Free shipping, except Alaska and Hawaii}\n/>\n```\n\nCustom component properties:\n\n- `header`: Appears at the top of all stages of the cart\n- `footer`: Appears at the bottom of all stages of the cart\n- `cartHeader`: Appears at the top of the initial cart stage\n- `cartFooter`: Appears at the bottom of the initial cart stage\n- `infoHeader`: Appears at the top of the info stage\n- `infoFooter`: Appears at the bottom of the info stage\n- `paymentHeader`: Appears at the top of the payment stage\n- `paymentFooter`: Appears at the bottom of the payment stage\n- `successHeader`: Appears at the top of the success stage\n- `successFooter`: Appears at the bottom of the success stage\n\n## Webooks\n\nThere are two URLs that can be passed as properties to send the cart information to your server:\n\n- `infoWebhook`: Not required. Product and shipping information will be sent to this endpoing once the first section checkout has been completed. Useful for returning tax and shipping methods with this webhook.\n- `orderWebhook`: Required. Product, payment, and shipping information will be sent to this webhook once the order has been completed.\n\n### `infoWebhook`:\n\nExample request:\n\n```json\n{\n \"infoName\": \"John Doe\",\n \"infoEmail\": \"johndoe@gmail.com\",\n \"infoPhone\": \"555-555-1234\",\n \"shippingAddress1\": \"123 Some Street\",\n \"shippingAddress2\": \"Apt. 5F\",\n \"shippingCity\": \"Kansas City\",\n \"shippingState\": \"Missouri\",\n \"shippingZip\": \"64030\",\n \"products\": [\n {\n \"id\": \"TESTID\",\n \"name\": \"Billiard Table\",\n \"image\": \"https://via.placeholder.com/75x75\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit...\",\n \"price\": 29999\n }\n ]\n}\n```\n\nExample response:\n\n```json\n{\n \"success\": true,\n \"modifications\": [\n {\n \"id\": \"january-sale\",\n \"description\": \"January Sale\",\n \"value\": -2000\n },\n {\n \"id\": \"tax\",\n \"description\": \"Sales Tax\",\n \"value\": 899\n },\n ],\n \"shippingMethods\": [\n {\n \"id\": \"ship-0\",\n \"description\": \"Standard Shipping\",\n \"value\": 0\n },\n {\n \"id\": \"ship-1\",\n \"description\": \"Express Shipping\",\n \"value\": 1150\n },\n {\n \"id\": \"ship-2\",\n \"description\": \"Overnight Shipping\",\n \"value\": 4999\n }\n ],\n \"selectedShippingMethod\": \"ship-0\"\n}\n```\n\nExample of the API returning an error and moving back to the \"info\" step:\n\n```json\n{\n \"success\": false,\n \"error\": \"Your shipping address is incorrect.\",\n \"step\": \"info\"\n}\n```\n\n## Event Hooks\n\nIf you need to run client side code when something happens, Zygote comes with a set of event hooks you can use:\n\n```jsx\n console.log(`Cart opened`)}\n onClose={() => console.log(`Cart closed`)}\n onAddProduct={product => console.log(`Added product`, product)}\n onRemoveProduct={product => console.log(`Removed product`, product)}\n onError={err => console.log(`Error caught`, err)}\n onInfoAttempt={info => console.log(`Info attempt`, info)}\n onInfo={info => console.log(`Info submit`, info)}\n onOrderAttempt={order => console.log(`Order attempt`, order)}\n onOrder={order => console.log(`Order submit`, order)}\n/>\n```\n\n## Google Analytics Integration\n\nBy default, Zygote will send cart events to Analytics if Analytics are found on the site. It will also send ecommerce order information. To disable this, set the `googleAnalytics` property to `false`:\n\n```jsx\n\n```\n\n## Google Tag Manager Integration\n\nBy default, Zygote will send cart data and events to Google Tag Manager if GTM is found on the site. The event IDs that will be sent:\n\n- zygoteOpen\n- zygoteClose\n- zygoteAdd\n- zygoteRemove\n- zygoteError\n- zygoteAttemptInfo\n- zygoteInfo\n- zygoteAttemptOrder\n- zygoteOrder\n\nTo disable this, set the `googleTagManager` property to `false`:\n\n```jsx\n\n```\n\n## Optional Shipping\n\nFor items like digital goods or services that don't require shipping, you can pass a `noShip` property. If all the items in the cart have the `noShip` property, then shipping will not be required during checkout.\n\nExample:\n\n```jsx\nimport { addToCart } from '@escaladesports/zygote-cart'\n\n\n```\n\n## Starting Total Modifications\n\nThe webhooks can pass modifications to the total, but if you need some modifications to show immediately once the cart is opened, you can use the `totalModifications` prop in the `` component.\n\n```jsx\n\n```\n\n## Customize Default Error Messages\n\n```jsx\n\n```\n\n\n","readmeFilename":"README.md"}
![\"Gatsby\"](\"https://escaladesports.github.io/zygote-cart/images/logo.png\"){kind=logo}