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?
To elaborate, this is on a Mac Pro, which should work according to the release notes.
I am also having this issue on :
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.
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.
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>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?
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.
Thanks Ksotello - I was improperly showing the button even though ApplePay was not supported.
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 😁
MacOS Sierra Beta 3 has resolved this issue.
Hi Team,
Yesterday i am able to open applepay sheet in my MAC with sandbox accont , as i didn't change anything today ,but applepay sheet is not
comming .any idea ?as i am not seing any errors
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?
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.
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.
If i want to do address verification from merchantside(our-side),where we have to do why because applepay is not handling addres verification?
Where is the place holder to do ?Please share if you have any sample code.
Please let know if any one used session.onshippingcontactselected. to get shipping address back to merchant side.
Please share sample code how to get shipping address ?????
session.onshippingcontactselected = function(event)
This will get you as far as seeing the format/content of the json returned in the "event" object. From there you can start using it
session.onshippingcontactselected = function(event) {
console.log('starting session.onshippingcontactselected');
console.log(event);
}From the above, I'm getting partial address values returned in a event.shippingContact object, but I stress *partial*. It's currently missing the name (familyName, givenName), street address and truncating the postalCode to the first 4 chars only.
NB though, that when I include
requiredShippingContactFields: ['postalAddress']in the paymentrequest it's currently (iOS10b4 and iOS10b3) causing the payment sheet to no longer show "Pay with touch id". instead it's hanging on the preceeding "Processing" stage
If i want to add shipping methods to apple pay sheet please send any sample code .
I am trying like below ,but throwing error like
[Error] TypeMismatchError (DOM Exception 17): The type of an object was incompatible with the expected type of the parameter associated to the object.
shippingMethods:{
label :'123'
}
They've not written that bit yet 🙂
Thanks NorfolkMustard.
i am trying to add line items like subtotal,discount tax fileds in payment sheet.
If you have any sample code ,please share .
I didn't any sample code/syntax from apple pay document.
I have got that working e.g.
var paymentRequest = {
currencyCode: 'GBP',
countryCode: 'GB',
lineItems: [{label: 'line 1', amount: '15'}, {label: 'Line 2', amount: '6'}],
total: {
label: '**TEST**',
amount: '21'
},
supportedNetworks: ['amex', 'masterCard', 'visa' ],
merchantCapabilities: [ 'supports3DS', 'supportsEMV', 'supportsCredit', 'supportsDebit' ]
};Thank you so much for help.
Now its working fine for me.
Also, I just worked out how to get shippingMethod working
each set needs: label, amount, detail, identifier
shippingMethods: [{label: 'Express Shipping', amount: '15', detail: '1-5 days', identifier: 'exp'}, {label: 'Standard Shipping', amount: '6', detail: '5-10 days', identifier: 'std'}],I sure appreciate the help of those of you posting. As we all know, the documentation is SO thing...
Two issues:
on IOS I am getting to the "Pay with Touch ID" using sample code. When I go to pay it just comes back and says "Payment Not Completed". I see zero ways to troubleshoot this ******.
Also.. On Beta 4 - Mac OS - Safari I always get
- ApplePay not available on this browser
I see reference to Wallets in Mac OS but I sure dont see a Wallet or PassBook. Someone have some guidance?
Tony