> 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-native-sdk-components/miscellaneous/pricing.md).

# Pricing

## Components Visuals 

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

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

{% tab title="Visual 1" %}

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

{% tab title="Visual 2" %}

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

{% tab title="Visual 3" %}

<figure><img src="/files/VBtnTHHo7vc7egeRRzoo" 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 %}

{% embed url="<https://drive.google.com/file/d/1Bi2c1oROFBWClsBW6KZSaoncgPrPs9US/view?usp=sharing>" %}
App usage demo
{% endembed %}

In this video, you'll learn:

1. How to use the component.

## Installation

To install the `Quest react-native-native-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-native-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 Login Component

The Pricing component accepts the following props

<table><thead><tr><th width="180">Prop Name</th><th width="182">Type</th><th width="128">Required </th><th>Details</th></tr></thead><tbody><tr><td>stripePublishableKey</td><td>string</td><td>yes</td><td>Stripe publishable key of the account for payment</td></tr><tr><td>data</td><td>Tplan[]</td><td>yes</td><td>Array of payment plans</td></tr><tr><td>onPlanSelect</td><td>onPlanSelect</td><td>optional</td><td>Callback function which fires everytime any plan is selected</td></tr><tr><td>createPaymentIntent</td><td>createPaymentIntent</td><td>yes</td><td>Callback which creates paymentIntent by taking the card and paymentMethod data and returns the clientSecret and intentId</td></tr><tr><td>onPaymentSuccess</td><td>onPaymentSuccess</td><td>optional</td><td>Success callback for payment success which gives the paymentIntent info</td></tr></tbody></table>

## Types

```typescript
type onPlanSelect?: (plan: TPlan | undefined) => void

type TPlan = {
  id: number | string,
  plan:string,
  price:number,
  description:string,
  offer:string[],
  recurringTimePeriod: string,
}

interface ICreatePaymentIntentProps {
  card: TCard;
  paymentMethod: PaymentMethod.Result;
}

type createPaymentIntent: ({ card, paymentMethod }):ICreatePaymentIntentProps ) => Promise<{ clientSecret: string; intentId: string }>;

type onPaymentSuccess: (paymentIntent: PaymentIntent) => void;
```

## Usage

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

* **Import the Pricing Component**: Import the Tutorial component from the `@questlabs/react--native-sdk` package.

```jsx
import { Pricing } from "@questlabs/react-native-sdk";
```

## Example Usage

Here's an example of how to use the Banner component within your React Native application.

```typescript
import { Pricing } from "@questlabs/react-native-sdk";
import {
  Alert,
  StyleSheet,
  View,
} from "react-native";
import { TCard } from "@questlabs/react-native-sdk/src/components/Payment/Payment.types";
import {
  PaymentIntent,
  PaymentMethod,
} from "@questlabs/react-native-sdk/src/components/PricingCom/Pricing.types";
import {
  STRIPE_PUBLISHABLE_KEY,
  entiyCreditTier,
  pricingData,
} from "./src/config";

export default function App() {
  const createPaymentIntent = async ({
    card,
    paymentMethod,
  }: {
    card: TCard;
    paymentMethod: PaymentMethod;
  }) => {
    let clientSecret = "";
    let intentId = "";

    // Your logic to create a clientSecret and an intentId

    return {
      clientSecret,
      intentId,
    };
  };

  const onPaymentSuccess = (data: PaymentIntent) => {
    Alert.alert(
      "Success",
      `Payment of amount ${data.amount / 100} ${data.currency} was made`
    );
  };

  return (
    <View style={styles.container}>
      <Pricing
        stripePublishableKey={STRIPE_PUBLISHABLE_KEY}
        data={pricingData}
        createPaymentIntent={createPaymentIntent}
        onPaymentSuccess={onPaymentSuccess}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    paddingTop: 20,
  },
});

```

{% hint style="info" %}
The above example does not use all the props. Feel free to explore them
{% endhint %}