{"id":10140,"date":"2016-11-14T10:35:18","date_gmt":"2016-11-14T10:35:18","guid":{"rendered":"https:\/\/passkit.com\/blog\/?p=10140"},"modified":"2016-11-14T10:35:18","modified_gmt":"2016-11-14T10:35:18","slug":"how-to-set-up-apple-pay-on-the-web-for-your-website-stripe","status":"publish","type":"post","link":"https:\/\/passkit.com\/blog\/how-to-set-up-apple-pay-on-the-web-for-your-website-stripe\/","title":{"rendered":"How to Set up Apple Pay on the Web for your Website (Stripe)"},"content":{"rendered":"<p><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/11\/14103310\/apple-pay-web-thumbnail.png\" alt=\"apple-pay-web-thumbnail\" width=\"1000\" height=\"500\" class=\"aligncenter size-full wp-image-10162\" title=\"\"><br \/>\nWith the release of iOS 10 and macOS Sierra in September 2016, users can now seamlessly use Apple Pay to make purchases with Safari on their iPhone, iPad, or on their Mac.<br \/>\nWe\u2019ve enabled one of our webpages, <a href=\"https:\/\/passkit.com\/gemtot-beacons-eddystone-ibeacon-altbeacon\/\" target=\"_blank\" rel=\"noopener\">GemTot beacons<\/a>, to accept transactions via Apple Pay (Stripe is what we use to accept payments).<br \/>\nThis post will show you the steps we took to enable Apple Pay on the Web with Stripe, and we hope this will help anyone else out there that is looking to enable Apple Pay for their website.<br \/>\nNote: Kudos to Stripe for sharing <a href=\"https:\/\/stripe.com\/docs\/apple-pay\/web\" target=\"_blank\" rel=\"noopener\">this guide<\/a> on how to setup Apple Pay on the Web. You can follow their guide to set things up, but we did things in a slightly different order as it worked much better for us in testing and deploying.<br \/>\n<strong>Before you Begin:<\/strong><br \/>\nMake sure that you have:<\/p>\n<ul>\n<li>A Mac running on Sierra<\/li>\n<li>An iPhone running on iOS 10 with a credit card in Wallet<\/li>\n<li>Handoff is enabled on your Mac and iPhone. For instructions, visit this page.<\/li>\n<\/ul>\n<h3>Step 1: Verify your domain<\/h3>\n<p>1a. Download <a href=\"https:\/\/stripe.com\/files\/apple-pay\/apple-developer-merchantid-domain-association\" target=\"_blank\" rel=\"noopener\">this domain association file<\/a> and host it at \/.well-known\/apple-developer-merchantid-domain-association on your website. For example, we hosted this at https:\/\/passkit.com\/.well-known\/apple-developer-merchantid-domain-association.<br \/>\n1b. Log in to your Stripe dashboard and go to the Apple Pay tab in \u2018Account Settings\u2019. Enter your live secret key in the <code>Stripe.api_key<\/code> field as shown below:<br \/>\n[php]<br \/>\ncurl https:\/\/api.stripe.com\/v1\/apple_pay\/domains \\<br \/>\n-u sk_live_\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022: \\<br \/>\n-d domain_name=&quot;example.com&quot;<br \/>\n[\/php]<br \/>\nUpon success, you\u2019ll see your domain listed.<br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-10141 size-full\" src=\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/11\/14091030\/apple-pay-web-verify-domain.png\" alt=\"apple-pay-web-verify-domain\" width=\"829\" height=\"438\" title=\"\"><\/p>\n<h3>Step 2: Set up the Apple Pay Sandbox<\/h3>\n<p>2a. Create an Apple developer account and <a href=\"https:\/\/itunesconnect.apple.com\/\" target=\"_blank\" rel=\"noopener\">log into iTunes Connect<\/a>.<br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-10142 size-large\" src=\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/11\/14091404\/itunes-connect-login-1024x559.png\" alt=\"itunes-connect-login\" width=\"1024\" height=\"559\" title=\"\"><br \/>\n2b. Select \u2018Users and Roles\u2019 and select \u2018Sandbox Testers\u2019 link. Click + to create a new test user and save. You\u2019ll be using this email and password to test on your iPhone.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10143 size-large\" src=\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/11\/14091610\/Screen-Shot-2016-11-14-at-5.15.54-PM-1024x399.png\" alt=\"Screen Shot 2016-11-14 at 5.15.54 PM\" width=\"1024\" height=\"399\" title=\"\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10144 size-large\" src=\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/11\/14091717\/Screen-Shot-2016-11-14-at-5.17.01-PM-1024x251.png\" alt=\"Screen Shot 2016-11-14 at 5.17.01 PM\" width=\"1024\" height=\"251\" title=\"\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10145 size-large\" src=\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/11\/14091744\/Screen-Shot-2016-11-14-at-5.17.28-PM-1024x726.png\" alt=\"Screen Shot 2016-11-14 at 5.17.28 PM\" width=\"1024\" height=\"726\" title=\"\"><br \/>\n2c. On your iPhone, open \u2018Settings\u2019 and select \u2018iCloud\u2019. Log in to iCloud using the test credentials you just created.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10146 size-large\" src=\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/11\/14092402\/IMG_0029-576x1024.png\" alt=\"IMG_0029\" width=\"288\" height=\"512\" title=\"\"><br \/>\n2d. Go back to \u2018Settings\u2019 and select \u2018Wallet &amp; Apple Pay\u2019. Tap \u2018Add Credit or Debit Card\u2019 and enter in the following test Visa card details manually:<\/p>\n<ul>\n<li>Card number: 4761 1200 1000 0492<\/li>\n<li>Expiration: 11\/2022<\/li>\n<li>CVV: 533<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10147 size-large\" src=\"https:\/\/dxjl3qy52c1o9.cloudfront.net\/wp-content\/uploads\/2016\/11\/14092501\/IMG_0030-576x1024.png\" alt=\"IMG_0030\" width=\"288\" height=\"512\" title=\"\"><\/p>\n<h3>Step 3: Add an Apple Pay button to your website<\/h3>\n<p>3a. Add the following to your CSS code. This allows you to use Safari\u2019s built-in Apple Pay images.<br \/>\n[css]<br \/>\n&lt;style&gt;<br \/>\n  #apple-pay-button {<br \/>\n    display: none;<br \/>\n    background-color: black;<br \/>\n    background-image: -webkit-named-image(apple-pay-logo-white);<br \/>\n    background-size: 100% 100%;<br \/>\n    background-origin: content-box;<br \/>\n    background-repeat: no-repeat;<br \/>\n    width: 100%;<br \/>\n    height: 44px;<br \/>\n    padding: 10px 0;<br \/>\n    border-radius: 10px;<br \/>\n  }<br \/>\n&lt;\/style&gt;<br \/>\n[\/css]<br \/>\n3b. Add the following HTML on your product page where you want the button to appear.<br \/>\n[html]&lt;button id=&quot;apple-pay-button&quot;&gt;&lt;\/button&gt;[\/html]<br \/>\n3c. Ensure that Stripe.js is included on this page.<br \/>\n[html]&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/js.stripe.com\/v2\/&quot;&gt;&lt;\/script&gt;[\/html]<br \/>\n3d. Once you\u2019ve set your publishable key, use the <code>checkAvailability<\/code> function to determine whether or not to show an Apple Pay button.<br \/>\n[js]<br \/>\nStripe.setPublishableKey(&#8216;pk_test_6pRNASCoBOKtIshFeQd4XMUh&#8217;);<br \/>\nStripe.applePay.checkAvailability(function(available) {<br \/>\n  if (available) {<br \/>\n    document.getElementById(&#8216;apple-pay-button&#8217;).style.display = &#8216;block&#8217;;<br \/>\n  }<br \/>\n});<br \/>\n[\/js]<\/p>\n<h3>Step 4: Start an Apple Pay Session<\/h3>\n<p>4a. Add this code in your product.js file to show the Apple Pay sheet when a user clicks on the payment button.<br \/>\n[js]document.getElementById(&#8216;apple-pay-button&#8217;).addEventListener(&#8216;click&#8217;, beginApplePay);[\/js]<br \/>\n4b. Create a <a href=\"https:\/\/developer.apple.com\/reference\/applepayjs\/paymentrequest\" target=\"_blank\" rel=\"noopener\">PaymentRequest<\/a> object. <code>Total<\/code>, <code>countryCode<\/code>, and <code>currencyCode<\/code> properties are required. Apple uses a formatted string to present prices in total.amount (e.g. \u201829.99\u2019).<br \/>\n[js]<br \/>\nfunction beginApplePay() {<br \/>\n  var paymentRequest = {<br \/>\n    countryCode: &#8216;US&#8217;,<br \/>\n    currencyCode: &#8216;USD&#8217;,<br \/>\n    total: {<br \/>\n      label: &#8216;Stripe.com&#8217;,<br \/>\n      amount: &#8216;29.99&#8217;<br \/>\n    }<br \/>\n  };<br \/>\n  var session = &#8230;; \/\/ continued below<br \/>\n}<br \/>\n[\/js]<br \/>\n4c. Use Stripe\u2019s helper function <code>buildSession<\/code> to turn this payment request into an <a href=\"https:\/\/developer.apple.com\/reference\/applepayjs\/applepaysession\" target=\"_blank\" rel=\"noopener\">ApplePaySession<\/a>. With the first argument, <code>result<\/code>, pass the Stripe token to your server and create a charge.<br \/>\n4d. Call the second parameter, <code>completion<\/code>, with <code>ApplePaySession.STATUS_SUCCESS<\/code> or <code>ApplePaySession.STATUS_FAILURE<\/code> depending on if your charge succeeded or failed.<br \/>\nPlease refer to Stripe\u2019s example here:<br \/>\n[js highlight=&#8221;7-13&#8243;]<br \/>\nfunction beginApplePay() {<br \/>\n  var paymentRequest = &#8230;; \/\/ see above<br \/>\n  var session = Stripe.applePay.buildSession(paymentRequest,<br \/>\n    function(result, completion) {<br \/>\n    $.post(&#8216;\/charges&#8217;, { token: result.token.id }).done(function() {<br \/>\n      completion(ApplePaySession.STATUS_SUCCESS);<br \/>\n      \/\/ You can now redirect the user to a receipt page, etc.<br \/>\n      window.location.href = &#8216;\/success.html&#8217;;<br \/>\n    }).fail(function() {<br \/>\n      completion(ApplePaySession.STATUS_FAILURE);<br \/>\n    });<br \/>\n  }, function(error) {<br \/>\n    console.log(error.message);<br \/>\n  });<br \/>\n  session.begin();<br \/>\n}<br \/>\n[\/js]<br \/>\nNote:<br \/>\nThe highlighted section above is your backend. The function variable <code>result<\/code> has already been returned from Apple and gone through the Stripe backend to setup a token ID that can be used to create a Stripe charge or be attached to a customer.<br \/>\n4e. Call <code>begin()<\/code> to show users your Apple Pay payment sheet. Note: before calling <code>session.begin()<\/code> any other callbacks can be added here <a href=\"https:\/\/developer.apple.com\/reference\/applepayjs\/#1778093\" target=\"_blank\" rel=\"noopener\">https:\/\/developer.apple.com\/reference\/applepayjs\/#1778093<\/a>. Stripe takes care of <code>onpaymentauthorized<\/code> and <code>onvalidatemerchant<\/code> but all the others can be used to customize the experience.<br \/>\nAnd that&#8217;s it! As mentioned previously, these were the steps we took to enable Apple Pay on the Web for our site that accepts Stripe payments. Please refer to the <a href=\"https:\/\/developer.apple.com\/apple-pay\/\" target=\"_blank\" rel=\"noopener\">Apple Pay website<\/a> and <a href=\"https:\/\/stripe.com\/docs\" target=\"_blank\" rel=\"noopener\">Stripe documentation<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With the release of iOS 10 and macOS Sierra in September 2016, users can now seamlessly use Apple Pay to make purchases with Safari on their iPhone, iPad, or on their Mac. We\u2019ve enabled one of our webpages, GemTot beacons, to accept transactions via Apple Pay (Stripe is what we use to accept payments). This [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":10162,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,21],"tags":[58,322],"class_list":["post-10140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apple-pay","category-gemtot-beacons","tag-apple-pay","tag-stripe-payments"],"_links":{"self":[{"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/posts\/10140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/comments?post=10140"}],"version-history":[{"count":0,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/posts\/10140\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/media\/10162"}],"wp:attachment":[{"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/media?parent=10140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/categories?post=10140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/tags?post=10140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}