Totals 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 Totals element, use the Totals component from the Zonos Elements React library. You will need to pass in a LandedCost object from the Zonos API, which will be automatically formatted and displayed as an itemized breakdown, complete with localized currency.

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

export const YourComponent = () => (
  <div>
    {/* The rest of your component goes here */}
    <Totals
      landedCost={/* Reference to your landed cost object here */}
    />
    {/* The rest of your component goes here */}
  </div>
);