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

cors

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

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).

EnsureCORSFunction

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

Related

  • Session token API

Examples

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

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));
};

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}));
};