Pricing

Our Pricing Component is the ultimate solution for effortlessly browsing and purchasing your desired plan. It showcases a list of available plans and simplifies the payment process, letting you quick.

Components Visuals

Overview

Visual 1

Visual 2

Visual 3

To unlock early access to the component Get Access

App usage demo

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:

npm install @questlabs/react-native-sdk

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

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

---

Props of Login Component

The Pricing component accepts the following props

Prop Name	Type	Required	Details
stripePublishableKey	string	yes	Stripe publishable key of the account for payment
data	Tplan[]	yes	Array of payment plans
onPlanSelect	onPlanSelect	optional	Callback function which fires everytime any plan is selected
createPaymentIntent	createPaymentIntent	yes	Callback which creates paymentIntent by taking the card and paymentMethod data and returns the clientSecret and intentId
onPaymentSuccess	onPaymentSuccess	optional	Success callback for payment success which gives the paymentIntent info

Types

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.

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.

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,
  },
});

The above example does not use all the props. Feel free to explore them