Choose a version:

Checkout

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

Anchor to authenticate.public.checkout
authenticate.public.checkout(
request
,
options
)

Authenticates requests coming from Shopify checkout extensions.

Anchor to authenticate.public.checkout-parametersParameters

Anchor to request request Request required
Anchor to options options

Anchor to authenticate.public.checkout-returnsReturns

Promise<>

AuthenticateCheckoutOptions

corsHeaders
```
string[]
```

CheckoutContext

Authenticated Context for a checkout request

cors
A function that ensures the CORS headers are set correctly for the response.
```
EnsureCORSFunction
```
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).
```
JwtPayload
```

EnsureCORSFunction

Examples

import type {ActionFunctionArgs, LoaderFunctionArgs} from 'react-router';

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({offers});

};

Examples

Authenticate and return offers for the shop

Description

Authenticate and return offers for the shop

/app/routes/**.ts

import type {ActionFunctionArgs, LoaderFunctionArgs} from 'react-router';

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({offers});
};

/app/offers.server.ts

// 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];
}

Description

Use the `cors` helper to ensure your app can respond to checkout extension requests.

app/routes/public/my-route.ts

import { LoaderFunctionArgs, json } from "react-router";
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(data));
};

Description

Get store-specific data using the `sessionToken` object.

app/routes/public/my-route.ts

import { LoaderFunctionArgs, json } from "react-router";
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 (await getMyAppData({shop: sessionToken.dest}));
};