Zygote3
Zygote 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.
Notes: At the moment Zygote only works with React. However there will be a universal option in the future.
Installation
With npm:
npm install --save @escaladesports/zygote-cart
Or with Yarn:
yarn add @escaladesports/zygote-cart
Usage
import Cart addToCart from '@escaladesports/zygote-cart' <button => Add to Cart!</button> <Cart ='pk_test_12345' ='/api/place-order'/>
Styling
There'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.
Editable style variables:
<Cart =/>
Removing styles:
<Cart = />
Custom Components
Some areas can contain custom components like header and footer areas.
Example:
<Cart = =/>
Custom component properties:
header
: Appears at the top of all stages of the cartfooter
: Appears at the bottom of all stages of the cartcartHeader
: Appears at the top of the initial cart stagecartFooter
: Appears at the bottom of the initial cart stageinfoHeader
: Appears at the top of the info stageinfoFooter
: Appears at the bottom of the info stagepaymentHeader
: Appears at the top of the payment stagepaymentFooter
: Appears at the bottom of the payment stagesuccessHeader
: Appears at the top of the success stagesuccessFooter
: Appears at the bottom of the success stage
Webooks
There are two URLs that can be passed as properties to send the cart information to your server:
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.orderWebhook
: Required. Product, payment, and shipping information will be sent to this webhook once the order has been completed.
infoWebhook
:
Example request:
Example response:
Example of the API returning an error and moving back to the "info" step:
Event Hooks
If you need to run client side code when something happens, Zygote comes with a set of event hooks you can use:
<Cart = = = = = = = = =/>
Google Analytics Integration
By 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
:
<Cart = />
Google Tag Manager Integration
By 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:
- zygoteOpen
- zygoteClose
- zygoteAdd
- zygoteRemove
- zygoteError
- zygoteAttemptInfo
- zygoteInfo
- zygoteAttemptOrder
- zygoteOrder
To disable this, set the googleTagManager
property to false
:
<Cart = />
Optional Shipping
For 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.
Example:
import addToCart from '@escaladesports/zygote-cart' <button =>Add to Cart</button>
Starting Total Modifications
The 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 <Cart />
component.
<Cart =/>
Customize Default Error Messages
<Cart ='There was an error with the server. Your order was not placed. Please try again later.' ='There was an error with the server. Your information was not placed. Please try again later.'/>