Integrating Stripe Payments into React: A Frontend Implementation Guide

The Inmotech Frontend project recently implemented a new feature to enable seamless online payments using Stripe. This enhancement allows users to subscribe to premium plans directly within the application, offering a smooth and secure checkout experience. This post details the frontend integration steps, from setting up the necessary libraries to creating the user flow for successful and canceled payments.

Setting up the Environment

To begin, the @stripe/stripe-js and @stripe/react-stripe-js libraries were installed. @stripe/stripe-js provides the core Stripe.js library functionality, while @stripe/react-stripe-js offers React components and hooks to easily integrate Stripe elements into a React application.

npm install @stripe/stripe-js @stripe/react-stripe-js
# or
yarn add @stripe/stripe-js @stripe/react-stripe-js

Once installed, the main App.jsx file was updated to wrap the relevant parts of the application with the Elements provider, which makes Stripe.js available to nested components. A publishable key is loaded using loadStripe() and passed to the Elements provider.

// App.jsx
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import PlansPage from './components/PlansPage'; // Contains the payment button

const stripePromise = loadStripe('pk_test_YOUR_PUBLISHABLE_KEY');

function App() {
  return (
    <Elements stripe={stripePromise}>
      <PlansPage />
    </Elements>
  );
}

export default App;

Building the Stripe Checkout Component

A dedicated StripeCheckoutButton component was created to encapsulate the payment initiation logic. This component leverages the useStripe and useElements hooks from @stripe/react-stripe-js to interact with the Stripe API and collect payment details.

// StripeCheckoutButton.jsx (Simplified for illustration)
import React from 'react';
import { useStripe, useElements } from '@stripe/react-stripe-js';

const StripeCheckoutButton = ({ planId, amount, onPaymentComplete }) => {
  const stripe = useStripe();
  const elements = useElements();

  const handleCheckout = async () => {
    if (!stripe || !elements) {
      console.warn('Stripe.js not loaded yet.');
      return;
    }

    // In a real scenario, you'd make a backend call to create a Payment Intent
    // and then confirm the payment on the frontend.
    console.log(`Initiating payment for Plan ${planId} - $${amount}`);
    const result = { status: 'succeeded' }; // Simulate API response

    if (result.status === 'succeeded') {
      onPaymentComplete('success');
    } else {
      onPaymentComplete('cancel');
    }
  };

  return (
    <button onClick={handleCheckout} disabled={!stripe}>
      Subscribe to Premium
    </button>
  );
};

export default StripeCheckoutButton;

This StripeCheckoutButton was then integrated into the Planes.jsx page, specifically for the premium plan offering, replacing a static button with the Stripe-powered version.

Handling Payment Outcomes: Success and Cancellation Pages

To provide clear feedback to users, two new pages were created:

• /suscripcion-exito: Displayed upon successful payment, typically featuring a CheckCircle icon.
• /suscripcion-cancelada: Displayed if the payment process is canceled or fails, often with an XCircle icon.

These pages offer immediate visual confirmation of the transaction's status and guide the user on their next steps. New routes for these pages were added to App.jsx to ensure proper navigation within the application.

Actionable Takeaway

When integrating third-party payment solutions like Stripe, always prioritize a clear user flow for both success and failure states. Design intuitive feedback mechanisms and ensure your backend handles the actual payment intent creation and confirmation securely to prevent client-side tampering.

Generated with Gitvlg.com