How to enable Apple Pay in Stripe

1// apple-pay-checkout.js
2// Complete Apple Pay integration with Stripe Payment Request Button
3
4const stripe = Stripe('pk_test_your_publishable_key');
5
6const paymentRequest = stripe.paymentRequest({
7  country: 'US',
8  currency: 'usd',
9  total: {
10    label: 'Order total',
11    amount: 2000  // $20.00 in cents
12  },
13  requestPayerName: true,
14  requestPayerEmail: true
15});
16
17const elements = stripe.elements();
18const prButton = elements.create('paymentRequestButton', {
19  paymentRequest,
20  style: {
21    paymentRequestButton: {
22      type: 'buy',
23      theme: 'dark',
24      height: '48px'
25    }
26  }
27});
28
29// Mount button only if Apple Pay / Google Pay is available
30paymentRequest.canMakePayment().then(result => {
31  if (result) {
32    prButton.mount('#payment-request-button');
33    if (result.applePay) {
34      console.log('Apple Pay is available');
35    }
36  } else {
37    document.getElementById('payment-request-button').style.display = 'none';
38    console.log('No wallet payment methods available');
39  }
40});
41
42// Handle payment
43paymentRequest.on('paymentmethod', async (event) => {
44  try {
45    const res = await fetch('/api/create-payment-intent', {
46      method: 'POST',
47      headers: { 'Content-Type': 'application/json' },
48      body: JSON.stringify({ amount: 2000 })
49    });
50    const { client_secret } = await res.json();
51
52    const { error, paymentIntent } = await stripe.confirmCardPayment(
53      client_secret,
54      { payment_method: event.paymentMethod.id },
55      { handleActions: false }
56    );
57
58    if (error) {
59      event.complete('fail');
60      return;
61    }
62
63    if (paymentIntent.status === 'requires_action') {
64      const { error: actionError } = await stripe.confirmCardPayment(client_secret);
65      event.complete(actionError ? 'fail' : 'success');
66    } else {
67      event.complete('success');
68    }
69  } catch (err) {
70    event.complete('fail');
71    console.error('Payment failed:', err);
72  }
73});