Skip to main content

Initialization

RechargeSession​

Add a rechargeSession module that can be used to store the Recharge Session in your app. This uses secure cookie storage but can be customized to support other implementations.

/app/lib/rechargeSession.server.js

import { createCookieSessionStorage } from '@shopify/remix-oxygen';

// Recharge session is good for 60 minutes so set to 55 minutes to avoid race conditions
const RECHARGE_SESSION_DURATION = 60 * 55;

/**
 * This is a custom session implementation for your Hydrogen shop.
 * Feel free to customize it to your needs, add helper methods, or
 * swap out the cookie-based implementation with something else!
 */
export class RechargeSession {
  #sessionStorage;
  #session;

  /**
   * @param {SessionStorage} sessionStorage
   * @param {Session} session
   */
  constructor(sessionStorage, session) {
    this.#sessionStorage = sessionStorage;
    this.#session = session;
  }

  /**
   * @static
   * @param {Request} request
   * @param {string[]} secrets
   */
  static async init(request, secrets) {
    const storage = createCookieSessionStorage({
      cookie: {
        name: 'session_recharge',
        httpOnly: true,
        path: '/',
        sameSite: 'lax',
        secrets,
        maxAge: RECHARGE_SESSION_DURATION,
      },
    });

    const session = await storage.getSession(request.headers.get('Cookie')).catch(() => storage.getSession());

    return new this(storage, session);
  }

  get has() {
    return this.#session.has;
  }

  get get() {
    return this.#session.get;
  }

  get flash() {
    return this.#session.flash;
  }

  get unset() {
    return this.#session.unset;
  }

  get set() {
    return this.#session.set;
  }

  destroy() {
    return this.#sessionStorage.destroySession(this.#session);
  }

  commit() {
    return this.#sessionStorage.commitSession(this.#session);
  }
}

/** @typedef {import('@shopify/hydrogen').HydrogenSession} HydrogenSession */
/** @typedef {import('@shopify/remix-oxygen').SessionStorage} SessionStorage */
/** @typedef {import('@shopify/remix-oxygen').Session} Session */

InitRecharge​

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.

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

server.js

import { initRecharge } from '@rechargeapps/storefront-client';
import { RechargeSession } from '~/lib/rechargeSession.server';

// 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',
});
const rechargeSession = await RechargeSession.init(request, [env.SESSION_SECRET]);

// update createRequestHandler
const handleRequest = createRequestHandler({
  build: remixBuild,
  mode: process.env.NODE_ENV,
  getLoadContext: () => ({
    session,
    rechargeSession,
    waitUntil,
    storefront,
    customerAccount,
    cart,
    env,
  }),
});

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,
  },
},