While Card Elements are ubiquitous, Stripe offers a powerful suite of other Elements designed to cater to a global audience and diverse payment preferences. These Elements unlock the ability to integrate a wide array of payment methods, from popular local options to popular digital wallets, providing a more tailored and convenient experience for your customers. This section will guide you through implementing these alternative Elements, expanding your payment gateway's reach and flexibility.
Stripe's Payment Method Elements dynamically adapt to the specific payment method selected by the customer. Instead of having a static set of input fields, Stripe presents the appropriate fields based on the chosen method. For instance, if a customer selects "iDEAL," the Element will display fields relevant to that Dutch bank transfer system. This dynamic behavior simplifies integration and enhances the user experience by only showing necessary information.
The core principle behind integrating these other Elements remains the same as with Card Elements: leveraging the useStripe hook from @stripe/stripe-react to access the Stripe instance and then using the PaymentElement component or specific method Elements. The PaymentElement is a versatile choice as it can automatically display a list of available payment methods, including cards and other alternative methods, based on your Stripe account's configuration and the customer's location.
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import CheckoutForm from './CheckoutForm';
const stripePromise = loadStripe('YOUR_STRIPE_PUBLISHABLE_KEY');
function App() {
return (
<Elements stripe={stripePromise}>
<CheckoutForm />
</Elements>
);
}
export default App;Within your CheckoutForm component, you'll primarily use the PaymentElement. This component intelligently renders the correct UI based on the payment method. You can further customize its appearance and behavior using the options prop.
import React, { useState, useEffect } from 'react';
import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [email, setEmail] = useState('');
const [message, setMessage] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (!stripe) {
return;
}
const clientSecret = new URLSearchParams(window.location.search).get(
'payment_intent_client_secret'
);
if (!clientSecret) {
return;
}
stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
switch (paymentIntent.status) {
case 'succeeded':
setMessage('Payment succeeded!');
break;
case 'processing':
setMessage('Your payment is processing.');
break;
case 'requires_payment_method':
setMessage('Your payment failed. Please try another payment method.');
break;
default:
setMessage('Something went wrong.');
break;
}
});
}, [stripe]);
const handleSubmit = async (e) => {
e.preventDefault();
if (!stripe || !elements) {
return;
}
setIsLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: `${window.location.origin}/completion`,
},
});
if (error || (error.type === 'card_error' || error.type === 'validation_error')) {
setMessage(error.message);
} else {
setMessage('An unexpected error occurred');
}
setIsLoading(false);
};
return (
<form id="payment-form" onSubmit={handleSubmit}>
<PaymentElement />
<button disabled={isLoading || !stripe || !elements} id="submit">
<span id="button-text">
{isLoading ? <div className="spinner" id="spinner"></div> : 'Pay now'}
</span>
</button>
{message &&To enable alternative payment methods, you need to ensure they are activated in your Stripe dashboard. Once activated, Stripe's PaymentElement will automatically detect and offer these methods to customers based on their billing country. The confirmPayment function then handles the complexities of each payment method's authentication flow.
graph TD
A[Customer Selects Payment Method] --> B{Stripe Detects Method}
B -- Card --> C[Render Card Element UI]
B -- iDEAL --> D[Render iDEAL UI]
B -- SEPA Debit --> E[Render SEPA Debit UI]
B -- Other --> F[Render Specific Method UI]
C --> G{Stripe Processes Payment}
D --> G
E --> G
F --> G
G -- Success --> H[Payment Confirmed]
G -- Failure --> I[Payment Failed]
For specific use cases where you need absolute control over the UI for a particular payment method, or when PaymentElement doesn't offer the exact desired experience, you can use individual Payment Method Elements. For example, you might use IdealBankElement or AuBankAccountElement. These are less common for general-purpose checkout but can be valuable for highly specialized integrations.
Remember to handle the return_url correctly in your confirmPayment call. After a successful payment (or requiring further action), Stripe will redirect the customer back to this URL. On this page, you'll typically retrieve the payment intent status using stripe.retrievePaymentIntent to display a success or failure message.