Custom Storefronts

Quick start

Create storefront credentials, make your first Auth API and Customer API calls, and run the example storefront

Before you start, find your store name and the base URLs for your region. Refer to What you need.

Create storefront credentials

  1. Open <AUTH_SERVER>/account?tab=custom-storefronts and sign in. You must be an owner or admin of the organisation.
  2. In Custom storefronts, type a storefront name (for example Main website) and select Create credentials.
  3. Copy the Client ID (sf_…) and the Client secret (sfs_…).
  4. Set them as environment variables on your storefront server:
AUTH_CLIENT_ID=sf_xxxxxxxxxxxxxxxxxxxxxxxx
AUTH_CLIENT_SECRET=sfs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

The client secret shows one time only. Keep it on your server. Refer to Storefront credentials to rotate or revoke credentials.

Read your store settings

This call needs no token:

curl "$API_BASE/api/customer/v1/operator" -H "X-Store-Name: your-store-name"

Get a guest token

This call needs the credentials:

curl -X POST "$AUTH_SERVER/customer/anonymous" \
  -u "$AUTH_CLIENT_ID:$AUTH_CLIENT_SECRET" \
  -H "Content-Type: application/json" \
  -d '{ "store": "your-store-name" }'

The response contains an access_token.

Call an endpoint that needs a token

curl -X POST "$API_BASE/api/customer/v1/cart" \
  -H "X-Store-Name: your-store-name" \
  -H "Authorization: Bearer $ACCESS_TOKEN"

Run the example storefront

The storefront starter is a small Next.js application that does the full flow: upload, price, sign-in, checkout, and order tracking.

git clone https://github.com/phas-io/storefront-starter.git
cd storefront-starter
cp .env.example .env.local   # then fill in the values
npm install
npm run dev

The repository also contains an agent skill in skills/phasio-storefront. It gives a coding agent the setup procedure and the API rules. Refer to the README of the repository for the installation.

Next steps

  1. Read the Storefront rules. Your storefront must obey them.
  2. Build sign-in. Refer to Authentication.
  3. Build the order flow. Refer to Purchase flow.

Last updated on

On this page