Initialization

We recommend only using the JavaScript SDK from the server context of a Hydrogen app. You can initialize the Recharge SDK from the server.ts file in the root directory of your Hydrogen app so the rest of your app can take advantage of the single initialization.

Example

Import initRecharge and initialize it within a component using the PUBLIC_STORE_DOMAIN & PUBLIC_RECHARGE_STOREFRONT_ACCESS_TOKEN environment variables.

JavaScript

server.js

import { initRecharge } from '@rechargeapps/storefront-client';

// inside the fetch function right before `createStorefrontClient`
/** Initialize Recharge JavaScript SDK */
initRecharge({
  storeIdentifier: env.PUBLIC_STORE_DOMAIN,
  storefrontAccessToken: env.PUBLIC_RECHARGE_STOREFRONT_ACCESS_TOKEN,
  appName: 'appName',
  appVersion: '1.0.0',
});

TypeScript

server.ts

import { initRecharge } from '@rechargeapps/storefront-client';

// inside the fetch function right before `createStorefrontClient`
/** Initialize Recharge JavaScript SDK */
initRecharge({
  storeIdentifier: env.PUBLIC_STORE_DOMAIN,
  storefrontAccessToken: env.PUBLIC_RECHARGE_STOREFRONT_ACCESS_TOKEN,
  appName: 'appName',
  appVersion: '1.0.0',
});

Config changes

The JavaScript SDK uses a couple browser/node dependecies that require special configuration for Oxygen/Cloudflare development & deployment. If you are planning on using these environments add the following configuration to your remix.config.js.

serverNodeBuiltinsPolyfill: {
  modules: {
    util: true,
  },
},