phpstripe-paymentslaravel-5.8applepayapplepayjs

Apple Pay Stripe Integrations


This is the code of JavaScript I have used to developed Apple Payment Request button with Stripe where I have placed a related code in the above and I also have added related stripe v3 library and added a div with payment-request-button id in html

var stripe = Stripe('pk_test_ZjbcGwDeoJsycvIs7KGEFkVR00qOzHxlrX');
    elements = stripe.elements();

    // Config payment request
    paymentRequest = stripe.paymentRequest({
     country: 'US',
     currency: 'usd',
     total: {
      label: 'Demo total',
      amount: 100,
     },
    });
    paymentRequest.on('source', function(event) {
     console.log('Got source: ', event.source.id);
     event.complete('success');
     ChromeSamples.log(JSON.stringify(event.source, 2));
     // Send the source to your server to charge it!
    });
    prButton = elements.create('paymentRequestButton', {
     paymentRequest,
    });
    // Check the availability of the Payment Request API first.
    paymentRequest.canMakePayment().then((result) => {
     //console.log(prButton);
     if (result) {
      prButton.mount('#payment-request-button');
     } else {
      document.getElementById('payment-request-button').style.display = 'none';
      ChromeSamples.setStatus("Not supported, please check: https://stripe.com/docs/elements/payment-request-button#testing");
     }
    });

    // Helpers
    var ChromeSamples = {
     log: function() {
      var line = Array.prototype.slice.call(arguments).map(function(argument) {
       return typeof argument === 'string' ? argument : JSON.stringify(argument);
      }).join(' ');

      document.querySelector('#log').textContent += line + '\n';
     },

     clearLog: function() {
      document.querySelector('#log').textContent = '';
     },

     setStatus: function(status) {
      document.querySelector('#status').textContent = status;
     },

     setContent: function(newContent) {
      var content = document.querySelector('#content');
      while (content.hasChildNodes()) {
       content.removeChild(content.lastChild);
      }
      content.appendChild(newContent);
     }
    };


Solution

  • I am testing it in Chrome 80+ Version in Window 10 OS

    Per Apple's "Apple Pay is compatible with these devices" page, Apple Pay is only available on Mac, iPhone, iPad, and Apple Watch devices, and only in Safari.

    The Stripe docs you linked also say:

    Apple Pay with the Payment Request Button requires macOS 10.12.1+ or iOS 10.1+.

    You will need an Apple device to test your Apple Pay integration.