> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Pricing Plans Quick Start

## Article: Pricing Plans Quick Start

## Article Link: https://dev.wix.com/docs/go-headless/get-started/tutorials/self-managed-headless/java-script-sdk-tutorials/pricing-plans-quick-start.md

## Article Content:

# Pricing Plans Quick Start

The SDK `pricing-plans` module allows you to take advantage of Wix Pricing Plans business services in a site or app you build on any platform. This means you can create and manage your pricing plans and orders. This tutorial shows you how to create a seamless pricing plans checkout.

> **Note:** If you're using the [Wix CLI](https://dev.wix.com/docs/go-headless/develop-your-project/wix-managed-headless/about-the-wix-cli-for-headless.md), you don't need to handle OAuth setup or create a client because it's done automatically. 

The tutorial is based on this [example site](https://wix-headless-example.vercel.app/subscriptions). To get the code, fork the [Headless Templates repo](https://github.com/wix/headless-templates). The site code is under [minimal examples](https://github.com/wix/headless-templates/tree/main/nextjs/minimal-examples).

This implementation focuses on simplicity and understandability, rather than feature richness, performance or completeness. For details about additional functionality, see [Wix Pricing Plans](https://dev.wix.com/docs/api-reference/business-solutions/pricing-plans/introduction.md) in the API Reference. Looking for a more comprehensive example site integrating Wix Headless APIs for pricing plan management? Check out our [starter templates](https://dev.wix.com/docs/go-headless/get-started/templates/self-managed-templates/next-js-templates.md).

> **Note:** The code in this tutorial is written in [JSX](https://react.dev/learn/writing-markup-with-jsx), but you can use the SDK in any JavaScript environment.

Implementing the Seamless Pricing Plan Checkout includes the following steps:

1. Set up the Wix Headless environment.
1. Import the SDK modules and create an SDK client.
1. Query your Wix Pricing Plans items.
1. Map the items to your UI.
1. Create a checkout with a selected plan's details.

## Step 1: Set up the Wix Headless environment

Before using the SDK, there are a few things you need to set up on your Wix account and in your external site or app's coding environment.

To set up the Wix Headless environment, follow these steps:

1. If you haven't already, [create a project](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/create-a-project.md).
   When prompted to add functionalities to your new project, select **Pricing Plans**.
1. Set up authorization for your site by [creating and configuring](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/about-authentication.md) an OAuth app.
1. Set a [domain to be used by Wix-managed pages](https://dev.wix.com/docs/go-headless/develop-your-project/business-flows/set-a-wix-pages-domain.md).
1. Set a [domain that Wix can redirect to](https://dev.wix.com/docs/go-headless/develop-your-project/business-flows/add-allowed-redirect-domains.md) after completing a Wix-managed process.
1. Install the API client and relevant SDK module packages by running the following commands:
   For NPM:
   ```
   npm install @wix/sdk
   npm install @wix/pricing-plans
   npm install @wix/redirects
   ```
   For Yarn:
   ```
   yarn add @wix/sdk
   yarn add @wix/pricing-plans
   yarn add @wix/redirects
   ```
1. Install the `react` package to handle UI rendering and the `js-cookie` package to handle session cookies. Run the following commands:
   For NPM:
   ```
   npm install react
   npm install js-cookie
   ```
   For Yarn:
   ```
   yarn add react
   yarn add js-cookie
   ```

## Step 2: Import the SDK modules and create an SDK client

The next step is to set up your code file to run the SDK functions. To set up the code file, follow these steps:

1. Add the following import statements to the top of your code file:
   ```javascript
   import Cookies from 'js-cookie';
   import { useEffect, useState } from 'react';
   import { createClient, OAuthStrategy } from '@wix/sdk';
   import { plans } from '@wix/pricing-plans';
   import { redirects } from '@wix/redirects';
   ```
1. Create an SDK client by adding the following code to your code file. Replace the value for `clientId` with your OAuth app's client ID. You can find the ID in your project's [**Headless Settings**](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings).
   The value for `tokens` is the `'session'` cookie on the site visitor's browser. It's used to make calls to the Wix API. This way, you can maintain previous visitor sessions. For information about managing session cookies, see [Session Token Management](https://dev.wix.com/docs/go-headless/get-started/tutorials/self-managed-headless/java-script-sdk-tutorials/quick-start.md).
   ```js
   const myWixClient = createClient({
    modules: { plans, redirects },
    auth: OAuthStrategy({
        clientId: `<YOUR-CLIENT-ID>` ,
        tokens: JSON.parse(
            Cookies.get("session") || '{"accessToken": {}, "refreshToken": {}}',
        ),
      })
    });
   ```

## Step 3: Create a React component and state variables

The logic for our pricing plans flow is contained in a React component called `Subscriptions`. To create the component, follow these steps:

1. Add the following function component to your code file:

```js
export default function Subscriptions() {
```

2. Define the state variable for the component by adding the following code to the `Subscriptions` component.
   The `planList` variable stores the list of pricing plans from your Wix Pricing Plans.

```jsx
const [planList, setPlanList] = useState([]);
```

## Step 4: Fetch your Wix Pricing Plans items

Define a function to fetch your pricing plans by adding the following code to the `Subscriptions` component. This function runs when the component is first rendered. The function uses the [`queryPublicPlans()`](https://dev.wix.com/docs/api-reference/business-solutions/pricing-plans/plans-deprecated/query-public-plans.md) function from the SDK's Plans module to query your pricing plans.

```js
async function fetchPlans() {
  const planList = await myWixClient.plans.queryPublicPlans({});
  setPlanList(planList.items);
}
```

Add the following code to the `Subscriptions` component to run the `fetchPlans()` function after the component is rendered. This ensures that the data is retrieved when the component mounts.

```jsx
useEffect(() => {
  fetchPlans();
}, []);
```

## Step 5: Map the items to your UI

Create a list in your UI, and map each plan to a list item. Add an `onClick()` event handler to each plan. When a visitor clicks a plan, call the `createRedirect()` function that redirects a visitor to a checkout page with the selected plan's details.

```jsx
return (
  <div>
    <h2>Choose Plan:</h2>
    {planList.map((plan) => {
      return (
        <div key={plan._id} onClick={() => createRedirect(plan)}>
          {plan.name}
        </div>
      );
    })}
  </div>
);
```

## Step 6: Create a checkout with a selected plan's details

In the `createRedirect()` function, call the [`createRedirectSession()`](https://dev.wix.com/docs/api-reference/business-management/headless/redirects/create-redirect-session.md) function with the selected plan to get a checkout URL. Use this URL to temporarily redirect the visitor to a Wix checkout page. After checkout, the visitor is redirected to the URL defined in the `postFlowUrl` callback property.

**Note:** When redirecting from Wix to an external site, Wix validates that the provided URL is registered under an allowed domain for the given client ID. Therefore, you must [add your domain to the OAuth app](https://dev.wix.com/docs/go-headless/develop-your-project/business-flows/add-allowed-redirect-domains.md).

```jsx
async function createRedirect(plan) {
  const redirect = await myWixClient.redirects.createRedirectSession({
    paidPlansCheckout: { planId: plan._id },
    callbacks: { postFlowUrl: window.location.href },
  });
  window.location = redirect.redirectSession.fullUrl;
}
```

## Complete code example

You can use the following full code example as a starting point for developing your own site:

```jsx
import Cookies from 'js-cookie';
import { useEffect, useState } from 'react';
import styles from '@/styles/pages.module.css';

import { createClient, OAuthStrategy } from '@wix/sdk';
import { plans } from '@wix/pricing-plans';
import { redirects } from '@wix/redirects';

const myWixClient = createClient({
  modules: { plans, redirects },
  auth: OAuthStrategy({
    clientId: `<YOUR-CLIENT-ID>` ,
    tokens: JSON.parse(
        Cookies.get("session") || '{"accessToken": {}, "refreshToken": {}}',
    ),
  })
});

export default function Subscriptions() {
  const [planList, setPlanList] = useState([]);

  async function fetchPlans() {
    const planList = await myWixClient.plans.queryPublicPlans({});
    setPlanList(planList.items);
  }

  async function createRedirect(plan) {
    const redirect = await myWixClient.redirects.createRedirectSession({
      paidPlansCheckout: { planId: plan._id },
      callbacks: { postFlowUrl: window.location.href },
    });
    window.location = redirect.redirectSession.fullUrl;
  }

  useEffect(() => {
    fetchPlans();
  }, []);

  return (
    <div className={styles.grid}>
      <div>
        <h2>Choose Plan:</h2>
        {planList.map((plan) => {
          return (
            <div
              className={styles.card}
              key={plan._id}
              onClick={() => createRedirect(plan)}
            >
              {plan.name}
            </div>
          );
        })}
      </div>
    </div>
  );
}
```