> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/pricing-and-payment-component.md).

# Pricing & Payment Component

## Component Visuals

{% tabs %}
{% tab title="Overview" %}

<figure><img src="/files/DoE08wEQO6lE9X9XPFQY" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="/files/aQ4BC4lG8r0bUNDqcsQf" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="/files/f0emZOHYrDZuI4eAhhdM" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="/files/2ngHphCAqnwWVYiIsCj6" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 4" %}

<figure><img src="/files/0p5ZzLM2cEG1yWpsdSaH" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

## Demo

{% embed url="<https://drive.google.com/file/d/1LE_oK4Ggz4bDCCIOSCwI6rwdrSl0qIWD/view?usp=sharing>" %}
How to use Payments component
{% endembed %}

In this video, you'll learn:

> 1. How to set up the `QuestProvider` with your API credentials.
> 2. Configuration of the `Payment`component with required props.
> 3. Customization options for the `Payment`component.
> 4. Integration of the component into your React application.

***

## Installation

To install the `Quest react-sdk` into your project, follow these steps:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```jsx
npm install @questlabs/react-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

***

## Props of Payment Component

The `Payment` component accepts the following props

<table><thead><tr><th width="216">Prop Name</th><th width="95">Type</th><th width="100">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong>stripePublishableKey</strong></td><td>string</td><td>required</td><td>sripe publishable key</td></tr><tr><td><strong>paymentBanefits</strong></td><td>array</td><td>required</td><td>array of plan details</td></tr><tr><td><strong>userId</strong></td><td>string</td><td>required</td><td>The unique identifier of the user.</td></tr><tr><td><strong>questId</strong></td><td>string</td><td>required</td><td>The unique identifier for the tutorial or quest</td></tr><tr><td><strong>token</strong></td><td>string</td><td>required</td><td>An authentication token or API key necessary for accessing tutorial or quest data.</td></tr><tr><td><strong>description</strong></td><td>array</td><td>required</td><td>description of plans</td></tr><tr><td><strong>buttonBgColor</strong></td><td>string</td><td>optional</td><td>The background color of the login button</td></tr><tr><td><strong>inputBgColor</strong></td><td>string</td><td>optional</td><td>The background color of the input boxes</td></tr><tr><td><strong>btnTextColor</strong></td><td>string</td><td>optional</td><td>The text color of the login button.</td></tr><tr><td><strong>fontColor</strong></td><td>string</td><td>optional</td><td>The text color of other UI elements in the component.</td></tr><tr><td><strong>bgColor</strong></td><td>string</td><td>optional</td><td>The background color of the entire component.</td></tr><tr><td><strong>mainLayout</strong></td><td>number</td><td>optional</td><td>defines number of columns of the main layout</td></tr><tr><td><strong>width</strong></td><td>string</td><td>optional</td><td>set the width of the component</td></tr><tr><td><strong>uniqueUserId</strong></td><td>string</td><td>optional</td><td>one uniqueUserId for all the user </td></tr><tr><td><strong>uniqueEmailId</strong></td><td>string</td><td>optional</td><td>one uniqueEmailId for all the user </td></tr><tr><td><strong>forEntityId</strong></td><td>string</td><td>optional</td><td>yout EntityId</td></tr></tbody></table>

***

## Usage

To integrate the `Payment` component into your React application, follow these steps

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `Payment`, import the CSS styles for the component. This ensures that the component's styling is applied correctly.

```jsx
import '@questlabs/react-sdk/dist/style.css'
```

* **Import the Payment Component**: Import the `Payment` component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

```jsx
import { QuestProvider, Payment } from '@questlabs/react-sdk';
```

* **Pass the Required Props**:  Pass the required props to the `QuestProvider`. The required props are `apiKey`, `apiSecret`, and `entityId`. and required props for the `Payment` component are `userId, stripePublishableKey, token, description, paymentBanefits.`

<pre class="language-jsx"><code class="lang-jsx">&#x3C;QuestProvider
  apiKey="your-api-key"
  entityId="your-entity-id"
>
   &#x3C;Payment
     tier={tiers[selectedIndex]}
     desc={desc[selectedIndex]}
     paymentBanefits={paymentBanefits[selectedIndex]}
     bgColor={bgColor}
     fontColor={fontColor}
     buttonBgColor={buttonBgColor}
     btnTextColor={btnTextColor}
     inputBgColor={inputBgColor}
     pymentGatewayLayout={pymentGatewayLayout}
     userId={userId}
     token={token}
     forEntityId={forEntityId}
    />
<strong>&#x3C;/QuestProvider>
</strong></code></pre>

{% hint style="info" %}
Replace `"your-api-key"`, `"your-api-secret"`, and `"your-entity-id"` with your actual Quest API credentials&#x20;
{% endhint %}

{% hint style="info" %}
Replace `"your-token"`,  "`userid", "plan-description"`, `"your-stripe-publishable-key", "paymentBanefits"` with your actual configuration details.
{% endhint %}

***

## Example Usage

Here's an example of how to use the `Payment` component within your React application

```jsx
import { QuestProvider, Payment } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css';

function App() {
  return (
    <div>
      <QuestProvider
        apiKey={"your apiKey"}
        entityId={"your entityId"}
      >
        <Payment
          token={"your token"}
          userId={"your userId"}
          btnTextColor='xxxxx'
          buttonBgColor='xxxxxx'
          inputBgColor='xxxxx'
          fontColor='xxxx'
          bgColor="xxxxx"
          mainLayout={x}
          pymentGatewayLayout={x}
          description={[
            'Basic xxxxxx-xxxxxxost-xxxxx exploration.',
            'Polished xxxxxx xxxxxx xxxxxxx.',
            'Cutting-edge, xxxxxxxxxxa xxxxxxxxxxxx.',
          ]}
          paymentBanefits={xxxxx}
          stripePublishableKey="xxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxx-xxxxxxxxxx"
        />
      </QuestProvider>
    </div>
  );
}

export default App;
```

{% hint style="info" %}
The above example uses all the props.
{% endhint %}

***

***