I'm trying to set up Apple Pay using Stripe on my website.
I'm following the instructions here https://stripe.com/docs/stripe-js/elements/payment-request-button
I've already registered my domain on Stripe, seen here
Then i added test card to my wallet on my macbook, seen here
When i run ngrok on my localhost, ngrok shows me this
ngrok (Ctrl+C to quit)
Hello World! https://ngrok.com/next-generation
Session Status online
Account XXXXXXX (Plan: Pro)
Version 3.0.6
Region United States (us)
Latency 302ms
Web Interface http://127.0.0.1:4040
Forwarding https://XXXXXXXXXX.ngrok.io -> https://blabla.xxxxx.com:443
Connections ttl opn rt1 rt5 p50 p90
91 0 0.01 0.01 5.03 9.41
HTTP Requests
-------------
GET /frontend/web/debug/default/toolbar 200 OK
GET /frontend/web/payment/checkout/ 200 OK
GET /frontend/web/debug/default/toolbar 200 OK
GET /frontend/web/payment/checkout/ 200 OK
GET /frontend/web/debug/default/toolbar 200 OK
GET /frontend/web/payment/checkout/ 200 OK
GET /frontend/web/debug/default/toolbar 200 OK
GET /frontend/web/payment/checkout/ 200 OK
GET /frontend/web/debug/default/toolbar 200 OK
GET /frontend/web/payment/checkout/ 200 OK
When i view my site through the ngrok domain on Safari, i get this error on the safari console
Either you do not have a card saved to your Wallet or the current domain (XXXXXXXX.ngrok.io) is not registered for Apple Pay. Visit https://dashboard.stripe.com/account/apple_pay to register this domain.
I'm using stripe php and stripe.js for my payment. Here is my JS
var publishableKey = document.getElementById('payment-form').getAttribute('data-stripe-publishable-key');
var paymentIntent = document.getElementById('payment-form').getAttribute('data-stripe-paymentIntent');
document.addEventListener('DOMContentLoaded', async () => {
if (!publishableKey) {
document.getElementById('applepay-error').textContent = 'No publishable key returned from the server';
}
// 1. Initialize Stripe
const stripe = Stripe(publishableKey, {
apiVersion: '2020-08-27',
});
// 2. Create a payment request object
var paymentRequest = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Demo total',
amount: 1999,
},
requestPayerName: true,
requestPayerEmail: true,
});
// 3. Create a PaymentRequestButton element
const elements = stripe.elements();
const prButton = elements.create('paymentRequestButton', {
paymentRequest: paymentRequest,
});
// Check the availability of the Payment Request API,
// then mount the PaymentRequestButton
paymentRequest.canMakePayment().then(function (result) {
if (result) {
prButton.mount('#applepay-element');
} else {
document.getElementById('applepay-element').style.display = 'none';
document.getElementById('applepay-error').textContent = 'Apple Pay support not found. Check the pre-requisites above and ensure you are testing in a supported browser.';
}
});
paymentRequest.on('paymentmethod', async (e) => {
// Confirm the PaymentIntent without handling potential next actions (yet).
let {error, paymentIntent} = await stripe.confirmCardPayment(
clientSecret,
{
payment_method: e.paymentMethod.id,
},
{
handleActions: false,
}
);
if (error) {
document.getElementById('applepay-error').textContent = error.message;
// Report to the browser that the payment failed, prompting it to
// re-show the payment interface, or show an error message and close
// the payment interface.
e.complete('fail');
return;
}
// Report to the browser that the confirmation was successful, prompting
// it to close the browser payment method collection interface.
e.complete('success');
// Check if the PaymentIntent requires any actions and if so let Stripe.js
// handle the flow. If using an API version older than "2019-02-11" instead
// instead check for: `paymentIntent.status === "requires_source_action"`.
if (paymentIntent.status === 'requires_action') {
// Let Stripe.js handle the rest of the payment flow.
let {error, paymentIntent} = await stripe.confirmCardPayment(
clientSecret
);
if (error) {
// The payment failed -- ask your customer for a new payment method.
document.getElementById('applepay-error').textContent = error.message;
return;
}
document.getElementById('applepay-error').textContent = 'Payment ${paymentIntent.status}: ${paymentIntent.id}';
}
document.getElementById('applepay-error').textContent = 'Payment ${paymentIntent.status}: ${paymentIntent.id}';
});
});
Any idea how get this to work? Thank you.
There could be multiple reasons you want to double check:
You can double check 1), ask your friend or colleague for help on checking 2). If that doesn't help, write to Stripe Support and they would be able to help checking further on 3).