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

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

PreviousBadgesNextSurvey Form

Last updated