💳 Using Payments

Our app integrates Stripe payments using the EmbeddedCheckoutButton component. This component allows users to securely process payments directly within the app.

Let's explore how to implement and use the EmbeddedCheckoutButton for handling payments.

Example Usage of EmbeddedCheckoutButton
1 import EmbeddedCheckoutButton from '@/app/billing/EmbeddedCheckoutButton';
2 
3 const ProductPage = () => {
4   return (
5     <div>
6       <h1>Buy Our Product</h1>
7       <EmbeddedCheckoutButton priceId='price_1Hhj0.......' />
8     </div>
9   );
10 };

Configuring Stripe

Ensure that you have set up your Stripe keys correctly in your environment variables. The NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY is used within the EmbeddedCheckoutButton.

  • Environment Setup: Add your Stripe publishable key to your .env file.
    Environment Variable Setup
    1 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key_here
That's it! You can now accept payments in your app with Stripe. 🚀