Setup

There are a few configuration things to setup when using the Recharge JavaScript SDK with Hydrogen. This page with guide you through them.

Dependencies

Add @rechargeapps/storefront-client to your project:

NPM

npm install @rechargeapps/storefront-client

Yarn

yarn add @rechargeapps/storefront-client

PNPM

pnpm add @rechargeapps/storefront-client

Environment variables

Add your Recharge Storefront Access Token as an environment variable to your .env file.

PUBLIC_RECHARGE_STOREFRONT_ACCESS_TOKEN=strfnt_...

If using TypeScript add PUBLIC_RECHARGE_STOREFRONT_ACCESS_TOKEN to the Env interface as a string in remix.env.d.ts.

interface Env {
  SESSION_SECRET: string;
  PUBLIC_STOREFRONT_API_TOKEN: string;
  PRIVATE_STOREFRONT_API_TOKEN: string;
  PUBLIC_STORE_DOMAIN: string;
  PUBLIC_STOREFRONT_ID: string;
  PUBLIC_RECHARGE_STOREFRONT_ACCESS_TOKEN: string;
}