Docs
Native Modules
PayButton

PayButton Module

Overview

The PayButton module is designed to initiate the checkout process for a selected payment plan. It handles interactions with the payment providers (Stripe or LemonSqueezy), and provides a smooth user experience by redirecting users to the appropriate checkout page.

Location

The source code for the PayButton module can be found in the /modules/native/PayButton.js file.

Usage

The PayButton module is customizable through props, allowing you to tailor its appearance and functionality to your specific needs.

Props

1. payment

  • Required: true
  • Description: Contains the details of a specific payment plan, including the id (Stripe price_id or LemonSqueezy variant_id), the payment mode (Only required for Stripe, but no problem if kept in Lemonsqueezy also.), and an optional couponId for applying discounts.
  • Usage Example: 
    <PayButton payment={settings.PLAN_DETAILS[0].payment} />
  • Additional Note: You must retrieve a specific payment plan from settings.js by using settings.PLAN_DETAILS[x].payment, where x is an array index. Using an object that is not present in any settings.PLAN_DETAILS[x].payment is not allowed, as the Stripe webhook requires the payment object to be validated within the settings file.

2. buttonTitle

  • Default Value: "Choose Plan"
  • Description: Specifies the text displayed on the button.
  • Usage Example: 
    <PayButton buttonTitle="Subscribe Now" />

3. className

  • Default Value: 
    "w-full bg-primary text-primary-foreground font-bold py-2 px-4 rounded-md hover:bg-primary/90 transition duration-300 text-center self-start flex items-center justify-center"
  • Description: A string of CSS classes that define the button's styling. Customize these classes to match your design requirements. This is particularly useful when using PayButton as a CustomButton within other components, such as CTA modules. Here's an example:
  • Usage Example: 
    <TypingCTA
  CustomButton={() => (
    <PayButton
      payment={settings.PLAN_DETAILS[0].payment}
      buttonTitle="Get StartupBolt"
      className="bg-primary text-primary-foreground text-lg font-bold py-3 px-8 rounded-md hover:bg-primary/90 transition duration-300 text-center flex items-center justify-center"
    />
  )}
/>

GTM Event Tracking

The PayButton component includes an optional feature for tracking checkout initiation events using Google Tag Manager (GTM). This can be helpful for monitoring user interactions and conversions in your analytics.

  • Implementation: To enable GTM event tracking for the checkout initiation, simply uncomment the following lines in the handleCheckout function:

    // Google Tag Manager (GTM) event tracking
// Uncomment the lines below if you want to track checkout initiation events in GTM
// window.dataLayer = window.dataLayer || [];
// window.dataLayer.push({ 'event': 'checkout_initiated' });

  • Usage:
    When these lines are uncommented, a checkout_initiated event will be pushed to the GTM dataLayer whenever a user clicks the PayButton to start the checkout process. This allows you to track the event in Google Analytics or other tools connected to GTM.

  • Additional Resources: To learn more about setting up GTM and tracking marketing events, refer to the Google Tag Manager Documentation.

Usage Example

Basic Usage

To use the PayButton component with its default settings, include it in your page as follows:

import PayButton from "@/modules/native/PayButton";
 
const MyPage = () => {
 
  return (
    <PayButton payment={settings.PLAN_DETAILS[0].payment} />
  );
}
 
export default MyPage;

Customizing the Button Title

You can easily customize the button title by passing the buttonTitle prop:

import PayButton from "@/modules/native/PayButton";
 
const MyPage = () => {
 
  return (
    <PayButton payment={settings.PLAN_DETAILS[0].payment} buttonTitle="Subscribe Now" />
  );
}
 
export default MyPage;

Conclusion

The PayButton component is an effective solution for guiding users to the checkout page. It ensures a smooth transition for users ready to complete their purchase.

NavbarPricingTable