I’m encountering a strange problem where my payment sheets for Apple Pay and Google Pay are not receiving the result of a transaction through Stripe. I have alerts to log what is happening in my code, and the transactions are successful immediately as expected, but the payment sheets don’t react to this and end up timing out. Here is the JS for the payment button: (assume my code has my actual publishable stripe key)
function initializePaymentButton(businessId, basePrice) {
const stripe = Stripe('pk_test_XXXXXXXXXXXXXXXXXXXXXXXX');
const elements = stripe.elements();
const paymentRequest = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Total',
amount: Math.round(basePrice * 100),
},
requestPayerName: true,
requestPayerEmail: true,
});
paymentRequest.canMakePayment().then(function(result) {
if (result) {
const paymentButton = elements.create('paymentRequestButton', {
paymentRequest: paymentRequest,
});
paymentButton.mount(`#pay-button-container-${businessId}`);
paymentRequest.on('paymentmethod', async (ev) => {
const createPaymentIntent = httpsCallable(functions, 'createPaymentIntent');
const response = await createPaymentIntent({ businessId });
if (response.data.clientSecret) {
const { error, paymentIntent } = await stripe.confirmCardPayment(response.data.clientSecret, {
payment_method: ev.paymentMethod.id,
});
if (error) {
alert(`Payment failed: ${error.message}`);
} else {
alert(`Payment successful: PaymentIntent ID: ${paymentIntent.id}`);
}
} else {
alert("Failed to create PaymentIntent.");
}
});
} else {
alert('Google/Apple Pay is not available');
}
}).catch((error) => {
alert('Error checking payment availability: ' + error.message);
});
}
Here is an image of the result on iPhone: ‘Payment Not Completed’ after timeout, with succesful purchase alert behind it
I added supportedNetworks:
supportedNetworks: ['visa', 'mastercard', 'amex', 'discover'],
And that didn’t make a difference. I checked the logs for my paymentIntent function on my server and the transaction activity on Stripe, and nothing seems out of the ordinary. I’m guessing I’m missing something fundamental on the client-side, but I just can’t find it. I tested this on android and I get the same result, though it takes Google Pay a lot longer to time out. In both cases, the transactions happen as they should in the background, and technically everything works except for the payment sheets receiving the result.