Payment success message doesn’t make it to from Stripe to React app - reactjs

Question

I have a React app which I am testing on Vercel.
The app was created using create-react-app.
I have a Stripe Account and a Django REST API, hosted on Heroku.
I’m using PaymentRequestButtonElement to generate a dynamic Apple / Google Pay button.
I’m testing Google Pay via chrome with my personal card details saved into the browser.
The price is fetched from my django app, each product is a ‘Card’, within which the payment button appears, with the price of that product passed in.
The payments go through just fine and the payment shows up in my Stripe dashboard as successful.
My /create-payment-intent/ seems functional as the payment goes through and that it generates a client secret when I test it in Postman.
The issue is simply that the React app doesn’t seem to be listening for the payment success or failure, as it doesn’t say so on the browser console or on the UI.
The google pay sheet times out and the following is printed to the console:
DEVELOPER_ERROR in loadPaymentData: An error occurred in call back, please try to avoid this by setting structured error in callback response H # pay.js:149
Here is my React component.
CheckoutForm.js
import React, { useEffect, useState } from 'react';
import {
PaymentRequestButtonElement,
useStripe,
} from '#stripe/react-stripe-js';
import axios from 'axios';
const CheckoutForm = (props) => {
const stripe = useStripe();
const [paymentRequest, setPaymentRequest] = useState(null);
const [paymentSuccess, setPaymentSuccess] = useState(false);
const [errorMessage, setErrorMessage] = useState(null);
const [successMessage, setSuccessMessage] = useState(null);
// const price = props.price;
// const dollar_price = price * 100;
useEffect(() => {
if (stripe) {
const pr = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Purchase',
amount: 100,
},
requestPayerName: true,
requestPayerEmail: true,
applePay: true,
googlePay: true,
});
pr.canMakePayment().then(result => {
if (result) {
setPaymentRequest(pr);
}
});
}
}, [stripe]);
useEffect(() => {
if (paymentRequest) {
paymentRequest.on('paymentmethod', async event => {
const paymentMethod = event.paymentMethod;
try {
const response = await axios.post(
'https://my-api.com/create-payment-intent/',
{
paymentMethodId: paymentMethod.id,
amount: 100,
automatic_payment_methods: {
'enabled': true,
},
currency: 'usd',
}
);
const pi = await stripe.confirmCardPayment(response.data.client_secret, {
payment_method: paymentMethod.id
});
if (pi.status === 'succeeded') {
event.complete();
console.log('Payment succeeded!');
setPaymentSuccess(true);
setErrorMessage(null);
setSuccessMessage("Payment succeeded!");
} else if (pi.status === 'requires_action' || pi.status === 'requires_confirmation') {
event.complete('success');
console.log('Additional steps required!');
setErrorMessage(null);
setSuccessMessage("Additional steps required, please check your email for further instructions.");
// Prompt user to complete additional steps
} else if (pi.status === 'requires_payment_method') {
event.complete('fail');
console.log('Payment method required!');
setErrorMessage("Payment method required. Please add a new payment method.");
// Prompt user to add a new payment method
} else if (pi.status === 'processing') {
event.complete('success');
console.log('Payment is being processed!');
setErrorMessage(null);
setSuccessMessage("Payment is being processed. Please wait.");
// Show a message to the user that the payment is being processed
} else if (pi.status === 'canceled') {
event.complete('fail');
console.log('Payment canceled!');
setErrorMessage("Payment canceled.");
// Show a message to the user that the payment was canceled
} else if (pi.status === 'failed') {
event.complete('fail');
console.log('Payment failed!');
setErrorMessage("Payment failed. Please check your information and try again.");
// Show a message to the user that the payment failed
}
} catch (error) {
event.complete('fail');
console.log('An error occurred:', error);
setErrorMessage("An error occurred. Please try again later.");
// Show an error message to the user
}
});
}
}, [paymentRequest, stripe]);
if (paymentRequest) {
return <>
{paymentSuccess && <p>Payment Successful!</p>}
<PaymentRequestButtonElement options={{ paymentRequest }} />
</>
}
return 'Insert your form or button component here.';
};
export default CheckoutForm;
Here is my index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Elements} from '#stripe/react-stripe-js';
import {loadStripe} from '#stripe/stripe-js';
import CheckoutForm from './CheckoutForm';
// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_live_123');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Elements stripe={stripePromise}>
<CheckoutForm />
</Elements>
</React.StrictMode>
);
reportWebVitals();
And here is my django view
class PaymentIntentView(APIView):
def post(self, request, *args, **kwargs):
amount = request.data.get('amount')
currency = request.data.get('currency')
automatic_payment_methods = request.data.get('automatic_payment_methods')
try:
intent = stripe.PaymentIntent.create(
amount=amount,
currency=currency,
automatic_payment_methods={
'enabled': True,
},
# You can also add other options like capture_method, setup_future_usage, etc.
)
return Response({'client_secret': intent.client_secret, 'id': intent.id})
except Exception as e:
return Response({'error': str(e)})
I feel like I’m missing a step here.
Happy to share more info if necessary.
I'm expecting the console and the UI to produce a success or failure message, but it just times out. The payment appears as successful in my Stripe Dashboard.

Answer 1

Inside the function paymentRequest.on('paymentmethod'... you have the call to your endpoint "https://my-api.com/create-payment-intent/" then a subsequent JS call to const pi = await stripe.confirmCardPayment.
From what you described, it looks like some bits are off around this area. You can put breakpoints on the endpoint call and the confirmCardPayment to see if they really go through. You can also open your browser console to see whether the real ajax call succeeded (instead of testing in Postman).
If they are succeeded, what is the pi.status on your console.log?