{"html":"\u003Cheader\u003E\n  \u003Ch1\u003ECustomize your website's Apple Pay integration with Stripe.js v2\u003C/h1\u003E\n\n  \u003Csection\u003E\n    \u003Caside class=\"important amber\"\u003E\u003Cp\u003EThis reference covers the Apple Pay integration using Stripe.js v2, the previous version of our foundational JavaScript library. Our current version of \u003Ca href=\"/docs/stripe-js\"\u003EStripe.js\u003C/a\u003E includes support for Apple Pay using \u003Ca href=\"/docs/stripe-js/elements/payment-request-button\"\u003EElements\u003C/a\u003E, our pre-built UI components. We recommend that users of Stripe.js v2 upgrade at their earliest convenience.\u003C/p\u003E\u003C/aside\u003E\n  \u003C/section\u003E\n\n  \u003Cp\u003E\n    Once you're done \u003Ca href=\"/docs/apple-pay/web/v2\"\u003Egetting started\u003C/a\u003E integrating Apple Pay on your website, you can tweak your code to display and request additional information via the Apple Pay dialog. Just three ways you can tweak it include:\n  \u003C/p\u003E\n  \u003Cul\u003E\n    \u003Cli\u003E\n      \u003Ca href=\"#line-items\"\u003ESpecifying custom line items on the payment sheet\u003C/a\u003E\n    \u003C/li\u003E\n    \u003Cli\u003E\n      \u003Ca href=\"#billing-shipping\"\u003ECollecting your user's billing and shipping address\u003C/a\u003E\n    \u003C/li\u003E\n    \u003Cli\u003E\n      \u003Ca href=\"#shipping-methods\"\u003EOffering different shipping methods to your user\u003C/a\u003E\n    \u003C/li\u003E\n  \u003C/ul\u003E\n\u003C/header\u003E\n\n\u003Csection\u003E\n  \u003Ch2 id=\"line-items\"\u003ESpecifying custom line items on the payment sheet\u003C/h2\u003E\n  \u003Cp\u003E\n    The \u003Ccode\u003EStripe.applePay.buildSession\u003C/code\u003E function \u003Ca href=\"/docs/apple-pay/web/v2#beginning-a-session\"\u003Eintroduced\u003C/a\u003E in our getting started guide is really just a thin wrapper around Apple's \u003Ccode\u003EApplePaySession\u003C/code\u003E class. Specifically, it handles the \u003Ccode\u003Eonvalidatemerchant\u003C/code\u003E and \u003Ccode\u003Eonpaymentauthorized\u003C/code\u003E events for you. You can use the \u003Ca href=\"https://developer.apple.com/reference/applepayjs/paymentrequest\"\u003Eother available keys\u003C/a\u003E in your \u003Ccode\u003EPaymentRequest\u003C/code\u003E, and the \u003Ca href=\"https://developer.apple.com/reference/applepayjs/applepaysession#symbols\"\u003Eother available events\u003C/a\u003E on the \u003Ccode\u003EApplePaySession\u003C/code\u003E to collect your users' shipping address and preferred shipping method, and to even offer them different shipping options and prices depending on their location.\n  \u003C/p\u003E\n\n  \u003Cp\u003E\n    You can set the \u003Ccode\u003ElineItems\u003C/code\u003E key in the \u003Ccode\u003EPaymentRequest\u003C/code\u003E you pass to \u003Ccode\u003EbuildSession\u003C/code\u003E, and the user will be shown a more detailed summary of their payment. Apple recommends that instead of a totally itemized receipt, you group all of the items a user is purchasing into one \"subtotal\" item, and then add additional items for shipping, tax, discounts, etc as needed.\n  \u003C/p\u003E\n\n\u003Cdiv class=\"code\" data-language=\"javascript\"\u003E\n  \u003Cnav class=\"nav-filename icon-file\"\u003E\n  product.js\n\u003C/nav\u003E\n\u003Cpre class=\"language-javascript numbered\" \u003E\u003Ccode\u003Edocument.getElementById(\u0026#39;apple-pay-button\u0026#39;).addEventListener(\u0026#39;click\u0026#39;, function() {\n  var paymentRequest = {\n    countryCode: \u0026#39;US\u0026#39;,\n    currencyCode: \u0026#39;USD\u0026#39;,\n    lineItems: [\n      {\n        type: \u0026#39;final\u0026#39;,\n        label: \u0026#39;Fancy Hat\u0026#39;,\n        amount: \u0026#39;15.00\u0026#39;\n      },\n      {\n        type: \u0026#39;final\u0026#39;,\n        label: \u0026#39;Shipping\u0026#39;,\n        amount: \u0026#39;10.00\u0026#39;\n      },\n      {\n        type: \u0026#39;final\u0026#39;,\n        label: \u0026#39;Tax\u0026#39;,\n        amount: \u0026#39;0.99\u0026#39;\n      },\n      {\n        type: \u0026#39;final\u0026#39;,\n        label: \u0026#39;Discount\u0026#39;,\n        amount: \u0026#39;-6.00\u0026#39;\n      }\n    ],\n    total: {\n      label: \u0026#39;Stripe.com\u0026#39;,\n      amount: \u0026#39;19.99\u0026#39;\n    }\n  };\n  var session = Stripe.applePay.buildSession(paymentRequest,\n    function(result, completion) {\n    console.log(result.token.id);\n    completion(true);\n  });\n  session.begin();\n});\u003C/code\u003E\u003C/pre\u003E\n\n\u003C/div\u003E\n\n  \u003Cp\u003EThe code shown above will render this payment sheet.\u003C/p\u003E\n\n  \u003Cdiv class=\"image\"\u003E\n    \u003Cimg src=\"/img/docs/mobile/apple-pay/line-items.png\" width=\"320\" height=\"341\" alt=\"Screenshot of custom line items\" /\u003E\n  \u003C/div\u003E\n\u003C/section\u003E\n\u003Csection\u003E\n  \u003Ch2 id=\"billing-shipping\"\u003ECollecting your user's billing and shipping address\u003C/h2\u003E\n  \u003Cp\u003E\n    If you specify the \u003Ccode\u003ErequiredBillingContactFields\u003C/code\u003E property on your \u003Ccode\u003EPaymentRequest\u003C/code\u003E, the user will be prompted to choose their billing address before payment. Their address fields will then be available on the \u003Ccode\u003Eresult.token\u003C/code\u003E object in the success callback you pass to \u003Ccode\u003EbuildSession\u003C/code\u003E. Similarly, you can specify the \u003Ccode\u003ErequiredShippingContactFields\u003C/code\u003E property on your \u003Ccode\u003EPaymentRequest\u003C/code\u003E and it'll be available as the \u003Ccode\u003Eresult.shippingContact\u003C/code\u003E object in your success callback. The keys that will be present on the \u003Ccode\u003EshippingContact\u003C/code\u003E can be found on \u003Ca href=\"https://developer.apple.com/reference/applepayjs/paymentcontact\"\u003EApple's Developer docs\u003C/a\u003E.\n  \u003C/p\u003E\n\n\u003Cdiv class=\"code\" data-language=\"javascript\"\u003E\n  \u003Cnav class=\"nav-filename icon-file\"\u003E\n  product.js\n\u003C/nav\u003E\n\u003Cpre class=\"language-javascript numbered\" \u003E\u003Ccode\u003Edocument.getElementById(\u0026#39;apple-pay-button\u0026#39;).addEventListener(\u0026#39;click\u0026#39;, function() {\n  var paymentRequest = {\n    requiredBillingContactFields: [\u0026#39;postalAddress\u0026#39;],\n    requiredShippingContactFields: [\u0026#39;phone\u0026#39;],\n    countryCode: \u0026#39;US\u0026#39;,\n    currencyCode: \u0026#39;USD\u0026#39;,\n    total: {\n      label: \u0026#39;Stripe.com\u0026#39;,\n      amount: \u0026#39;19.99\u0026#39;\n    }\n  };\n  var session = Stripe.applePay.buildSession(paymentRequest,\n    function(result, completion) {\n    console.log(result.token.card.address_line1); // 12 Main St\n    console.log(result.shippingContact.phoneNumber); // 8885551212\n    completion(true);\n  });\n  session.begin();\n});\u003C/code\u003E\u003C/pre\u003E\n\n\u003C/div\u003E\n\n  \u003Cp\u003EThe code shown above will render this payment sheet.\u003C/p\u003E\n\n  \u003Cdiv class=\"image\"\u003E\n    \u003Cimg src=\"/img/docs/mobile/apple-pay/billing-shipping.png\" width=\"320\" height=\"296\" alt=\"Screenshot of billing and shipping address collection\" /\u003E\n  \u003C/div\u003E\n\u003C/section\u003E\n\u003Csection\u003E\n  \u003Ch2 id=\"shipping-methods\"\u003EOffering different shipping methods to your user\u003C/h2\u003E\n  \u003Cp\u003E\n    You can also offer your user a variety of shipping methods to choose from by setting the \u003Ccode\u003EshippingMethods\u003C/code\u003E property on your \u003Ccode\u003EPaymentRequest\u003C/code\u003E. You can then change the \u003Ccode\u003ElineItems\u003C/code\u003E property on your session when the user selects one of them. Depending on the type of service your site offers, you can also set the \u003Ccode\u003EshippingType\u003C/code\u003E key on your \u003Ccode\u003EPaymentRequest\u003C/code\u003E to one of \u003Ccode\u003Eshipping\u003C/code\u003E, \u003Ccode\u003Edelivery\u003C/code\u003E, \u003Ccode\u003EstorePickup\u003C/code\u003E, or \u003Ccode\u003EservicePickup\u003C/code\u003E to have Apple Pay style the sheet more appropriately.\n  \u003C/p\u003E\n\n\u003Cdiv class=\"code\" data-language=\"javascript\"\u003E\n  \u003Cnav class=\"nav-filename icon-file\"\u003E\n  product.js\n\u003C/nav\u003E\n\u003Cpre class=\"language-javascript numbered\" \u003E\u003Ccode\u003Edocument.getElementById(\u0026#39;apple-pay-button\u0026#39;).addEventListener(\u0026#39;click\u0026#39;, function() {\n\n  // We\u0026#39;ll write some helper functions to clean things up.\n  function buildTotal(selectedShippingMethod) {\n    return {\n      label: \u0026#39;Stripe.com\u0026#39;,\n      amount: (parseFloat(selectedShippingMethod.amount) + 19.99).toFixed(2)\n    }\n  }\n\n  function buildLineItems(selectedShippingMethod) {\n    return [\n      {\n        type: \u0026#39;final\u0026#39;,\n        label: \u0026#39;Fancy Hat\u0026#39;,\n        amount: \u0026#39;19.99\u0026#39;\n      },\n      {\n        type: \u0026#39;final\u0026#39;,\n        label: \u0026#39;Shipping\u0026#39;,\n        amount: selectedShippingMethod.amount\n      },\n    ]\n  }\n\n  var shippingMethods = [\n    {\n      label: \u0026#39;Ground Shipping\u0026#39;,\n      detail: \u0026#39;Arrives 5-7 business days\u0026#39;,\n      amount: \u0026#39;5.00\u0026#39;,\n      identifier: \u0026#39;ground\u0026#39;\n    },\n    {\n      label: \u0026#39;Express Shipping\u0026#39;,\n      detail: \u0026#39;Arrives 2-3 business days\u0026#39;,\n      amount: \u0026#39;15.00\u0026#39;,\n      identifier: \u0026#39;express\u0026#39;\n    }\n  ];\n\n  var paymentRequest = {\n    shippingMethods: shippingMethods,\n    shippingType: \u0026#39;shipping\u0026#39;,\n    countryCode: \u0026#39;US\u0026#39;,\n    currencyCode: \u0026#39;USD\u0026#39;,\n    // By default, the first shipping method will be selected.\n    lineItems: buildLineItems(shippingMethods[0]),\n    total: buildTotal(shippingMethods[0])\n  };\n\n  var session = Stripe.applePay.buildSession(paymentRequest,\n    function(result, completion) {\n    console.log(result.shippingMethod.label); // \u0026quot;Ground Shipping\u0026quot;\n  });\n\n  session.onshippingmethodselected = function(event) {\n    // You can do work asynchronously here; just call\n    // session.completeShippingMethodSelection when you\u0026#39;re done.\n    session.completeShippingMethodSelection(\n      ApplePaySession.STATUS_SUCCESS,\n      buildTotal(event.shippingMethod),\n      buildLineItems(event.shippingMethod)\n    )\n  }\n\n  session.begin();\n});\u003C/code\u003E\u003C/pre\u003E\n\n\u003C/div\u003E\n\n  \u003Cp\u003EThe code shown above will render this payment sheet.\u003C/p\u003E\n\n  \u003Cdiv class=\"image\"\u003E\n    \u003Cimg src=\"/img/docs/mobile/apple-pay/shipping-methods@2x.png\" width=\"320\" height=\"363\" alt=\"Shipping methods\" /\u003E\n  \u003C/div\u003E\n\n\u003C/section\u003E\n\n\u003Csection\u003E\n  \u003Ch2 id=\"more-resources\"\u003EMore Resources\u003C/h2\u003E\n  \u003Cul\u003E\n    \u003Cli\u003E\u003Ca href=\"/docs/stripe-js/v2#collecting-apple-pay-details\"\u003EStripe.js v2 - full Apple Pay reference\u003C/a\u003E\u003C/li\u003E\n    \u003Cli\u003E\u003Ca href=\"https://developer.apple.com/videos/play/wwdc2016/703/\"\u003EApple Pay on the Web WWDC Session\u003C/a\u003E (\u003Ca href=\"http://asciiwwdc.com/2016/sessions/703\"\u003ETranscript\u003C/a\u003E)\u003C/li\u003E\n    \u003Cli\u003E\u003Ca href=\"https://developer.apple.com/reference/applepayjs/applepaysession#symbols\"\u003EApple's ApplePaySession reference\u003C/a\u003E\u003C/li\u003E\n  \u003C/ul\u003E\n\u003C/section\u003E\n\u003Cfooter\u003E\n\n\u003Ch2 data-no-anchor\u003EQuestions?\u003C/h2\u003E\n\n\u003Cp\u003E\n  We're always happy to help with code or other questions you might have. \u003Ca href='#' id='search-link' class='search-link'\u003ESearch our documentation\u003C/a\u003E, \u003Ca href='https://support.stripe.com/contact'\u003Econtact support\u003C/a\u003E, or \u003Ca href='https://stripe.com/contact/sales'\u003Econnect with our sales team\u003C/a\u003E. You can also chat live with other developers in \u003Ca href=\"irc://irc.freenode.net/stripe\"\u003E#stripe\u003C/a\u003E on freenode.\n\u003C/p\u003E\n\u003Cscript nonce=\"kUtQhDuhEtsuHObjsLzjTQ==\"\u003E  document.getElementById(\"search-link\").addEventListener(\"click\", focusSearch);\n  function focusSearch() {\n    document.querySelector(\".search input\").focus();\n    window.scrollTo(0,0);\n  }\n\u003C/script\u003E\n\u003Cp data-csat-step=\"poll\" class=\"csat-widget\"\u003E\n  \u003Cspan class=\"csat-widget-text\"\u003EWas this page helpful?\u003C/span\u003E\n  \u003Cspan data-csat-poll=\"yes\" class=\"csat-button csat-button-yes common-Button\"\u003EYes\u003C/span\u003E\n  \u003Cspan data-csat-poll=\"no\" class=\"csat-button csat-button-no common-Button\"\u003ENo\u003C/span\u003E\n\u003C/p\u003E\n\n\u003Cdiv data-csat-step=\"input\" class=\"csat-widget\"\u003E\n  \u003Cdiv class=\"csat-input\"\u003E\n    \u003Cinput id=\"csat-input-text\" placeholder=\"Feedback about this page?\" class=\"common-Input\"\u003E\n    \u003Cspan id=\"csat-input-submit\" class=\"csat-button common-Link\"\u003ESend\u003C/span\u003E\n  \u003C/div\u003E\n  \u003Cp class=\"csat-contact\"\u003E\n    \u003Clabel class=\"csat-contact-option\"\u003E\n      \u003Cinput id=\"csat-contact-optin-checkbox\" type=\"checkbox\"\u003E\n      Yes, it’s okay to follow up by email.\n    \u003C/label\u003E\n  \u003C/p\u003E\n\u003C/div\u003E\n\n\u003Cp data-csat-step=\"reply\" class=\"csat-widget\"\u003E\n  \u003Cspan class=\"csat-reply-main\"\u003EThank you for helping improve Stripe's documentation.\u003C/span\u003E\n  \u003Cspan class=\"csat-reply-extended\"\u003EIf you need help or have any questions, please consider \u003Ca href=\"https://support.stripe.com/email\"\u003Econtacting support\u003C/a\u003E.\u003C/span\u003E\n\u003C/p\u003E\n\n\n\u003C/footer\u003E\n","head_css":"","documentation_footer_js":"","title":"Customize Apple Pay on the Web | Stripe Payments","translated":null}