2024.1

info

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

info

Currently there seem to be issues with using Vite & PNPM with Hydrogen and certain packages, which effects our SDK. Issue

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

NPM

npm create @shopify/hydrogen@latest -- --quickstart

Yarn

yarn create @shopify/hydrogen@latest -- --quickstart

PNPM

pnpm create @shopify/hydrogen@latest -- --quickstart

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.