{"title":"Apple Pay Drop-in integration","category":"default","creationDate":1776961628,"content":"<p>This page explains how to add Apple Pay to your existing Web Drop-in integration.<\/p>\n<h2>Requirements<\/h2>\n<p>Select which endpoint you are using:<\/p>\n\n<div id=\"tabx94Nm\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;&lt;code&gt;\\\/sessions&lt;\\\/code&gt;&quot;,&quot;content&quot;:&quot;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Make sure that you have built a Sessions flow &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow?platform=Web&amp;amp;integration=Drop-in\\&quot;&gt;Web Drop-in integration&lt;\\\/a&gt;. &lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;&lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/api-credentials\\\/roles\\\/\\&quot;&gt;API credential roles&lt;\\\/a&gt;&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;To &lt;a href=\\&quot;#going-live\\&quot;&gt;process live Apple Pay payments&lt;\\\/a&gt; make sure that you have the following role: &lt;ul&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;&lt;strong&gt;API Clientside Encryption Payments role&lt;\\\/strong&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;&lt;a href=\\&quot;\\\/pt\\\/account\\\/user-roles\\&quot;&gt;Customer Area roles&lt;\\\/a&gt;&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Change payment methods&lt;\\\/strong&gt; &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/api-credentials\\\/roles\\\/#management-api\\&quot;&gt;role&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Limitations&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;ul&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;&lt;a href=\\&quot;#offering-apple-pay-on-web\\&quot;&gt;Offering Apple Pay on web&lt;\\\/a&gt; requires additional configuration if you show &lt;a href=\\&quot;#apple-pay-with-iframes\\&quot;&gt;Apple Pay inside an iframe element&lt;\\\/a&gt;.&lt;\\\/li&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;On v6.10.0 and later of Drop-in, you can offer Apple Pay on all supported third-party browsers. For earlier versions, you can only offer Apple Pay on certain browsers, see &lt;a href=\\&quot;#device-compatibility\\&quot;&gt;compatibility&lt;\\\/a&gt; to learn about limitations per device.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin, make sure that you have: &lt;ul&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;&lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\&quot;&gt;Added Apple Pay in your Customer Area&lt;\\\/a&gt;, and &lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/apple-pay\\\/apple-pay-certificate\\&quot;&gt;set up Apple Pay&lt;\\\/a&gt; with your own or Adyen&#039;s certificate.&lt;\\\/li&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;Set up your server to &lt;a href=\\&quot;https:\\\/\\\/developer.apple.com\\\/documentation\\\/applepayontheweb\\\/setting-up-your-server#Allow-Apple-Pay-IP-Addresses\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;allow Apple Pay IP addresses&lt;\\\/a&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&quot;,&quot;altTitle&quot;:&quot;sessions&quot;,&quot;oldTabId&quot;:&quot;sessions-requirements_1&quot;,&quot;relation&quot;:&quot;sessions&quot;},{&quot;title&quot;:&quot;&lt;code&gt;\\\/payments&lt;\\\/code&gt;&quot;,&quot;content&quot;:&quot;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Requirement&lt;\\\/th&gt;\\n&lt;th style=\\&quot;text-align: left;\\&quot;&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Integration type&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Make sure that you have built an Advanced flow &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/advanced-flow?platform=Web&amp;amp;integration=Drop-in\\&quot;&gt;Web Drop-in integration&lt;\\\/a&gt;. &lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;&lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/api-credentials\\\/roles\\\/\\&quot;&gt;API credential roles&lt;\\\/a&gt;&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;To &lt;a href=\\&quot;#going-live\\&quot;&gt;process live Apple Pay payments&lt;\\\/a&gt; make sure that you have the following role &lt;ul&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;&lt;strong&gt;API Clientside Encryption Payments role&lt;\\\/strong&gt;.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;&lt;a href=\\&quot;\\\/pt\\\/account\\\/user-roles\\&quot;&gt;Customer Area roles&lt;\\\/a&gt;&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Change payment methods&lt;\\\/strong&gt; &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/api-credentials\\\/roles\\\/#management-api\\&quot;&gt;role&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Limitations&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;ul&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;&lt;a href=\\&quot;#offering-apple-pay-on-web\\&quot;&gt;Offering Apple Pay on web&lt;\\\/a&gt; requires additional configuration if you show &lt;a href=\\&quot;#apple-pay-with-iframes\\&quot;&gt;Apple Pay inside an iframe element&lt;\\\/a&gt;.&lt;\\\/li&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;On v6.10.0 and later of Drop-in, you can offer Apple Pay on all supported third-party browsers. For earlier versions, you can only offer Apple Pay on certain browsers, see &lt;a href=\\&quot;#device-compatibility\\&quot;&gt;compatibility&lt;\\\/a&gt; to learn about limitations per device.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;&lt;strong&gt;Setup steps&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;td style=\\&quot;text-align: left;\\&quot;&gt;Before you begin, make sure that you have: &lt;ul&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;&lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\&quot;&gt;Added Apple Pay in your Customer Area&lt;\\\/a&gt;, and &lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/apple-pay\\\/apple-pay-certificate\\&quot;&gt;set up Apple Pay&lt;\\\/a&gt; with your own or Adyen&#039;s certificate.&lt;\\\/li&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;Use Apple\\u2019s test cards and a Sandbox tester Apple ID when testing in Adyen TEST.  An Apple Developer account is required to create Sandbox testers and manage configuration, even when using Adyen&#039;s certificate. If you use your own Apple Pay certificate, complete Apple\\u2019s domain verification for each domain where you offer Apple Pay.&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&quot;,&quot;altTitle&quot;:&quot;advanced&quot;,&quot;oldTabId&quot;:&quot;advanced-requirements_2&quot;,&quot;relation&quot;:&quot;advanced&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2>Offering Apple Pay on web<\/h2>\n<p>When offering the option to pay with Apple Pay on web, there are additional things to consider if you use <a href=\"#apple-pay-with-iframes\">iframe elements<\/a>. If you want to show Apple Pay on browser other than Safari, see <a href=\"#compatibility\">compatibility<\/a> to learn which devices and operating systems support this feature.<\/p>\n<h3>Apple Pay with iFrames<\/h3>\n<p>To show Apple Pay in an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/iframe\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">iframe<\/a> element when the shopper is using Safari as their browser:<\/p>\n<ul>\n<li><strong>For shoppers on Safari 17 later<\/strong>: add the <a href=\"https:\/\/www.w3.org\/TR\/payment-request\/#using-with-cross-origin-iframes\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\"><code>allow<\/code> attribute to the iframe<\/a> to let the iframe communicate correctly with Apple Pay APIs:\n<pre><code class=\"language-html\">&lt;iframe allow=\"payment\"&gt;\n&lt;\/iframe&gt;<\/code><\/pre>\n<p>Safari 17 is available on iOS 17 and later, and macOS 12 and later.<\/p><\/li>\n<li><strong>For shoppers on Safari 16 or earlier<\/strong>: match the iframe origin and your top-level origin. The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/URL\/protocol\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">protocols<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/URL\/host\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">hosts<\/a> (full domain name), and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/URL\/port\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">ports<\/a>, when specified, must be the same for both pages.<\/li>\n<\/ul>\n<h3>Device compatibility<\/h3>\n<p>On v6.10.0 and later versions of Drop-in, you can offer Apple Pay on all supported third-party browsers, platforms, and devices, including Windows and Chromebooks. Shoppers can now initiate Apple Pay payments from any compatible device and complete their payment by scanning a code. See <a href=\"https:\/\/support.apple.com\/en-us\/102896\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Devices compatible with Apple Pay on Apple Pay documentation<\/a>.<\/p>\n<p>On earlier versions of Drop-in , the support for Apple Pay on third-party browsers differ per shopper device:<\/p>\n<ul>\n<li><strong>MacOS devices<\/strong>: available on Safari.<\/li>\n<li><strong>iOS and iPadOS devices<\/strong>: available on all browsers, including web views.<\/li>\n<li><strong>Non-Apple devices<\/strong>: not available.<\/li>\n<\/ul>\n<h2>API reference<\/h2>\n<p>You do not need to send additional fields for Apple Pay. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:<\/p>\n<ul>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/sessions\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/sessions<\/a>&#58; This is the default with <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Drop-in\">Drop-in v5.0.0<\/a> or later.<\/li>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a>&#58; If you implemented an <a href=\"\/pt\/online-payments\/build-your-integration\">additional use case<\/a>.<\/li>\n<\/ul>\n<p>If you run into an error, refer to <a href=\"\/pt\/payment-methods\/apple-pay\/handle-apple-pay-errors\">Handle Apple Pay errors<\/a>.<\/p>\n<h2>Drop-in configuration<\/h2>\n<p>Select which endpoint you are using:<\/p>\n\n<div id=\"tabjueMX\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;&lt;code&gt;\\\/sessions&lt;\\\/code&gt;&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;This is the default with &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/sessions-flow?platform=Web&amp;amp;integration=Drop-in\\&quot;&gt;Drop-in v5.0.0&lt;\\\/a&gt; or later.&lt;\\\/p&gt;\\n&lt;p&gt;If you are using &lt;code&gt;\\\/sessions&lt;\\\/code&gt; together with Adyen&#039;s Apple Pay certificate, you do not need to add any additional configuration for Apple Pay.&lt;\\\/p&gt;\\n&lt;p&gt;If using your own Apple Pay certificate, you need to include:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;code&gt;onValidateMerchant&lt;\\\/code&gt;:  Required for displaying the Apple Pay payment sheet. For more information, see &lt;a href=\\&quot;https:\\\/\\\/developer.apple.com\\\/documentation\\\/apple_pay_on_the_web\\\/applepaysession\\\/1778021-onvalidatemerchant\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Apple Pay documentation&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following example shows how to configure Apple Pay, if you use your own Apple Pay certificate.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Apple Pay configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const dropin = new Dropin(checkout, {\\\\n  \\\\\\\/\\\\\\\/ ...Other Drop-in configuration.\\\\n  paymentMethodsConfiguration: {\\\\n    \\\\\\\/\\\\\\\/ Configuration object for Apple Pay.\\\\n    applepay: {\\\\n      onValidateMerchant: (resolve, reject, validationURL) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Your server uses the validation URL to request a session from the Apple Pay server.\\\\n        validateMerchant(validationURL)\\\\n          .then(response =&amp;gt; {\\\\n            \\\\\\\/\\\\\\\/ Complete merchant validation with resolve(MERCHANTSESSION) after receiving an opaque merchant session object, MerchantSession\\\\n            resolve(response);\\\\n          })\\\\n          .catch(error =&amp;gt; {\\\\n            \\\\\\\/\\\\\\\/ Complete merchant validation with reject() if any error occurs\\\\n            reject();\\\\n          });\\\\n      },\\\\n      \\\\\\\/\\\\\\\/ ...Other Apple Pay configuration.\\\\n    }\\\\n  }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:&quot;sessions&quot;,&quot;oldTabId&quot;:&quot;config-sessions_1&quot;,&quot;relation&quot;:&quot;sessions&quot;},{&quot;title&quot;:&quot;&lt;code&gt;\\\/payments&lt;\\\/code&gt;&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;If you are using &lt;code&gt;\\\/payments&lt;\\\/code&gt; together with Adyen&#039;s Apple Pay certificate, you do not need to add any additional configuration for Apple Pay.&lt;\\\/p&gt;\\n&lt;p&gt;If using your own Apple Pay certificate, you need to include:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;code&gt;onValidateMerchant&lt;\\\/code&gt;: Required for displaying the Apple Pay payment sheet. For more information, see &lt;a href=\\&quot;https:\\\/\\\/developer.apple.com\\\/documentation\\\/apple_pay_on_the_web\\\/applepaysession\\\/1778021-onvalidatemerchant\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Apple Pay documentation&lt;\\\/a&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;The following example shows how to configure Apple Pay, if you use your own Apple Pay certificate.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Apple Pay configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const dropin = new Dropin(checkout, {\\\\n  \\\\\\\/\\\\\\\/ ...Other Drop-in configuration.\\\\n  paymentMethodsConfiguration: {\\\\n    \\\\\\\/\\\\\\\/ Configuration object for Apple Pay.\\\\n    applepay: {\\\\n      onValidateMerchant: (resolve, reject, validationURL) =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/ Your server uses the validation URL to request a session from the Apple Pay server.\\\\n        validateMerchant(validationURL)\\\\n          .then(response =&amp;gt; {\\\\n            \\\\\\\/\\\\\\\/ Complete merchant validation with resolve(MERCHANTSESSION) after receiving an opaque merchant session object, MerchantSession\\\\n            resolve(response);\\\\n          })\\\\n          .catch(error =&amp;gt; {\\\\n            \\\\\\\/\\\\\\\/ Complete merchant validation with reject() if any error occurs\\\\n            reject();\\\\n          });\\\\n      },\\\\n      \\\\\\\/\\\\\\\/ ...Other Apple Pay configuration.\\\\n    }\\\\n  }\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:&quot;advanced&quot;,&quot;oldTabId&quot;:&quot;config-payments_2&quot;,&quot;relation&quot;:&quot;advanced&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h3>Optional configuration<\/h3>\n<p>This <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow\/?platform=Web&amp;integration=Drop-in\">optional configuration parameter<\/a> is only accepted on the <code>dropin<\/code> instance.<\/p>\n<h4>Instant payment button configuration<\/h4>\n<p>Use the <code>instantPaymentTypes<\/code> object to display the Apple Pay payment button at the top of the list of available payment methods. The sample below shows how to do this:<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Optional Drop-in instance configuration'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;const dropin = new Dropin(checkout, {\\n    instantPaymentTypes: ['applepay']\\n}).mount('#dropin-container');&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h3>Optional Apple Pay configuration<\/h3>\n<p>You can do the following:<\/p>\n<ul>\n<li><a href=\"#ap-button-configuration\">Configure the appearance of the Apple Pay button<\/a>.<\/li>\n<li><a href=\"#ap-payment-request-data\">Include additional data such as transaction information, fields for billing and shipping contact information<\/a>.<\/li>\n<li><a href=\"#apple-pay-code\">Configure how to render Apple Pay code<\/a>.<\/li>\n<li><a href=\"#ap-events\">Add logic for specific events on your payment form<\/a>.<\/li>\n<\/ul>\n<h4 id=\"ap-button-configuration\">Button configuration<\/h4>\n<table>\n<thead>\n<tr>\n<th>Property<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>buttonType<\/code><\/td>\n<td>The\u00a0<a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/apple-pay#Button-types\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">type of button<\/a>\u00a0you want to show on your payments form.\u00a0Possible values: <br> - <strong>plain<\/strong>: Apple Pay <br> - <strong>buy<\/strong>: Buy with Apple Pay <br> - <strong>donate<\/strong>: Donate with Apple Pay <br> - <strong>check-out<\/strong>: Check out with Apple Pay <br> - <strong>book<\/strong>: Book with Apple Pay <br> - <strong>subscribe<\/strong>: Subscribe with Apple Pay <br><br> The following types are supported from <a href=\"\/pt\/online-payments\/release-notes\/#releaseNote=2021-09-06-ios-componentsdrop-in-4.1.0\">Web Components v4.1.0<\/a>:  <br> - <strong>add-money<\/strong>: Add money with Apple Pay  <br> - <strong>contribute<\/strong>: Contribute with Apple Pay <br> - <strong>order<\/strong>: Order with Apple Pay <br> - <strong>reload<\/strong>: Reload with Apple Pay <br> - <strong>rent<\/strong>: Rent with Apple Pay <br> - <strong>support<\/strong>: Support with Apple Pay <br> - <strong>tip<\/strong>:Tip with Apple Pay <br> - <strong>top-up<\/strong>: Top Up with Apple Pay<\/td>\n<\/tr>\n<tr>\n<td><code>buttonColor<\/code><\/td>\n<td>Specify the\u00a0<a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/apple-pay#Button-styles\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">color of the button<\/a>\u00a0you want displayed on the payment form. Possible values: <br> - <strong>black<\/strong>: Black button <br> - <strong>white<\/strong>: White button with no outline <br> -   <strong>white-outline<\/strong>: White button with black outline<\/td>\n<\/tr>\n<tr>\n<td><code>buttonLocale<\/code><\/td>\n<td>Specify the locale to set the language for the Apple Pay button. For possible values, see <a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaybuttonlocale\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple Pay documentation<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"ap-payment-request-data\">Payment request data<\/h4>\n<table>\n<thead>\n<tr>\n<th>Payment request data<\/th>\n<th>Configuration object<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Transaction information<\/strong><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaysession\/1778014-supportsversion\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>version<\/code>\n<\/a><\/td>\n<td>Check the <a href=\"https:\/\/developer.apple.com\/documentation\/applepayontheweb\/apple-pay-on-the-web-version-history\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple Pay on the Web documentation<\/a> for version features and compatibility details.<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaylineitem\/1916085-label\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>totalPriceLabel<\/code>\n<\/a><\/td>\n<td>String. Description of the line item.<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentrequest\/1916120-lineitems\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>lineItems<\/code>\n<\/a><\/td>\n<td>A set of line items that explain recurring payments, additional charges, and discounts. Refer to Apple Pay documentation for sample values.<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaymerchantcapability\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>merchantCapabilities<\/code>\n<\/a><\/td>\n<td>Payment capabilities supported by the merchant. Default value is [<code>supports3DS<\/code>]. Refer to Apple Pay documentation for other options.<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepayshippingmethod\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>shippingMethods<\/code>\n<\/a><\/td>\n<td>List of available methods for shipping physical goods. Refer to Apple Pay documentation for sample values.<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentrequest\/1916128-shippingtype\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>shippingType<\/code>\n<\/a><\/td>\n<td>Optional value that indicates how purchased items are to be shipped. Refer to Apple Pay documentation for available options.<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/applepayontheweb\/applepaypaymentrequest\/supportedcountries\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>supportedCountries<\/code>\n<\/a><\/td>\n<td>Specify the ISO 3166 country codes if you only support payments from cards issued in specific countries.<\/td>\n<\/tr>\n<tr>\n<td><strong>Requested billing and shipping contact information<\/strong><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentrequest\/2216120-requiredbillingcontactfields\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>requiredBillingContactFields<\/code>\n<\/a><\/td>\n<td>The billing address associated with the shoppers payment method. The only allowed field is <code>postalAddress<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentrequest\/2216121-requiredshippingcontactfields\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>requiredShippingContactFields<\/code>\n<\/a><\/td>\n<td>Shipping information fields that you require from the shopper to fulfill the order. Use this field to get the shopper's email or phone number from the Apple Pay payment sheet. Refer to Apple Pay documentation for sample values.<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/applepayontheweb\/applepaypaymentrequest\/shippingcontacteditingmode\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>shippingContactEditingMode<\/code>\n<\/a>   <br> <strong>v6.13.0 or later<\/strong><\/td>\n<td>Set to <strong>storePickup<\/strong> for in-store or other pickup shipping options to prevent the shopper from editing the shipping address field.<\/td>\n<\/tr>\n<tr>\n<td><strong>Known contact information<\/strong><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentrequest\/1916125-billingcontact\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>billingContact<\/code>\n<\/a><\/td>\n<td>Set an up-to-date billing contact information for the shopper.<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentrequest\/1916127-shippingcontact\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>shippingContact<\/code>\n<\/a><\/td>\n<td>Set an up-to-date shipping contact information for the shopper.<\/td>\n<\/tr>\n<tr>\n<td><strong>Custom data<\/strong><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentrequest\/2577137-applicationdata\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>applicationData<\/code>\n<\/a><\/td>\n<td>A Base64-encoded string used to contain your application-specific data. For example, a shopping cart identifier or an order number that you will need to identify this transaction.<\/td>\n<\/tr>\n<tr>\n<td><strong>Recurring payments<\/strong><\/td>\n<td><a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentrequest\/3955946-recurringpaymentrequest\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>recurringPaymentRequest<\/code>\n<\/a><\/td>\n<td>Required for recurring payments. Include to specify that the payment is a recurring payment.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"apple-pay-code\">Code rendering configuration<\/h4>\n<table>\n<thead>\n<tr>\n<th>Property<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>renderApplePayCodeAs<\/code><\/td>\n<td>Specify whether the Apple Pay code is rendered as a modal, or pop-up window within the page when using Apple Pay in a browser other than Safari.\u00a0Possible values: <br> - <strong>modal<\/strong>: This is the default when the Apple Pay Component is not embedded in an iframe. <br> - <strong>window<\/strong>: This is the default when the Apple Pay Component is embedded in an iframe.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"ap-events\">Events<\/h4>\n<p>The following event handlers are supported for Apple Pay. Select the event handler names to see the related Apple Pay documentation.<\/p>\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>onClick(resolve, reject)<\/code><\/td>\n<td>Called when the shopper clicks the Apple Pay button. Call <code>resolve()<\/code> to continue or <code>reject()<\/code> to stop the payment flow.<\/td>\n<\/tr>\n<tr>\n<td><code>onValidateMerchant(resolve, reject, validationURL)<\/code><\/td>\n<td>Required if you use your own <a href=\"\/pt\/payment-methods\/apple-pay\/apple-pay-certificate\/\">Apple Pay certificate<\/a>. Called when the payment sheet is displayed. See <a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaysession\/1778021-onvalidatemerchant\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple Pay documentation<\/a> for more information.<\/td>\n<\/tr>\n<tr>\n<td><code>onAuthorized(data, actions)<\/code><\/td>\n<td>Called after the shopper authorizes the payment with Apple Pay. This contains the raw event from Apple Pay, and the raw event from Apple Pay pre-formatted by our Web SDK. Call <code>actions.resolve()<\/code> to continue or <code>actions.reject()<\/code> to stop the payment flow. See <a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaysession\/1778020-onpaymentauthorized\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple Pay documentation<\/a> for more information.<\/td>\n<\/tr>\n<tr>\n<td><code>onPaymentMethodSelected(resolve, reject, event)<\/code><\/td>\n<td>Called when the shopper selects a new payment method. Call <code>resolve()<\/code> or <code>reject()<\/code>, passing the <a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentmethodupdate\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>ApplePayPaymentMethodUpdate<\/code>\n<\/a> object. See <a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaysession\/1778013-onpaymentmethodselected\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple Pay documentation<\/a> for more information.<\/td>\n<\/tr>\n<tr>\n<td><code>onShippingContactSelected(resolve, reject, event)<\/code><\/td>\n<td>Called when the shopper selects a shipping contact. Call <code>resolve()<\/code> or <code>reject()<\/code>, passing the <a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentmethodupdate\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>ApplePayPaymentMethodUpdate<\/code>\n<\/a> object. See <a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaysession\/1778009-onshippingcontactselected\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple Pay documentation<\/a> for more information.<\/td>\n<\/tr>\n<tr>\n<td><code>onShippingMethodSelected(resolve, reject, event)<\/code><\/td>\n<td>Called when the shopper selects a shipping method. Call <code>resolve()<\/code> or <code>reject()<\/code>, passing the <a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaypaymentmethodupdate\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>ApplePayPaymentMethodUpdate<\/code>\n<\/a> object. See <a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaysession\/1778028-onshippingmethodselected\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple Pay documentation<\/a> for more information.<\/td>\n<\/tr>\n<tr>\n<td><code>onApplePayCodeClose<\/code><\/td>\n<td>Called when the Apple Pay code modal or window closes.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Optional Apple Pay Wallet Order Tracking<\/h3>\n<p>Supported in v6.0.0 or later.<\/p>\n<p>You can use <a href=\"https:\/\/developer.apple.com\/documentation\/walletorders\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple Pay Wallet Order Tracking<\/a> to give your shopper order tracking through Apple Pay. For more information, refer to the following resources from Apple:<\/p>\n<ul>\n<li><a href=\"https:\/\/applepaydemo.apple.com\/order-tracking\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple Pay Wallet Order Tracking Demo<\/a><\/li>\n<li><a href=\"https:\/\/developer.apple.com\/videos\/play\/tech-talks\/110336\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple Pay Tech Talk about implementing Apple Pay with order management<\/a><\/li>\n<li><a href=\"https:\/\/developer.apple.com\/documentation\/walletorders\/example_order_packages\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Example Order Packages<\/a><\/li>\n<\/ul>\n<ol>\n<li>\n<p>Implement <code>onOrderTracking<\/code>:<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Implement order tracking'\" :id=\"''\" :code-data='[{\"language\":\"swift\",\"tabTitle\":\"\",\"content\":\"const applepay = new ApplePay(checkout, {\\n  onOrderTrackingRequest: async (resolve, reject) =&gt; {\\n    try {\\n      \\\/\\\/ Request the order details from your server.\\n      const order = await server.getOrder();\\n\\n      \\\/\\\/ Pass the order details to Drop-in.\\n      const orderDetails = {\\n        orderTypeIdentifier: order.orderTypeIdentifier,\\n        orderIdentifier: order.orderIdentifier,\\n        webServiceURL: order.webServiceURL,\\n        authenticationToken: order.authenticationToken\\n      };\\n      resolve(orderDetails);\\n    } catch (error) {\\n      \\\/\\\/ If you cannot get the order, call the reject function.\\n      reject();\\n    }\\n  }\\n});\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>When <code>onOrderTracking<\/code> is called depends on which server-side flow your integration uses.<\/p>\n\n<div id=\"tabNciXr\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Sessions flow&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;After the payment is complete, Drop-in calls &lt;code&gt;onOrderTracking&lt;\\\/code&gt;.&lt;\\\/p&gt;\\n&quot;,&quot;altTitle&quot;:&quot;order-tracking-sessions&quot;,&quot;oldTabId&quot;:&quot;order-tracking-sessions_1&quot;,&quot;relation&quot;:&quot;&quot;},{&quot;title&quot;:&quot;Advanced flow&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;After &lt;code&gt;onSubmit&lt;\\\/code&gt; is resolved, Drop-in calls &lt;code&gt;onOrderTracking&lt;\\\/code&gt;.&lt;\\\/p&gt;\\n&quot;,&quot;altTitle&quot;:&quot;order-tracking-advanced&quot;,&quot;oldTabId&quot;:&quot;order-tracking-advanced_2&quot;,&quot;relation&quot;:&quot;&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<\/li>\n<li>\n<p>From your server, get the order details and pass it as <code>orderDetails<\/code> to your client side.<br \/>\nIf an error occurs, the Apple Pay payment overlay is closed, and the payment is successfully completed without creating an order in the shopper's Apple Wallet app.<\/p>\n<\/li>\n<\/ol>\n<h3>Optional Apple Pay capabilities check<\/h3>\n<p>Supported in v6.10.0 or later.<\/p>\n<p>You can use the <a href=\"https:\/\/developer.apple.com\/documentation\/apple_pay_on_the_web\/applepaysession\/4440085-applepaycapabilities\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>applePayCapabilities<\/code>\n<\/a> method to check whether the device supports Apple Pay and if the shopper has an active card in their wallet for web payments. You can then configure when to offer Apple Pay depending on the available payment methods in your shopper's wallet. This is only recommended if you display Apple Pay on the product page.<\/p>\n<p>To implement <code>applePayCapabilities<\/code>:<\/p>\n<pre><code class=\"language-js\">applepay.applePayCapabilities().then(capabilities =&gt; {\n  \/\/ Check whether the person has an active payment method in their wallet.\n  switch (capabilities.paymentCredentialStatus) {\n    case \"paymentCredentialsAvailable\":\n      \/\/ Display an Apple Pay button and offer Apple Pay as the primary payment option.\n    case \"paymentCredentialStatusUnknown\":\n      \/\/ Display an Apple Pay button and offer Apple Pay as a payment option.\n    case \"paymentCredentialsUnavailable\":\n      \/\/ Optionally, display an Apple Pay button.\n    case \"applePayUnsupported\":\n      \/\/ Do not show an Apple Pay button or offer Apple Pay.\n  }\n});<\/code><\/pre>\n<h2 id=\"recurring-payments\">Recurring payments<\/h2>\n<p>Apple Pay supports <a href=\"\/pt\/online-payments\/tokenization\">tokenization<\/a> for recurring transactions on <a href=\"\/pt\/online-payments\/release-notes\/?title%5B0%5D=Web%20Components%2FDrop-in&amp;version%5B0%5D=5.39.0#releaseNote=2023-04-03-web-componentsdrop-in-5.39.0\">v5.39.0<\/a> and later.<\/p>\n<div class=\"notices yellow\">\n<p>We strongly recommend that you ask explicit permission from the shopper if you intend to make future recurring payments. Being transparent about the payment schedule and the charged amount reduces the risk of chargebacks.<\/p>\n<\/div>\n<p>To enable recurring payments, you must include <code>recurringPaymentRequest<\/code> <a href=\"#ap-payment-request-data\">when configuring Apple Pay<\/a>.<\/p>\n\n<div id=\"tabQcgZH\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;v6 and later&quot;,&quot;content&quot;:&quot;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example recurringPaymentRequest configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;javascript\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const applepayComponent = new ApplePay(checkout {\\\\n  recurringPaymentRequest: {\\\\n    paymentDescription: \\\\\\&quot;Merchant tokens Adyen test\\\\\\&quot;,\\\\n    managementURL: \\\\\\&quot;https:\\\\\\\/\\\\\\\/www.adyen.com\\\\\\\/\\\\\\&quot;,\\\\n    tokenNotificationUrl: \\\\\\&quot;https:\\\\\\\/\\\\\\\/www.adyen.com\\\\\\\/tokenNotificationUrl\\\\\\&quot;,\\\\n    regularBilling: {\\\\n      label: \\\\\\&quot;Subscription\\\\\\&quot;,\\\\n      amount: \\\\\\&quot;20.00\\\\\\&quot;,\\\\n      type: \\\\\\&quot;final\\\\\\&quot;,\\\\n      paymentTiming: \\\\\\&quot;recurring\\\\\\&quot;,\\\\n      recurringPaymentStartDate: new Date(\\\\\\&quot;2023-12-01T00:00:00\\\\\\&quot;),\\\\n      recurringPaymentIntervalUnit: \\\\\\&quot;month\\\\\\&quot;,\\\\n      recurringPaymentIntervalCount: 4,\\\\n      recurringPaymentEndDate: new Date(\\\\\\&quot;2024-03-01T00:00:00\\\\\\&quot;),\\\\n    },\\\\n    trialBilling: {\\\\n      label: \\\\\\&quot;Trial billing\\\\\\&quot;,\\\\n      amount: \\\\\\&quot;10.00\\\\\\&quot;,\\\\n      type: \\\\\\&quot;final\\\\\\&quot;,\\\\n      paymentTiming: \\\\\\&quot;recurring\\\\\\&quot;,\\\\n      recurringPaymentStartDate: new Date(\\\\\\&quot;2023-11-01T00:00:00\\\\\\&quot;),\\\\n      recurringPaymentIntervalUnit: \\\\\\&quot;month\\\\\\&quot;,\\\\n      recurringPaymentIntervalCount: 1,\\\\n      recurringPaymentEndDate: new Date(\\\\\\&quot;2023-12-01T00:00:00\\\\\\&quot;),\\\\n    }\\\\n  },\\\\n});\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:null,&quot;oldTabId&quot;:&quot;v6_and_later_0_1&quot;,&quot;relation&quot;:&quot;&quot;},{&quot;title&quot;:&quot;v5 and earlier&quot;,&quot;content&quot;:&quot;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example recurringPaymentRequest configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;javascript&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const applepayComponent = checkout.create(&#039;applepay&#039;, {\\\\n  recurringPaymentRequest: {\\\\n    paymentDescription: \\\\&amp;quot;Merchant tokens Adyen test\\\\&amp;quot;,\\\\n    managementURL: \\\\&amp;quot;https:\\\\\\\/\\\\\\\/www.adyen.com\\\\\\\/\\\\&amp;quot;,\\\\n    tokenNotificationUrl: \\\\&amp;quot;https:\\\\\\\/\\\\\\\/www.adyen.com\\\\\\\/tokenNotificationUrl\\\\&amp;quot;,\\\\n    regularBilling: {\\\\n      label: \\\\&amp;quot;Subscription\\\\&amp;quot;,\\\\n      amount: \\\\&amp;quot;20.00\\\\&amp;quot;,\\\\n      type: \\\\&amp;quot;final\\\\&amp;quot;,\\\\n      paymentTiming: \\\\&amp;quot;recurring\\\\&amp;quot;,\\\\n      recurringPaymentStartDate: new Date(\\\\&amp;quot;2023-12-01T00:00:00\\\\&amp;quot;),\\\\n      recurringPaymentIntervalUnit: \\\\&amp;quot;month\\\\&amp;quot;,\\\\n      recurringPaymentIntervalCount: 4,\\\\n      recurringPaymentEndDate: new Date(\\\\&amp;quot;2024-03-01T00:00:00\\\\&amp;quot;),\\\\n    },\\\\n    trialBilling: {\\\\n      label: \\\\&amp;quot;Trial billing\\\\&amp;quot;,\\\\n      amount: \\\\&amp;quot;10.00\\\\&amp;quot;,\\\\n      type: \\\\&amp;quot;final\\\\&amp;quot;,\\\\n      paymentTiming: \\\\&amp;quot;recurring\\\\&amp;quot;,\\\\n      recurringPaymentStartDate: new Date(\\\\&amp;quot;2023-11-01T00:00:00\\\\&amp;quot;),\\\\n      recurringPaymentIntervalUnit: \\\\&amp;quot;month\\\\&amp;quot;,\\\\n      recurringPaymentIntervalCount: 1,\\\\n      recurringPaymentEndDate: new Date(\\\\&amp;quot;2023-12-01T00:00:00\\\\&amp;quot;),\\\\n    }\\\\n  },\\\\n});&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:null,&quot;oldTabId&quot;:&quot;v5_and_earlier_1_2&quot;,&quot;relation&quot;:&quot;&quot;}]\"\n            :should-update-when-url-changes='false'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<p>For more context and explanation of parameters, refer to <a href=\"https:\/\/developer.apple.com\/documentation\/applepayontheweb\/applepayrecurringpaymentrequest\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Apple developer documentation<\/a>.<\/p>\n<p>To make recurring payments, refer to <a href=\"\/pt\/online-payments\/tokenization\">Tokenization<\/a> to:<\/p>\n<ul>\n<li>Create a token through the initial payment<\/li>\n<li>Use the token in subsequent payments.<\/li>\n<li>Manage tokens.<\/li>\n<\/ul>\n<h2 id=\"test-and-go-live\">Test and go live<\/h2>\n<p>Use Apple's test\u00a0card numbers\u00a0to\u00a0test your integration.<\/p>\n<p>For a full list of test cards and instructions how to add these to your test device, see <a href=\"https:\/\/developer.apple.com\/apple-pay\/sandbox-testing\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Sandbox testing<\/a>\u00a0on\u00a0Apple's Developer website.<\/p>\n<p> <\/p>\n<p>Check the status of an Apple Pay test payment in your\u00a0<a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a>\u00a0&gt;\u00a0<strong>Transactions<\/strong>\u00a0&gt; <strong>\u00a0Payments<\/strong>.<\/p>\n<h3>Going live<\/h3>\n<p>To process live Apple Pay payments, your API credential needs to have the <strong>API Clientside Encryption Payments role<\/strong>. You can check this in your <a href=\"https:\/\/ca-live.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">live Customer Area<\/a> or ask your Admin user to verify.<\/p>\n<p> <\/p>\n\n<div id=\"tabu7wKt\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Use Adyen&#039;s Apple Pay certificate&quot;,&quot;content&quot;:&quot;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;Download and unzip the &lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/apple-pay\\\/web-drop-in\\\/apple-developer-merchantid-domain-association-2024.zip\\&quot;&gt;domain association file&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Host the domain association file on each domain you want to use, including subdomains. To host the file, use the exact file name &lt;strong&gt;apple-developer-merchantid-domain-association&lt;\\\/strong&gt; under the following path:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-bash\\&quot;&gt;\\\/.well-known\\\/apple-developer-merchantid-domain-association&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;p&gt;The file must:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Have &lt;code&gt;Content-Type: text\\\/plain&lt;\\\/code&gt; in the header.&lt;\\\/li&gt;\\n&lt;li&gt;Be externally accessible.&lt;\\\/li&gt;\\n&lt;li&gt;Not be password protected.&lt;\\\/li&gt;\\n&lt;li&gt;Not be behind a proxy or redirect.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;p&gt;See an example of a &lt;a href=\\&quot;https:\\\/\\\/eu.adyen.link\\\/.well-known\\\/apple-developer-merchantid-domain-association\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;working domain association file&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;&lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/add-payment-methods\\&quot;&gt;Add Apple Pay in your live Customer Area&lt;\\\/a&gt;&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;You&#039;ll be asked for &lt;strong&gt;Shop websites&lt;\\\/strong&gt;: your website URLs, for example &lt;code&gt;https:\\\/\\\/www.mystore.com&lt;\\\/code&gt;. If you add more than one, separate them with a comma.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;To update or add new Apple Pay domains:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;Go to &lt;a href=\\&quot;https:\\\/\\\/ca-live.adyen.com\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;live Customer Area&lt;\\\/a&gt; &amp;gt; &lt;strong&gt;Payment Methods&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Select the specific Apple Pay payment method you want to update.&lt;\\\/li&gt;\\n&lt;li&gt;In the sidebar on the right, go to the &lt;strong&gt;Apple Pay domains&lt;\\\/strong&gt; section to find a list of domains currently configured for this payment method. To update the domains, select the &lt;strong&gt;Edit&lt;\\\/strong&gt; button next to the Apple Pay domains heading.&lt;br \\\/&gt;\\nA new sidebar opens where you can make the necessary changes. If there are any errors, this is indicated with red dot.&lt;\\\/li&gt;\\n&lt;li&gt;To view and fix any errors, select &lt;strong&gt;Edit&lt;\\\/strong&gt; next to the affected domain.\\n&lt;div class=\\&quot;sc-notice info\\&quot;&gt;&lt;div&gt;\\n&lt;ul&gt;\\n&lt;li&gt;You must be assigned the &lt;strong&gt;Change payment methods&lt;\\\/strong&gt; role in Customer Area to be able to make domain updates.&lt;\\\/li&gt;\\n&lt;li&gt;Domain configuration updates apply only to the generic Apple Pay payment method. Scheme-specific variants, like AMEX Apple Pay, Visa Apple Pay, and Mastercard Apple Pay, do not require domain configuration and are not supported by this flow.\\n&lt;\\\/div&gt;&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:&quot;adyen-certificate&quot;,&quot;oldTabId&quot;:&quot;adyen-certificate-live_1&quot;,&quot;relation&quot;:&quot;adyen-certificate&quot;},{&quot;title&quot;:&quot;Use your own Apple Pay certificate&quot;,&quot;content&quot;:&quot;&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;&lt;a href=\\&quot;\\\/pt\\\/payment-methods\\\/apple-pay\\\/apple-pay-certificate\\\/web\\&quot;&gt;Set up Apple Pay&lt;\\\/a&gt; on your Apple Pay Developer account for your live merchant identifier.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Configure your firewall&#039;s allow-list:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a href=\\&quot;https:\\\/\\\/developer.apple.com\\\/documentation\\\/apple_pay_on_the_web\\\/setting_up_your_server\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot; class=\\&quot;external-link no-image\\&quot;&gt;Allow Apple IP Addresses for Domain Verification&lt;\\\/a&gt;&lt;\\\/li&gt;\\n&lt;li&gt;Include &lt;code&gt;out.adyen.com&lt;\\\/code&gt; in your configuration to allow communication from our network.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;div class=\\&quot;sc-notice info\\&quot;&gt;&lt;div&gt;\\n&lt;p&gt;We do not provide a list of IP addresses for allow-listing, because over time the list may change for various reasons, for example, due to ISP configuration changes.&lt;\\\/p&gt;\\n&lt;p&gt;If you are unable to configure your firewall with a domain allow-list, attempt to resolve our IP addresses by performing a DNS lookup on &lt;code&gt;out.adyen.com&lt;\\\/code&gt;, and then add those IP addresses to your allow-list. Beware that you still run the risk of a disruption if the IP addresses change.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&quot;,&quot;altTitle&quot;:&quot;your-certificate&quot;,&quot;oldTabId&quot;:&quot;your-certificate-live_2&quot;,&quot;relation&quot;:&quot;your-certificate&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2 id=\"see-also\">See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/online-payments\/drop-in-web\"\n                        target=\"_self\"\n                        >\n                    Web Drop-in integration guide\n                <\/a><\/li><li><a href=\"\/online-payments\/tokenization\"\n                        target=\"_self\"\n                        >\n                    Tokenization\n                <\/a><\/li><li><a href=\"\/development-resources\/error-codes#apple-pay-error-codes\"\n                        target=\"_self\"\n                        >\n                    Apple Pay error codes\n                <\/a><\/li><li><a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/latest\/overview\"\n                        target=\"_blank\"\n                         class=\"external\">\n                    API Explorer\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/apple-pay\/web-drop-in","articleFields":{"description":"Add Apple Pay to an existing Drop-in integration.","feedback_component":true,"parameters":{"integration":"Drop-in","platform":"Web","integration_guide_url":"build-your-integration\/sessions-flow?platform=Web&integration=Drop-in","component_name":"Drop-in","component_name_capitalized":"Drop-in","component_class":"ApplePay","payment_method":"Apple Pay","payment_method_type":"applepay","component_js_const":"applePay","instant_payment_method_type":"applepay","integration_type":"web"},"last_edit_on":"17-12-2021 14:23"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/apple-pay\/web-drop-in","title":"Apple Pay Drop-in integration","content":"This page explains how to add Apple Pay to your existing Web Drop-in integration.\nRequirements\nSelect which endpoint you are using:\n\n\n    \n        \n        \n    \n\n\nOffering Apple Pay on web\nWhen offering the option to pay with Apple Pay on web, there are additional things to consider if you use iframe elements. If you want to show Apple Pay on browser other than Safari, see compatibility to learn which devices and operating systems support this feature.\nApple Pay with iFrames\nTo show Apple Pay in an iframe element when the shopper is using Safari as their browser:\n\nFor shoppers on Safari 17 later: add the allow attribute to the iframe to let the iframe communicate correctly with Apple Pay APIs:\n&lt;iframe allow=\"payment\"&gt;\n&lt;\/iframe&gt;\nSafari 17 is available on iOS 17 and later, and macOS 12 and later.\nFor shoppers on Safari 16 or earlier: match the iframe origin and your top-level origin. The protocols, hosts (full domain name), and ports, when specified, must be the same for both pages.\n\nDevice compatibility\nOn v6.10.0 and later versions of Drop-in, you can offer Apple Pay on all supported third-party browsers, platforms, and devices, including Windows and Chromebooks. Shoppers can now initiate Apple Pay payments from any compatible device and complete their payment by scanning a code. See Devices compatible with Apple Pay on Apple Pay documentation.\nOn earlier versions of Drop-in , the support for Apple Pay on third-party browsers differ per shopper device:\n\nMacOS devices: available on Safari.\niOS and iPadOS devices: available on all browsers, including web views.\nNon-Apple devices: not available.\n\nAPI reference\nYou do not need to send additional fields for Apple Pay. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:\n\n \/sessions&#58; This is the default with Drop-in v5.0.0 or later.\n \/payments&#58; If you implemented an additional use case.\n\nIf you run into an error, refer to Handle Apple Pay errors.\nDrop-in configuration\nSelect which endpoint you are using:\n\n\n    \n        \n        \n    \n\n\nOptional configuration\nThis optional configuration parameter is only accepted on the dropin instance.\nInstant payment button configuration\nUse the instantPaymentTypes object to display the Apple Pay payment button at the top of the list of available payment methods. The sample below shows how to do this:\n\n    \n\nOptional Apple Pay configuration\nYou can do the following:\n\nConfigure the appearance of the Apple Pay button.\nInclude additional data such as transaction information, fields for billing and shipping contact information.\nConfigure how to render Apple Pay code.\nAdd logic for specific events on your payment form.\n\nButton configuration\n\n\n\nProperty\nDescription\n\n\n\n\nbuttonType\nThe\u00a0type of button\u00a0you want to show on your payments form.\u00a0Possible values:  - plain: Apple Pay  - buy: Buy with Apple Pay  - donate: Donate with Apple Pay  - check-out: Check out with Apple Pay  - book: Book with Apple Pay  - subscribe: Subscribe with Apple Pay  The following types are supported from Web Components v4.1.0:   - add-money: Add money with Apple Pay   - contribute: Contribute with Apple Pay  - order: Order with Apple Pay  - reload: Reload with Apple Pay  - rent: Rent with Apple Pay  - support: Support with Apple Pay  - tip:Tip with Apple Pay  - top-up: Top Up with Apple Pay\n\n\nbuttonColor\nSpecify the\u00a0color of the button\u00a0you want displayed on the payment form. Possible values:  - black: Black button  - white: White button with no outline  -   white-outline: White button with black outline\n\n\nbuttonLocale\nSpecify the locale to set the language for the Apple Pay button. For possible values, see Apple Pay documentation.\n\n\n\nPayment request data\n\n\n\nPayment request data\nConfiguration object\nDescription\n\n\n\n\nTransaction information\n\n  version\n\nCheck the Apple Pay on the Web documentation for version features and compatibility details.\n\n\n\n\n  totalPriceLabel\n\nString. Description of the line item.\n\n\n\n\n  lineItems\n\nA set of line items that explain recurring payments, additional charges, and discounts. Refer to Apple Pay documentation for sample values.\n\n\n\n\n  merchantCapabilities\n\nPayment capabilities supported by the merchant. Default value is [supports3DS]. Refer to Apple Pay documentation for other options.\n\n\n\n\n  shippingMethods\n\nList of available methods for shipping physical goods. Refer to Apple Pay documentation for sample values.\n\n\n\n\n  shippingType\n\nOptional value that indicates how purchased items are to be shipped. Refer to Apple Pay documentation for available options.\n\n\n\n\n  supportedCountries\n\nSpecify the ISO 3166 country codes if you only support payments from cards issued in specific countries.\n\n\nRequested billing and shipping contact information\n\n  requiredBillingContactFields\n\nThe billing address associated with the shoppers payment method. The only allowed field is postalAddress.\n\n\n\n\n  requiredShippingContactFields\n\nShipping information fields that you require from the shopper to fulfill the order. Use this field to get the shopper's email or phone number from the Apple Pay payment sheet. Refer to Apple Pay documentation for sample values.\n\n\n\n\n  shippingContactEditingMode\n    v6.13.0 or later\nSet to storePickup for in-store or other pickup shipping options to prevent the shopper from editing the shipping address field.\n\n\nKnown contact information\n\n  billingContact\n\nSet an up-to-date billing contact information for the shopper.\n\n\n\n\n  shippingContact\n\nSet an up-to-date shipping contact information for the shopper.\n\n\nCustom data\n\n  applicationData\n\nA Base64-encoded string used to contain your application-specific data. For example, a shopping cart identifier or an order number that you will need to identify this transaction.\n\n\nRecurring payments\n\n  recurringPaymentRequest\n\nRequired for recurring payments. Include to specify that the payment is a recurring payment.\n\n\n\nCode rendering configuration\n\n\n\nProperty\nDescription\n\n\n\n\nrenderApplePayCodeAs\nSpecify whether the Apple Pay code is rendered as a modal, or pop-up window within the page when using Apple Pay in a browser other than Safari.\u00a0Possible values:  - modal: This is the default when the Apple Pay Component is not embedded in an iframe.  - window: This is the default when the Apple Pay Component is embedded in an iframe.\n\n\n\nEvents\nThe following event handlers are supported for Apple Pay. Select the event handler names to see the related Apple Pay documentation.\n\n\n\nEvent\nDescription\n\n\n\n\nonClick(resolve, reject)\nCalled when the shopper clicks the Apple Pay button. Call resolve() to continue or reject() to stop the payment flow.\n\n\nonValidateMerchant(resolve, reject, validationURL)\nRequired if you use your own Apple Pay certificate. Called when the payment sheet is displayed. See Apple Pay documentation for more information.\n\n\nonAuthorized(data, actions)\nCalled after the shopper authorizes the payment with Apple Pay. This contains the raw event from Apple Pay, and the raw event from Apple Pay pre-formatted by our Web SDK. Call actions.resolve() to continue or actions.reject() to stop the payment flow. See Apple Pay documentation for more information.\n\n\nonPaymentMethodSelected(resolve, reject, event)\nCalled when the shopper selects a new payment method. Call resolve() or reject(), passing the \n  ApplePayPaymentMethodUpdate\n object. See Apple Pay documentation for more information.\n\n\nonShippingContactSelected(resolve, reject, event)\nCalled when the shopper selects a shipping contact. Call resolve() or reject(), passing the \n  ApplePayPaymentMethodUpdate\n object. See Apple Pay documentation for more information.\n\n\nonShippingMethodSelected(resolve, reject, event)\nCalled when the shopper selects a shipping method. Call resolve() or reject(), passing the \n  ApplePayPaymentMethodUpdate\n object. See Apple Pay documentation for more information.\n\n\nonApplePayCodeClose\nCalled when the Apple Pay code modal or window closes.\n\n\n\nOptional Apple Pay Wallet Order Tracking\nSupported in v6.0.0 or later.\nYou can use Apple Pay Wallet Order Tracking to give your shopper order tracking through Apple Pay. For more information, refer to the following resources from Apple:\n\nApple Pay Wallet Order Tracking Demo\nApple Pay Tech Talk about implementing Apple Pay with order management\nExample Order Packages\n\n\n\nImplement onOrderTracking:\n\n\n\n\n\nWhen onOrderTracking is called depends on which server-side flow your integration uses.\n\n\n    \n        \n        \n    \n\n\n\n\nFrom your server, get the order details and pass it as orderDetails to your client side.\nIf an error occurs, the Apple Pay payment overlay is closed, and the payment is successfully completed without creating an order in the shopper's Apple Wallet app.\n\n\nOptional Apple Pay capabilities check\nSupported in v6.10.0 or later.\nYou can use the \n  applePayCapabilities\n method to check whether the device supports Apple Pay and if the shopper has an active card in their wallet for web payments. You can then configure when to offer Apple Pay depending on the available payment methods in your shopper's wallet. This is only recommended if you display Apple Pay on the product page.\nTo implement applePayCapabilities:\napplepay.applePayCapabilities().then(capabilities =&gt; {\n  \/\/ Check whether the person has an active payment method in their wallet.\n  switch (capabilities.paymentCredentialStatus) {\n    case \"paymentCredentialsAvailable\":\n      \/\/ Display an Apple Pay button and offer Apple Pay as the primary payment option.\n    case \"paymentCredentialStatusUnknown\":\n      \/\/ Display an Apple Pay button and offer Apple Pay as a payment option.\n    case \"paymentCredentialsUnavailable\":\n      \/\/ Optionally, display an Apple Pay button.\n    case \"applePayUnsupported\":\n      \/\/ Do not show an Apple Pay button or offer Apple Pay.\n  }\n});\nRecurring payments\nApple Pay supports tokenization for recurring transactions on v5.39.0 and later.\n\nWe strongly recommend that you ask explicit permission from the shopper if you intend to make future recurring payments. Being transparent about the payment schedule and the charged amount reduces the risk of chargebacks.\n\nTo enable recurring payments, you must include recurringPaymentRequest when configuring Apple Pay.\n\n\n    \n        \n        \n    \n\n\nFor more context and explanation of parameters, refer to Apple developer documentation.\nTo make recurring payments, refer to Tokenization to:\n\nCreate a token through the initial payment\nUse the token in subsequent payments.\nManage tokens.\n\nTest and go live\nUse Apple's test\u00a0card numbers\u00a0to\u00a0test your integration.\nFor a full list of test cards and instructions how to add these to your test device, see Sandbox testing\u00a0on\u00a0Apple's Developer website.\n \nCheck the status of an Apple Pay test payment in your\u00a0Customer Area\u00a0&gt;\u00a0Transactions\u00a0&gt; \u00a0Payments.\nGoing live\nTo process live Apple Pay payments, your API credential needs to have the API Clientside Encryption Payments role. You can check this in your live Customer Area or ask your Admin user to verify.\n \n\n\n    \n        \n        \n    \n\n\nSee also\n\n\n                    Web Drop-in integration guide\n                \n                    Tokenization\n                \n                    Apple Pay error codes\n                \n                    API Explorer\n                \n","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Apple Pay","lvl3":"Apple Pay Drop-in integration"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/apple-pay","lvl3":"\/pt\/payment-methods\/apple-pay\/web-drop-in"},"levels":4,"category":"Payment method","category_color":"green","tags":["Apple","Drop-in","integration"]},"articleFiles":{"apple-developer-merchantid-domain-association-2024.zip":"<p alt=\"\">apple-developer-merchantid-domain-association-2024.zip<\/p>"}}