MacOS Safari not showing Apple Pay payment sheet

App & System Services Apple Pay
skunkworks
skunkworks OP
Created Jul ’16
Replies 35
Boosts 0
Views 13k
Participants

Hi,


I'm running MacOS Sierra Beta 2 with Safari (Version 10.0, 12602.1.38.2), and when we call session.begin(), the payment sheet is not being displayed. There are no exceptions being thrown, the onvalidatemerchant callback is not being called, and no payment sheet is displayed.


Is anyone else having problems with this?

Answered by skunkworks in 155941022

MacOS Sierra Beta 3 has resolved this issue.

Replies  35
Boosts  0
Views  13k
Participants  
skunkworks
skunkworks OP
Jul ’16

To elaborate, this is on a Mac Pro, which should work according to the release notes.

0
jrgailey
jrgailey OP
Jul ’16

I am also having this issue on :

  • MacBook Pro (Retina, 15-inch, Late 2013)
  • macOS Sierra 10.12 Beta (16A239m)
  • Safari Version 10.0 (12602.1.38.2)

Here is the code I am running, this is being initialized on a click event, and I get the same results as skunkworks (the payment sheet is not being displayed).


function foo(event) {
var session, paymentRequest = {
  currencyCode: 'USD',
  countryCode: 'US',
  total: {
  label: 'My Company',
  amount: '10.00'
  },
  supportedNetworks: ['amex', 'discover', 'masterCard', 'visa'],
  merchantCapabilities: ['supports3DS']
};
session = new ApplePaySession(1, paymentRequest);
session.begin();
}


UPDATE *July 15, 2016*:

I ran this code, but on my iphone 6Plus running iOS10 and the payment sheet *DOES* appear.


UPDATE #2:

It looks like it was user error! I wasn't handling the promise correctly, so the button was showing up even though canMakePaymentsWithActiveCard was returning false.

0
ksotello
ksotello OP
Jul ’16

The session.begin call must be tied to a click event. This is why you've been unable to display the pay sheet. I ran into this issue until I realized this.

0
NorfolkMustard
NorfolkMustard OP
Jul ’16

A self-contained test page to get you started:-


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" xml:lang="en-gb"><head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript">
 
 
$( document ).ready( function( )
{
  if (window.ApplePaySession) {
    var merchantIdentifier = 'merchant.com.yourcompanydomain';
    var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
    promise.then(function (canMakePayments) {
   if (canMakePayments) {
      $("#applePay").show();
  console.log('hi, I can do ApplePay');
   } else { 
      $("#applePay").after('<p>ApplePay is possible on this browser, but not currently activated.</p>');
  console.log('ApplePay is possible on this browser, but not currently activated.');
   }
  });
  } else {
  console.log('ApplePay not available on this browser');
  $("#applePay").after('ApplePay not available on this browser');
  }
 
  $("#applePay").click( function(evt) {
 
  var paymentRequest = {
    currencyCode: 'GBP',
    countryCode: 'GB',
    total: {
   label: 'Canine Clothing',
   amount: '19.99'
    },
    supportedNetworks: ['amex', 'discover', 'masterCard', 'visa' ],
    merchantCapabilities: [ 'supports3DS' ],
    requiredShippingAddressFields: [ 'postalAddress' ]
  };
 
  var session = new ApplePaySession(1, paymentRequest);
 
  // Merchant Validation
  session.onvalidatemerchant = function (event) {
  console.log(event);
    var promise = performValidation(event.validationURL);
    promise.then(function (merchantSession) {
  session.completeMerchantValidation(merchantSession);
  console.log('Starting session.completeMerchantValidation');
  });
  }
 
  function performValidation(valURL) {
  return new Promise(function(resolve, reject) {
  //drop into a XMLHttpRequest() to get data via the validation url, pass it back to js
  console.log('starting function performValidation()');
  console.log(valURL);
  resolve;
    });
  }
 
  session.begin();
 
  });
 
 
});
</script>
<style>
#applePay {
width: 280px;
height: 64px;
display: inline-block;
border: 1px solid black;
box-sizing: border-box;
background-image: url(../img/ApplePayBTN_32pt__black_textLogo_@2x.png);
background-size: 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<button type="button" id="applePay" style="display:none"></button>
</body>
</html>
0
jrgailey
jrgailey OP
Jul ’16

Thanks for the reply - though im not entirly sure that is the issue I am having.


When I log out my event (passed in to the function).


Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: function, timeStamp: 1468595684161, jQuery224008344670822080746: true, …}

I had oringinally encountered not tying this propery to the click event, and I recieved a console error stating that the event must be tied to a user-driven event (was that what you were getting?)


What kind of hardware are you using with this?

0
ksotello
ksotello OP
Jul ’16

Just saw your update. Yes, my reply was based upon not having the session.begin call tied to a click event. I'm using a MacBook Pro (Retina, 15-inch, Late 2013) macOS Sierra 10.12 Beta (16A239j). Since you're able to view the paysheet on a mobile device it's weird that you're unable to view a paysheet or at least something indicating that you need to setup a payment in your wallet displaying once you click on the Apple Pay button.


I'm going to guess that the code is being shared between mobile and desktop. I haven't run into this issue and have been able to view the sheet via simulator, iPhone 6, and my MacBook Pro. Sorry I'm not much help.


Is the button being dynamically displayed on the page? Could there be any other event that is bound to that button which could prevent your functionality from running? I would imagine it must be something silly that would prevent this from displaying. I've been able to goto random sites add the sample code provided by Apple, setup a click event for the session.begin call and have been able to display a paysheet.

0
jrgailey
jrgailey OP
Jul ’16

Thanks Ksotello - I was improperly showing the button even though ApplePay was not supported.

0
ksotello
ksotello OP
Jul ’16

Oh yeah np! Glad to hear you got it all worked out. It's funny how it's always the little things that can cause a lot of headaches 😁

0
skunkworks
skunkworks OP
Jul ’16
Accepted Answer

MacOS Sierra Beta 3 has resolved this issue.

0
cmghawk
cmghawk OP
Jul ’16

dang i still can't get this to work on my macbook pro, works jut fine on my ios device.


How are you setup?


Are you logged into the same iCloud account on your macbook and on your iOS device?


Does this have anything to do with bluetooth connections?

0
skunkworks
skunkworks OP
Jul ’16

Where in the flow does it break? The behavior I was seeing was that the session.begin() call would not display the payment sheet, nor would it call the onvalidatemerchant callback.


Are you running MacOS Sierra beta 3? That's ultimately what fixed it for me.


And yes, both the Mac and the iOS device are logged into the same iCloud account.

0
cmghawk
cmghawk OP
Jul ’16

Its kind of bizzare on my macbook pro, the canMakePaymentsWithActiveCard returns false, so the flow doesn't actually begin when runnign on my laptop.


I have 2 cards on my iCloud account (sandbox) on my device and 1 on my desktop.

0
MacOS Safari not showing Apple Pay payment sheet
First post date Last post date
 
 
Q