Checkout

The `authenticate.public.checkout` function ensures that checkout extension requests are coming from Shopify, and returns helpers to respond with the correct headers.

Authenticate and return offers for the shop

import type {ActionFunctionArgs, LoaderFunctionArgs} from '@remix-run/node';
import {json} from '@remix-run/node';

import {authenticate} from '../shopify.server';
import {getOffers} from '../offers.server';

// The loader responds to preflight requests from Shopify
export const loader = async ({request}: LoaderFunctionArgs) => {
  await authenticate.public.checkout(request);
};

export const action = async ({request}: ActionFunctionArgs) => {
  const {cors, sessionToken} = await authenticate.public.checkout(request);

  const offers = getOffers(sessionToken.dest);
  return cors(json({offers}));
};

// Most apps would load this from their database
export function getOffers(shop: string) {
  const offers: Record<any, any[]> = {
    'shop.com': [
      {
        id: '1',
        title: '10% off',
        price: 10,
        type: 'percentage',
      },
      {
        id: '2',
        title: 'Free shipping',
        price: 0,
        type: 'shipping',
      },
    ],
  };

  return offers[shop];
}

authenticate.public.checkout

Authenticates requests coming from Shopify checkout extensions.

AuthenticateCheckout

Returns: Promise<CheckoutContext>

Params:

request: Request

options: AuthenticateCheckoutOptions

export type AuthenticateCheckout = ( request: Request, options?: AuthenticateCheckoutOptions, ) => Promise<CheckoutContext>;

AuthenticateCheckoutOptions

corsHeaders

CheckoutContext

Authenticated Context for a checkout request

sessionToken

The decoded and validated session token for the request Refer to the OAuth docs for the [session token payload](https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload).

cors

A function that ensures the CORS headers are set correctly for the response.

JwtPayload

iss

The shop's admin domain.

dest

The shop's domain.

aud

The client ID of the receiving app.

sub

The User that the session token is intended for.

exp

When the session token expires.

nbf

When the session token activates.

iat

When the session token was issued.

jti

A secure random UUID.

sid

A unique session ID per user and app.

EnsureCORSFunction

export interface EnsureCORSFunction { (response: Response): Response; }

Examples

The `authenticate.public.checkout` function ensures that checkout extension requests are coming from Shopify, and returns helpers to respond with the correct headers.

sessionToken

Using the decoded session token

import { LoaderFunctionArgs, json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { getMyAppData } from "~/db/model.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { sessionToken } = await authenticate.public.checkout(
    request
  );
  return json(await getMyAppData({shop: sessionToken.dest}));
};

cors

Setting CORS headers for a public request

import { LoaderFunctionArgs, json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { getMyAppData } from "~/db/model.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { sessionToken, cors } = await authenticate.public.checkout(
    request,
    { corsHeaders: ["X-My-Custom-Header"] }
  );
  const data = await getMyAppData({shop: sessionToken.dest});
  return cors(json(data));
};