Messages 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 Messages element, use the Messages component from the Zonos Elements React library. When the Messages component renders, it will automatically pull in the messages you have set up on your account and display them to the shopper depending on their location.

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

export const YourComponent = () => (
  <div>
    {/* The rest of your component goes here */}
    <Messages />
    {/* The rest of your component goes here */}
  </div>
);