JSFiddle - React, Tailwind, and code Playground

by Atty Eleti

HTML

<script src="https://js.stripe.com/v3"></script>
<div id='apple-pay'></div>

JavaScript

// Open this page in Safari with a card in your wallet. 
// Make sure the hostname is fiddle.jshell.net.

// 0. Assumption: fiddle.jshell.net is *not* a registered Apple Pay domain.

// 1. We pass in an invalid public key.
const stripe = Stripe("pk_test_6pRNASCoBOKtIshFeQd4XMUh");
const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1000,
  },
});

const elements = stripe.elements();
const prButton = elements.create('paymentRequestButton', {paymentRequest});

paymentRequest.canMakePayment().then(() => {
	// 2. canMakePayment() uses canMakePaymentsWithActiveCard() behind the
  // scenes. Here it is returning true.
  prButton.mount('#apple-pay');
});

// 3. Clicking on the Apple Pay button should fail with a console error
// saying an ApplePaySession could not be created.