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 &&