2024.1

info

This example requires "@rechargeapps/storefront-client": "1.17.0" or greater.

This example is for "@shopify/hydrogen": "~2024.1.x" and uses the Customer Account API for authenticating your customers.

NPM

npm create @shopify/hydrogen@latest -- --template demo-store

Yarn

yarn create @shopify/hydrogen@latest -- --template demo-store

PNPM

pnpm create @shopify/hydrogen@latest -- --template demo-store

The rest of the documentation assumes your Hydrogen app is already setup and connected to your store. For more information on setting up your developer environment and doing the initial setup with Hydrogen please see their Hydrogen docs and Getting started.

📄️ Setup

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

📄️ Initialization

RechargeSession

📄️ Authentication & Session

To authenticate customers with the Recharge JavaScript SDK we will create a utility that validates the customer's session and logs into Recharge as needed and stores the Recharge Session via the rechargeSession.server module we previously setup.

📄️ Data Fetching

When fetching data via the Recharge JavaScript SDK in Hydrogen we recommend always fetching data within a loader/action.

📄️ Oxygen/Cloudflare Deployments

As mentioned in Initialization, if deploying your Hydrogen app to Oxygen (which is a Cloudflare Worker environment) you will need to update your remix.config.js file with some additional settings. Add the following options to your configuration file: