CheckoutButton

The CheckoutButton component initiates a Stripe checkout session for users to complete their payment. It displays a customizable button that can optionally include an icon, and shows a loading spinner during the payment process.

Props

Prop	Type	Description
containsIcon	boolean	Controls whether an icon is displayed within the button.
icon	any	An optional icon element to display, used only if containsIcon is true.
content	string	Text to display within the button.
width	string	Width of the button, allowing for inline style customization.
height	string	Height of the button, allowing for inline style customization.

Dependencies

• Stripe.js: Imports loadStripe from @stripe/stripe-js to initialize Stripe and handle redirection to checkout.

• Environment Variables:

  • VITE_STRIPE_PUBLISHABLE_KEY and VITE_TEST_STRIPE_PUBLISHABLE_KEY are used to load the appropriate Stripe key from environment variables.

Usage Example

// Example usage of CheckoutButton with custom size and content
<CheckoutButton
  containsIcon={true}
  icon={<YourIconComponent />}
  content="Get Started"
  width="130px"
  height="40px"
/>

Additional Notes

• handlePayment Function: Initiates the payment process by creating a checkout session on the server. Displays a loading spinner while waiting for a response.

• Error Handling: Logs errors to the console if the checkout session creation or Stripe redirection fails.

• Button State: The button is disabled during loading to prevent multiple submissions.

---

This should cover the details for CheckoutButton.