Integrate with Shopify using React

Looking to learn more about our Platform integration? See the Purple Dot Overview.
React integrations are incompatible with apps that take shoppers through a 3rd party checkout such as TryNow or BlackCart. If your store uses any of these, please hide the alternative Add to Cart buttons if the cart contains a pre-order. This can be detected by the presence of a __releaseId property on a line item.
npm install @purple-dot/purple-dot-react
Include the PurpleDot context in your app and pass it your Purple Dot store's public API key, which you can find at the bottom of the Integration settings page in the Merchant Portal. All other Purple Dot components must be children of the context.
import { PurpleDot } from '@purple-dot/purple-dot-react';
const App = () => {
return (
<PurpleDot apiKey="87d9920c-c9d4-4a17-9b77-cfd71a2d4f1a">
// Your app code
Use the individual Purple Dot elements anywhere in your app. Pass them the currently selected sku.
You can use the usePurpleDot() hook to get access to the underlying SDK.
import React, { useEffect } from 'react';
import { ButtonElement, usePurpleDot } from '@purple-dot/purple-dot-react';
const ProductPage = ({ product, selectedVariant, isPreorder }) => {
const purpleDot = usePurpleDot();
useEffect(() => {
if (purpleDot) {
purpleDot.on('OrderSubmitted', ({ sku }) => {
analytics.track('Purple Dot Order Submitted', { sku });
}, [purpleDot]);
return (
<div class="product-page">
? <button id="add-to-cart">Add to Cart</button>
: <ButtonElement productId={} skuId={} />

4. Checking