Apple Pay with Stripe.js v2

⚙️ Integration

🧑‍💻 Code

<script src="https://js.stripe.com/v2/"></script>

<p>Note: This integration only works in Safari.</p>

<p><button id="apple-pay-button"></button></p>

<pre id="output"></pre>

#apple-pay-button {
  display: none;
  background-color: black;
  background-image: -webkit-named-image(apple-pay-logo-white);
  background-size: 100% 100%;
  background-origin: content-box;
  background-repeat: no-repeat;
  width: 100%;
  height: 44px;
  padding: 10px 0;
  border-radius: 10px;
}

const outputElement = document.querySelector('#output');

Stripe.setPublishableKey('pk_test_51O2hxMC4JnNRtz8VToJJbGHrFTPPr6TkP09h7ql3YJaqpNcxoSNxtk38glyzi9VrZKStns858YynOO2ZyGmU7VRi00CIUWuUdk');

Stripe.applePay.checkAvailability(function (available) {
  if (available) {
    document.getElementById('apple-pay-button').style.display = 'block';
    document.getElementById('apple-pay-button').addEventListener('click', function () {
      const paymentRequest = {
        countryCode: 'US',
        currencyCode: 'USD',
        total: {
          label: 'Total label',
          amount: '42.00'
        }
      };
      
      const session = Stripe.applePay.buildSession(paymentRequest, function (result, completion) {
        outputElement.textContent = "Success!\n\n" + JSON.stringify(result, null, 2);
        // This is where you would use the result to create a Charge
        completion(ApplePaySession.STATUS_SUCCESS);
      }, function (error) {
        outputElement.textContent = "Failure!\n\n" + JSON.stringify(error, null, 2);
        completion(ApplePaySession.STATUS_FAILURE);
      });
      
      session.oncancel = function (event) {
        outputElement.textContent = "User canceled:\n\n" + JSON.stringify(event, null, 2);
      };
      
      session.begin();
    });
  }
});