---
title: Checkout
description: >-
  The `authenticate.public.checkout` function ensures that checkout extension
  requests are coming from Shopify, and returns helpers to respond with the
  correct headers.
api_version: v2
api_name: shopify-app-remix
source_url:
  html: >-
    https://shopify.dev/docs/api/shopify-app-remix/v2/authenticate/public/checkout
  md: >-
    https://shopify.dev/docs/api/shopify-app-remix/v2/authenticate/public/checkout.md
---

# Checkoutobject

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

## authenticate.​public.​checkout([request](#authenticatepubliccheckout-propertydetail-request)​,[options](#authenticatepubliccheckout-propertydetail-options)​)

Authenticates requests coming from Shopify checkout extensions.

### Parameters

* request

  Request

  required

* options

  AuthenticateCheckoutOptions

### Returns

* Promise\<CheckoutContext>

### AuthenticateCheckoutOptions

* corsHeaders

  ```ts
  string[]
  ```

```ts
export interface AuthenticateCheckoutOptions {
  corsHeaders?: string[];
}
```

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

  ```ts
  JwtPayload
  ```

* cors

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

  ```ts
  EnsureCORSFunction
  ```

````ts
export interface CheckoutContext {
  /**
   * 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).
   *
   * @example
   * <caption>Using the decoded session token.</caption>
   * <description>Get store-specific data using the `sessionToken` object.</description>
   * ```ts
   * // app/routes/public/my-route.ts
   * 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}));
   * };
   * ```
   */
  sessionToken: JwtPayload;

  /**
   * A function that ensures the CORS headers are set correctly for the response.
   *
   * @example
   * <caption>Setting CORS headers for a public request.</caption>
   * <description>Use the `cors` helper to ensure your app can respond to checkout extension requests.</description>
   * ```ts
   * // app/routes/public/my-route.ts
   * 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));
   * };
   * ```
   */
  cors: EnsureCORSFunction;
}
````

### JwtPayload

* iss

  The shop's admin domain.

  ```ts
  string
  ```

* dest

  The shop's domain.

  ```ts
  string
  ```

* aud

  The client ID of the receiving app.

  ```ts
  string
  ```

* sub

  The User that the session token is intended for.

  ```ts
  string
  ```

* exp

  When the session token expires.

  ```ts
  number
  ```

* nbf

  When the session token activates.

  ```ts
  number
  ```

* iat

  When the session token was issued.

  ```ts
  number
  ```

* jti

  A secure random UUID.

  ```ts
  string
  ```

* sid

  A unique session ID per user and app.

  ```ts
  string
  ```

```ts
export interface JwtPayload {
  /**
   * The shop's admin domain.
   */
  iss: string;
  /**
   * The shop's domain.
   */
  dest: string;
  /**
   * The client ID of the receiving app.
   */
  aud: string;
  /**
   * The User that the session token is intended for.
   */
  sub: string;
  /**
   * When the session token expires.
   */
  exp: number;
  /**
   * When the session token activates.
   */
  nbf: number;
  /**
   * When the session token was issued.
   */
  iat: number;
  /**
   * A secure random UUID.
   */
  jti: string;
  /**
   * A unique session ID per user and app.
   */
  sid: string;
}
```

### EnsureCORSFunction



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

### Examples

* #### Authenticate and return offers for the shop

  ##### Description

  Authenticate and return offers for the shop

  ##### /app/routes/\*\*.ts

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

  ##### /app/offers.server.ts

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

## Examples

### sessionToken

Using the decoded session token

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

### Examples

* #### Using the decoded session token

  ##### Description

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

  ##### app/routes/public/my-route.ts

  ```typescript
  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

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

### Examples

* #### Setting CORS headers for a public request

  ##### Description

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

  ##### app/routes/public/my-route.ts

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