---
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: v1 latest
api_name: shopify-app-react-router
source_url:
  html: https://shopify.dev/docs/api/shopify-app-react-router/latest/authenticate/public/checkout
  md: https://shopify.dev/docs/api/shopify-app-react-router/latest/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

* cors

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

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

  ```ts
  JwtPayload
  ```

````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 "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}));
   * };
   * ```
   */
  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 "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));
   * };
   * ```
   */
  cors: EnsureCORSFunction;
}
````

### 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 '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

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

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

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

## Related

[![](https://shopify.dev/images/icons/32/shopify.png)![](https://shopify.dev/images/icons/32/shopify-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/session-token)

[Checkout UI extension API for interacting with session tokens.Session token API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/session-token)