Items element

First, install the Zonos Elements package in your React project. This will automatically add the Zonos SDK as a peer dependency, and includes TypeScript typings out of the box for a better developer experience.

npm install --save @zonos/zonos-elements-react

Once the Zonos Elements package is installed, you can configure the Zonos SDK in your React project. You need to have a Zonos account and API key to use Elements on your site.

The Elements React library exposes a ZonosProvider component that you can use to configure the Zonos SDK. You can wrap your entire application in the ZonosProvider component, or you can wrap only the components that use the Zonos SDK. We recommend storing your Zonos API key in an environment variable and passing it to the ZonosProvider component as a prop for security reasons.

import { ZonosProvider } from '@zonos/zonos-elements-react';

export const App = () => (
  <ZonosProvider config={{ apiKey: process.env.REACT_APP_ZONOS_API_KEY }}>
    {/* The rest of app goes here */}
  </ZonosProvider>
);

To create an Items element, import the Items component from the Zonos Elements React library and pass in the items you want to display in the cart. The Items component will automatically display the localized shopping cart on your site where you place the component.

import { Items } from '@zonos/zonos-elements-react';

export const Cart = () => (
  <Items
    items={[
      {
        id: '123',
        name: 'Test Product',
        price: 100,
        currencyCode: 'USD',
        quantity: 1,
        imageUrl: 'https://example.com/image.jpg',
        url: 'https://example.com/product',
      },
    ]}
  />
);