Skip to main content

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 install @rechargeapps/storefront-client

Config changes​

Hydrogen may automatically add these for you when you run npm run dev the first time. However if you get a ReferenceError: require is not defined and your vite.config.js file doesn't have these entries you may need to add them manually.

  ssr: {
    optimizeDeps: {
      include: [
        'lodash.partial',
        'lodash.omit',
        'js-xdr',
        'qs/lib/stringify',
        'isomorphic-fetch',
      ],
    },
  },

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 env.d.ts.

interface Env extends HydrogenEnv {
  // declare additional Env parameter use in the fetch handler and Remix loader context here
  PUBLIC_RECHARGE_STOREFRONT_ACCESS_TOKEN: string;
}