Shipping methods 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 a Shipping Methods element, use the ShippingMethods component from the Zonos Elements React library. You will need to pass in an array of items, which will be used in the calculation and display of the landed cost. If you're using multiple Elements together, it's up to you how you want to handle keeping the items in sync between the different Elements.

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

export const YourComponent = () => (
  <div>
    {/* The rest of your component goes here */}
    <ShippingMethods
      items={[
        {
          id: '123',
          name: 'Test Product',
          price: 100,
          currencyCode: 'USD',
          quantity: 1,
          imageUrl: 'https://example.com/image.jpg',
          url: 'https://example.com/product',
        },
      ]}
    />
    {/* The rest of your component goes here */}
  </div>
);