{"title":"Google Pay Component","category":"default","creationDate":1567783140,"content":"<p>This page explains how to add Google Pay to your existing Web Components integration.<\/p>\n<p>When shoppers select Google Pay, the Component presents the Google Pay payment sheet where shoppers choose a card they want to use. If shoppers select a card that requires 3D Secure authentication, the Component also handles redirecting shoppers to another website to complete the verification.<\/p>\n<h2>Requirements<\/h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Requirement<\/th>\n<th style=\"text-align: left;\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>Integration type<\/strong><\/td>\n<td style=\"text-align: left;\">Make sure that you have built your <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Components\">Components integration<\/a>.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Setup steps<\/strong><\/td>\n<td style=\"text-align: left;\">Before you begin: <ul><li markdown=\"1\">Follow the <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/guides\/setup\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">setup steps in the Google Pay documentation<\/a>.<\/li> <li markdown=\"1\"><a href=\"\/pt\/payment-methods\/add-payment-methods\">Add Google Pay in your Customer Area<\/a>.<\/li><\/ul>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>API reference<\/h2>\n<p>You do not need to send additional fields for Google 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=Components\">Components 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<h2>Component configuration<\/h2>\n<h3>Step 1: Load the Google Pay API JavaScript library<\/h3>\n<p>We recommend that you preload the Google Pay API JavaScript library, by including the<br \/>\nfollowing script in your checkout page:<\/p>\n<pre><code class=\"language-js\">&lt;script src=\"https:\/\/pay.google.com\/gp\/p\/js\/pay.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>If you are loading the Drop-in inside 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 element<\/a>, 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 render Google Pay. For example:<\/p>\n<pre><code class=\"language-js\">&lt;iframe allow=\"payment\"&gt;\n&lt;\/iframe&gt;<\/code><\/pre>\n<h3>Step 2: Create a DOM element<\/h3>\n<p>Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:<\/p>\n<pre><code class=\"language-html\"> &lt;div id=\"googlepay-container\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<h3>Step 3: Create an instance of the Component<\/h3>\n<p>Select which endpoint you are using:<\/p>\n\n<div id=\"tabzETBW\">\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=Components\\&quot;&gt;Components v5.0.0&lt;\\\/a&gt; or later. &lt;br&gt;&lt;\\\/p&gt;\\n&lt;p&gt;There&#039;s no additional configuration you need to include for Google Pay.&lt;\\\/p&gt;\\n&lt;h4&gt;v6.0.0 or later&lt;\\\/h4&gt;\\n&lt;p&gt;Create an instance of the Component, passing:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Your instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const googlePayComponent = new GooglePay(checkout);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#v5-x-x-or-earlier\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;v5.x.x or earlier&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Use the &lt;code&gt;create&lt;\\\/code&gt; method of your &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; instance, in this case &lt;code&gt;checkout&lt;\\\/code&gt;, to create the Component:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const googlePayComponent = checkout.create(&#039;googlepay&#039;, googlePayConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\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 implemented an &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\&quot;&gt;additional use case&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter name&lt;\\\/th&gt;\\n&lt;th&gt;Required&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;amount.value&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The value of the payment, in &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/currency-codes\\&quot;&gt;minor units&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;amount.currency&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/currency-codes\\&quot;&gt;currency code&lt;\\\/a&gt; of the payment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;countryCode&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The two-letter country code of your merchant account.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;environment&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Set to &lt;strong&gt;production&lt;\\\/strong&gt; when you are ready to accept live payments. The default value is &lt;strong&gt;test&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;authenticationData.threeDSRequestData.nativeThreeDS&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Only required when native 3DS2 applies. Set to &lt;strong&gt;preferred&lt;\\\/strong&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;origin&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Only required when native 3DS2 applies. Set this parameter to the origin URL of the page that you are loading the 3D Secure Component from.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;The following example shows how to configure Components:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Google Pay configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;js\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const googlePayConfiguration = {\\\\n    amount: {\\\\n        value: 1000,\\\\n        currency: \\\\\\&quot;EUR\\\\\\&quot;\\\\n    },\\\\n    countryCode: \\\\\\&quot;NL\\\\\\&quot;,\\\\n    \\\\\\\/\\\\\\\/Set this to production when you are ready to accept live payments\\\\n    environment: \\\\\\&quot;test\\\\\\&quot;\\\\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&lt;h4&gt;v6.0.0 or later&lt;\\\/h4&gt;\\n&lt;p&gt;Create an instance of the Component, passing:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Your instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Optionally, the payment method-specific configuration.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const googlePayComponent = new GooglePay(checkout, googlePayConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#v5-x-x-or-earlier\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;v5.x.x or earlier&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Use the &lt;code&gt;create&lt;\\\/code&gt; method of your &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; instance, in this case &lt;code&gt;checkout&lt;\\\/code&gt;, to create the Component. Pass the configuration object if you created one:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const googlePayComponent = checkout.create(&#039;googlepay&#039;, googlePayConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\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>Step 4: Mount the Component<\/h3>\n<p>Mount the Component only after checking that Google Pay is available to the shopper:<\/p>\n<pre><code class=\"language-js\">googlePayComponent\n   .isAvailable()\n   .then(() =&gt; {\n       googlePayComponent.mount(\"#googlepay-container\");\n   })\n   .catch(e =&gt; {\n       \/\/Google Pay is not available\n   });<\/code><\/pre>\n<h3 id=\"configure\">Optional configuration<\/h3>\n<p>You can configure the following:<\/p>\n<ul>\n<li><a href=\"#merchant-info\">Merchant info<\/a><\/li>\n<li><a href=\"#button-options\">Button options<\/a><\/li>\n<li><a href=\"#payment-data\">Payment data<\/a><\/li>\n<li><a href=\"#card-parameters\">Card parameters<\/a><\/li>\n<li><a href=\"#payment-method-support\">Payment method support<\/a><\/li>\n<li><a href=\"#transaction-info\">Transaction info<\/a><\/li>\n<li><a href=\"#events\">Events<\/a><\/li>\n<\/ul>\n<h4 id=\"merchant-info\">Merchant info<\/h4>\n<p>Configure the merchant name rendered in the payment sheet. See <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#MerchantInfo\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">MerchantInfo<\/a> for more details.<\/p>\n<div class=\"notices blue\">\n<p>Values you set in the <code>configuration<\/code> object will override any Google Pay configuration from your back end.<\/p>\n<\/div>\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>configuration.merchantName<\/code><\/td>\n<td>The merchant name you want displayed in the payment sheet. If specified, you must also specify <code>configuration.merchantId<\/code> and <code>configuration.gatewayMerchantId<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><code>configuration.gatewayMerchantId<\/code><\/td>\n<td>The name of your Adyen merchant or company account. Required if <code>merchantName<\/code> is specified.<\/td>\n<\/tr>\n<tr>\n<td><code>configuration.merchantId<\/code><\/td>\n<td>Your <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#MerchantInfo\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Google Merchant ID<\/a>. Required if <code>merchantName<\/code> is specified. The <code>merchantId<\/code> can be anything for testing. Before you go live, get your Google Merchant ID from the <a href=\"https:\/\/pay.google.com\/business\/console\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Google Pay &amp; Wallet Console<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><code>configuration.authJwt<\/code><\/td>\n<td>Your signed JSON Web Token (JWT). This allows you to use your Google merchant ID with multiple domains. If specified, you must also provide <code>configuration.merchantOrigin<\/code>. <div class=\"sc-notice note\"><div> To be able to use the JSON Web Token, your account must be approved by Google. Ask your Google contact if your business qualifies. <\/div><\/div><\/td>\n<\/tr>\n<tr>\n<td><code>configuration.merchantOrigin<\/code><\/td>\n<td>The domain of the merchant where the request comes from. Required when using <code>configuration.authJwt<\/code>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"button-options\">Button options<\/h4>\n<p>Configure the Google Pay button. See <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#ButtonOptions\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">ButtonOptions<\/a> for more details.<\/p>\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:\/\/developers.google.com\/pay\/api\/web\/reference\/object#ButtonOptions\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">type of button<\/a>\u00a0you want displayed on your payments form.\u00a0<\/td>\n<\/tr>\n<tr>\n<td><code>buttonColor<\/code><\/td>\n<td>The\u00a0<a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/object#ButtonOptions\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">color of the button<\/a>\u00a0you want displayed on the payment form.<\/td>\n<\/tr>\n<tr>\n<td><code>buttonLocale<\/code><\/td>\n<td>The <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#ButtonOptions\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">language on the button<\/a>. Defaults to the <code>locale<\/code> set on the current <code>AdyenCheckout<\/code> instance. <br> Supported from <a href=\"\/pt\/online-payments\/release-notes?integration_type=web&amp;version=4.1.0\">Web Components v4.1.0<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><code>buttonSizeMode<\/code><\/td>\n<td>Specifies whether the button changes to fill the size of its container (the default), or has a static width and height. <br> Supported from <a href=\"\/pt\/online-payments\/release-notes?integration_type=web&amp;version=4.1.0\">Web Components v4.1.0<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"payment-data\">Payment data<\/h4>\n<p>Configure your payment requirements. See <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#PaymentDataRequest\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">PaymentDataRequest<\/a> for more details.<\/p>\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>emailRequired<\/code><\/td>\n<td>Set this to\u00a0<strong>true<\/strong>\u00a0if you want to collect the shopper's email address.<\/td>\n<\/tr>\n<tr>\n<td><code>shippingAddressRequired<\/code><\/td>\n<td>Set to\u00a0<strong>true<\/strong>\u00a0to request the shopper's full shipping address.<\/td>\n<\/tr>\n<tr>\n<td><code>shippingAddressParameters<\/code><\/td>\n<td>Set any\u00a0<a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/object#ShippingAddressParameters\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">shipping restrictions<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><code>shippingOptionRequired<\/code><\/td>\n<td>Set to <strong>true<\/strong> if you want to present shipping options in the payment sheet.<\/td>\n<\/tr>\n<tr>\n<td><code>shippingOptionParameters<\/code><\/td>\n<td>Set <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#ShippingOptionParameters\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">shipping options<\/a> and a default shipping option to be shown in the payment sheet.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"card-parameters\">Card parameters<\/h4>\n<p>Configure accepted card types. See <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#CardParameters\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Card Parameters<\/a> for more details.<\/p>\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>allowedAuthMethods<\/code><\/td>\n<td>Specify supported authentication methods. Default value is <code>['PAN_ONLY', 'CRYPTOGRAM_3DS']<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><code>allowedCardNetworks<\/code><\/td>\n<td>Specify allowed <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#CardParameters\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">card networks<\/a> in capital letters. The allowed networks are automatically configured based on your account settings, but you can override this here.<\/td>\n<\/tr>\n<tr>\n<td><code>allowCreditCards<\/code><\/td>\n<td>Default is <strong>true<\/strong>. Set this to <strong>false<\/strong> if you do not support credit cards.<\/td>\n<\/tr>\n<tr>\n<td><code>allowPrepaidCards<\/code><\/td>\n<td>Default is <strong>true<\/strong>. Set this to <strong>false<\/strong> if you do not support prepaid cards.<\/td>\n<\/tr>\n<tr>\n<td><code>billingAddressRequired<\/code><\/td>\n<td>Set this to <strong>true<\/strong> if you require a billing address.<\/td>\n<\/tr>\n<tr>\n<td><code>billingAddressParameters<\/code><\/td>\n<td>The expected fields returned if <code>billingAddressRequired<\/code> is set to true. For more information on the available fields, see Google Pay API documentation on <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/object#BillingAddressParameters\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">billingAddressParameters<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"payment-method-support\">Payment method support<\/h4>\n<p>Specify which payment methods are supported. See <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#IsReadyToPayRequest\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">IsReadyToPayRequest<\/a> for more details.<\/p>\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>existingPaymentMethodRequired<\/code><\/td>\n<td>Default is <strong>true<\/strong>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"transaction-info\">Transaction info<\/h4>\n<p>Configure the transaction details. See <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#TransactionInfo\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">transaction information<\/a> for more details.<\/p>\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>displayItems<\/code><\/td>\n<td>A list of cart items shown in the payment sheet such as subtotals, sales taxes, shipping charges, or discounts. Required if you implemented support for Google Pay's <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/guides\/tutorial#authorize-payments\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Authorize Payments<\/a> or <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/guides\/tutorial#price-updates\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Dynamic Price Updates<\/a>.<br><br>Authorize Payments also requires that you configure the <code>onAuthorize<\/code> <a href=\"#events\">event handler<\/a>, and Dynamic Price Updates applies only to the <a href=\"\/pt\/payment-methods\/google-pay\/web-component\/express-checkout\/\">express checkout<\/a> flow.<\/td>\n<\/tr>\n<tr>\n<td><code>countryCode<\/code><\/td>\n<td>The <a href=\"https:\/\/en.wikipedia.org\/wiki\/ISO_3166-1_alpha-2\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">ISO 3166-1 alpha-2<\/a> country code where the transaction is processed. Required if you process transactions in European Economic Area (EEA) locations and any other locations (such as the UK) that are subject to <a href=\"\/pt\/online-payments\/psd2-sca-compliance-and-implementation-guide\/\">Strong Customer Authentication<\/a> (SCA). Use this field to specify the country code of the acquiring bank.<\/td>\n<\/tr>\n<tr>\n<td><code>currencyCode<\/code><\/td>\n<td>The <a href=\"https:\/\/en.wikipedia.org\/wiki\/ISO_4217\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">ISO 4217<\/a> alphabetic currency code.<\/td>\n<\/tr>\n<tr>\n<td><code>totalPriceStatus<\/code><\/td>\n<td>The status of the total price used. Possible values: <ul><li markdown=\"1\"><strong>ESTIMATED<\/strong>: Total price might adjust based on the details of the response, such as sales tax collected that's based on a billing address.<\/li><li markdown=\"1\"><strong>FINAL<\/strong>: The total price does not change from the amount presented to the shopper.<\/li><\/ul><\/td>\n<\/tr>\n<tr>\n<td><code>totalPrice<\/code><\/td>\n<td>Total monetary value of the transaction with an optional decimal precision of two decimal places.<\/td>\n<\/tr>\n<tr>\n<td><code>totalPriceLabel<\/code><\/td>\n<td>Custom label for the total price within the display items. Required if <code>displayItems<\/code> are defined.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"events\">Events<\/h4>\n<p>The following event handlers are supported for Google Pay.<\/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 Google Pay button. Call <code>resolve()<\/code> or <code>reject()<\/code> to continue or stop the payment flow.<\/td>\n<\/tr>\n<tr>\n<td><code>onChange(resolve, reject)<\/code> or <code>onSubmit(resolve, reject)<\/code><\/td>\n<td>Called after the shopper approves the payment on the Google Pay form. Call <code>resolve()<\/code> or <code>reject()<\/code> to continue or stop the payment flow. The first parameter (<code>state<\/code>) of this function contains all the necessary data to make a POST  <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> request.<\/td>\n<\/tr>\n<tr>\n<td><code>onAuthorized<\/code><\/td>\n<td>Called after the shopper approves the payment on the Google Pay form. Contains the <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/response-objects#PaymentData\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">full response from Google Pay<\/a>. Use this if you need additional data such as the shipping address or the shopper email.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Example<\/h4>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Example of Google Pay optional configuration'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;const googlePayConfiguration = {\\n  buttonType: 'checkout',\\n  buttonColor: 'white',\\n\\n\\\/\\\/ The 'merchant configuration' can be set, but in the majority of cases you do not have to, because the values are returned by your backend when retrieving the configured payment methods\\n  configuration: {\\n    merchantName: 'Adyen Test merchant',\\n    merchantId: 'adyen.test.merchant',\\n    gatewayMerchantId: 'YOUR_MERCHANT_ACCOUNT_NAME'\\n  },\\n\\n};\\n\\nconst googlePayComponent = checkout.create('googlepay', googlePayConfiguration);&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h2 id=\"recurring-payments\">Recurring payments<\/h2>\n<p>To make recurring Google Pay payments, you first need to <a href=\"\/pt\/online-payments\/tokenization\/create-tokens\">create a shopper token<\/a> and then <a href=\"\/pt\/online-payments\/tokenization\/make-token-payments\">make subsequent recurring transactions<\/a> with the token.<br \/>\nRefer to <a href=\"\/pt\/online-payments\/tokenization\">Tokenization<\/a> for more information and detailed instructions.<\/p>\n<h2 id=\"test-and-go-live\">Test and go live<\/h2>\n<p>To start testing Google Pay, log in to a Google account and create a Google Pay wallet.<\/p>\n<p>There are two approaches to using this wallet for testing:<\/p>\n<ul>\n<li>\n<p><strong>Enroll in test card suite<\/strong><\/p>\n<p>Enroll your wallet in Google's <a href=\"https:\/\/developers.google.com\/pay\/api\/android\/guides\/resources\/test-card-suite\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">test card suite<\/a>. Test card suite pre-populates your wallet with a group of cards to use in the TEST environment. These are related to Adyen's collection of test cards, and cover scenarios including:<\/p>\n<ul>\n<li>Cards stored as FPAN<\/li>\n<li>Cards stored as DPAN (only when testing through native Android and Chrome on Android)<\/li>\n<li>Cards enabled for 3DS2<\/li>\n<\/ul>\n<p>When you start the payment flow and open the list of test cards, each card is marked with the applicable scenario.<\/p>\n<\/li>\n<li>\n<p><strong>Without test card suite<\/strong><\/p>\n<p>You upload real credit cards to your wallet, which are mapped to one of Adyen's <a href=\"\/pt\/development-resources\/test-cards-and-credentials\/test-card-numbers\">test cards<\/a> of the same brand. Your card is not charged.<\/p>\n<p>To test 3D Secure 2, you must use American Express or Discover cards, which trigger 3D Secure 2 challenge flows in the test environment. You cannot use any other card brands.<\/p>\n<\/li>\n<\/ul>\n<p>You can check the status of a Google Pay test payment in your <a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a> &gt; <strong>Transactions<\/strong> &gt; <strong>Payments<\/strong>, whether you used a card from the test card suite or or not. Remember that cards outside the test card suite are mapped to an Adyen test card of the same brand.<\/p>\n<p>For more information, see\u00a0<a href=\"https:\/\/developers.google.com\/pay\/api\/web\/guides\/test-and-deploy\/integration-checklist#about-the-test-environment\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Google Pay's test environment setup for Web<\/a>.<\/p>\n<h3 id=\"before-you-go-live\">Before you go live<\/h3>\n<div class=\"notices green\">\n<p>We recommend that you test the scenarios described in <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/client\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Google Pay\u2019s API reference for web<\/a> in your live environment.<\/p>\n<\/div>\n<ol>\n<li>Make sure that your API credential has the <strong>API Clientside Encryption Payments role<\/strong>. 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.<\/li>\n<li>Go to your <a href=\"https:\/\/ca-live.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">live Customer Area<\/a> to configure your <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#MerchantInfo\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Google Merchant ID<\/a>.<\/li>\n<li>Complete the steps in the Google Pay API <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/guides\/test-and-deploy\/request-prod-access\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">request production access<\/a>.<\/li>\n<li>Complete the steps in the Google Pay API <a href=\"https:\/\/developers.google.com\/pay\/api\/web\/guides\/test-and-deploy\/deploy-production-environment\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">deploy to production documentation for Web<\/a>.<\/li>\n<\/ol>\n<p> <\/p>\n<p>In the live environment, note that Google Pay will only be available if:<\/p>\n<ul>\n<li>The shopper is logged in to their Google account.<\/li>\n<li>The shopper has at least one valid payment method on their Google Pay account.<\/li>\n<\/ul>\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\/components-web\"\n                        target=\"_self\"\n                        >\n                    Web Components integration guide\n                <\/a><\/li><li><a href=\"https:\/\/developers.google.com\/pay\/api\/\"\n                        target=\"_blank\"\n                         class=\"external\">\n                    Google Pay API\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#google-pay-error-codes\"\n                        target=\"_self\"\n                        >\n                    Google 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\/google-pay\/web-component","articleFields":{"description":"Add Google Pay to an existing Components integration.","feedback_component":true,"parameters":{"payment_method":"Google Pay","integration":"Components","platform":"Web","integration_guide_url":"build-your-integration\/sessions-flow?platform=Web&integration=Components","component_name_capitalized":"The Component","component_name":"the Component","payment_method_type":"googlepay","component_class":"GooglePay","component_js_const":"googlePay","link":"https:\/\/developers.google.com\/pay\/api\/web\/guides\/setup","merchant_id":"https:\/\/developers.google.com\/pay\/api\/web\/reference\/request-objects#MerchantInfo"}},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/google-pay\/web-component","title":"Google Pay Component","content":"This page explains how to add Google Pay to your existing Web Components integration.\nWhen shoppers select Google Pay, the Component presents the Google Pay payment sheet where shoppers choose a card they want to use. If shoppers select a card that requires 3D Secure authentication, the Component also handles redirecting shoppers to another website to complete the verification.\nRequirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nMake sure that you have built your Components integration.\n\n\nSetup steps\nBefore you begin: Follow the setup steps in the Google Pay documentation. Add Google Pay in your Customer Area..\n\n\n\nAPI reference\nYou do not need to send additional fields for Google 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 Components v5.0.0 or later.\n \/payments&#58; If you implemented an additional use case.\n\nComponent configuration\nStep 1: Load the Google Pay API JavaScript library\nWe recommend that you preload the Google Pay API JavaScript library, by including the\nfollowing script in your checkout page:\n&lt;script src=\"https:\/\/pay.google.com\/gp\/p\/js\/pay.js\"&gt;&lt;\/script&gt;\nIf you are loading the Drop-in inside an iframe element, add the allow attribute to the iframe to render Google Pay. For example:\n&lt;iframe allow=\"payment\"&gt;\n&lt;\/iframe&gt;\nStep 2: Create a DOM element\nCreate a DOM element on your checkout page, placing it where you want the payment method form to be rendered:\n &lt;div id=\"googlepay-container\"&gt;&lt;\/div&gt;\nStep 3: Create an instance of the Component\nSelect which endpoint you are using:\n\n\n    \n        \n        \n    \n\n\nStep 4: Mount the Component\nMount the Component only after checking that Google Pay is available to the shopper:\ngooglePayComponent\n   .isAvailable()\n   .then(() =&gt; {\n       googlePayComponent.mount(\"#googlepay-container\");\n   })\n   .catch(e =&gt; {\n       \/\/Google Pay is not available\n   });\nOptional configuration\nYou can configure the following:\n\nMerchant info\nButton options\nPayment data\nCard parameters\nPayment method support\nTransaction info\nEvents\n\nMerchant info\nConfigure the merchant name rendered in the payment sheet. See MerchantInfo for more details.\n\nValues you set in the configuration object will override any Google Pay configuration from your back end.\n\n\n\n\nProperty\nDescription\n\n\n\n\nconfiguration.merchantName\nThe merchant name you want displayed in the payment sheet. If specified, you must also specify configuration.merchantId and configuration.gatewayMerchantId.\n\n\nconfiguration.gatewayMerchantId\nThe name of your Adyen merchant or company account. Required if merchantName is specified.\n\n\nconfiguration.merchantId\nYour Google Merchant ID. Required if merchantName is specified. The merchantId can be anything for testing. Before you go live, get your Google Merchant ID from the Google Pay &amp; Wallet Console.\n\n\nconfiguration.authJwt\nYour signed JSON Web Token (JWT). This allows you to use your Google merchant ID with multiple domains. If specified, you must also provide configuration.merchantOrigin.  To be able to use the JSON Web Token, your account must be approved by Google. Ask your Google contact if your business qualifies. \n\n\nconfiguration.merchantOrigin\nThe domain of the merchant where the request comes from. Required when using configuration.authJwt.\n\n\n\nButton options\nConfigure the Google Pay button. See ButtonOptions for more details.\n\n\n\nProperty\nDescription\n\n\n\n\nbuttonType\nThe\u00a0type of button\u00a0you want displayed on your payments form.\u00a0\n\n\nbuttonColor\nThe\u00a0color of the button\u00a0you want displayed on the payment form.\n\n\nbuttonLocale\nThe language on the button. Defaults to the locale set on the current AdyenCheckout instance.  Supported from Web Components v4.1.0.\n\n\nbuttonSizeMode\nSpecifies whether the button changes to fill the size of its container (the default), or has a static width and height.  Supported from Web Components v4.1.0.\n\n\n\nPayment data\nConfigure your payment requirements. See PaymentDataRequest for more details.\n\n\n\nProperty\nDescription\n\n\n\n\nemailRequired\nSet this to\u00a0true\u00a0if you want to collect the shopper's email address.\n\n\nshippingAddressRequired\nSet to\u00a0true\u00a0to request the shopper's full shipping address.\n\n\nshippingAddressParameters\nSet any\u00a0shipping restrictions.\n\n\nshippingOptionRequired\nSet to true if you want to present shipping options in the payment sheet.\n\n\nshippingOptionParameters\nSet shipping options and a default shipping option to be shown in the payment sheet.\n\n\n\nCard parameters\nConfigure accepted card types. See Card Parameters for more details.\n\n\n\nProperty\nDescription\n\n\n\n\nallowedAuthMethods\nSpecify supported authentication methods. Default value is ['PAN_ONLY', 'CRYPTOGRAM_3DS'].\n\n\nallowedCardNetworks\nSpecify allowed card networks in capital letters. The allowed networks are automatically configured based on your account settings, but you can override this here.\n\n\nallowCreditCards\nDefault is true. Set this to false if you do not support credit cards.\n\n\nallowPrepaidCards\nDefault is true. Set this to false if you do not support prepaid cards.\n\n\nbillingAddressRequired\nSet this to true if you require a billing address.\n\n\nbillingAddressParameters\nThe expected fields returned if billingAddressRequired is set to true. For more information on the available fields, see Google Pay API documentation on billingAddressParameters.\n\n\n\nPayment method support\nSpecify which payment methods are supported. See IsReadyToPayRequest for more details.\n\n\n\nProperty\nDescription\n\n\n\n\nexistingPaymentMethodRequired\nDefault is true.\n\n\n\nTransaction info\nConfigure the transaction details. See transaction information for more details.\n\n\n\nProperty\nDescription\n\n\n\n\ndisplayItems\nA list of cart items shown in the payment sheet such as subtotals, sales taxes, shipping charges, or discounts. Required if you implemented support for Google Pay's Authorize Payments or Dynamic Price Updates.Authorize Payments also requires that you configure the onAuthorize event handler, and Dynamic Price Updates applies only to the express checkout flow.\n\n\ncountryCode\nThe ISO 3166-1 alpha-2 country code where the transaction is processed. Required if you process transactions in European Economic Area (EEA) locations and any other locations (such as the UK) that are subject to Strong Customer Authentication (SCA). Use this field to specify the country code of the acquiring bank.\n\n\ncurrencyCode\nThe ISO 4217 alphabetic currency code.\n\n\ntotalPriceStatus\nThe status of the total price used. Possible values: ESTIMATED: Total price might adjust based on the details of the response, such as sales tax collected that's based on a billing address.FINAL: The total price does not change from the amount presented to the shopper.\n\n\ntotalPrice\nTotal monetary value of the transaction with an optional decimal precision of two decimal places.\n\n\ntotalPriceLabel\nCustom label for the total price within the display items. Required if displayItems are defined.\n\n\n\nEvents\nThe following event handlers are supported for Google Pay.\n\n\n\nEvent\nDescription\n\n\n\n\nonClick(resolve, reject)\nCalled when the shopper clicks the Google Pay button. Call resolve() or reject() to continue or stop the payment flow.\n\n\nonChange(resolve, reject) or onSubmit(resolve, reject)\nCalled after the shopper approves the payment on the Google Pay form. Call resolve() or reject() to continue or stop the payment flow. The first parameter (state) of this function contains all the necessary data to make a POST  \/payments request.\n\n\nonAuthorized\nCalled after the shopper approves the payment on the Google Pay form. Contains the full response from Google Pay. Use this if you need additional data such as the shipping address or the shopper email.\n\n\n\nExample\n\n    \n\nRecurring payments\nTo make recurring Google Pay payments, you first need to create a shopper token and then make subsequent recurring transactions with the token.\nRefer to Tokenization for more information and detailed instructions.\nTest and go live\nTo start testing Google Pay, log in to a Google account and create a Google Pay wallet.\nThere are two approaches to using this wallet for testing:\n\n\nEnroll in test card suite\nEnroll your wallet in Google's test card suite. Test card suite pre-populates your wallet with a group of cards to use in the TEST environment. These are related to Adyen's collection of test cards, and cover scenarios including:\n\nCards stored as FPAN\nCards stored as DPAN (only when testing through native Android and Chrome on Android)\nCards enabled for 3DS2\n\nWhen you start the payment flow and open the list of test cards, each card is marked with the applicable scenario.\n\n\nWithout test card suite\nYou upload real credit cards to your wallet, which are mapped to one of Adyen's test cards of the same brand. Your card is not charged.\nTo test 3D Secure 2, you must use American Express or Discover cards, which trigger 3D Secure 2 challenge flows in the test environment. You cannot use any other card brands.\n\n\nYou can check the status of a Google Pay test payment in your Customer Area &gt; Transactions &gt; Payments, whether you used a card from the test card suite or or not. Remember that cards outside the test card suite are mapped to an Adyen test card of the same brand.\nFor more information, see\u00a0Google Pay's test environment setup for Web.\nBefore you go live\n\nWe recommend that you test the scenarios described in Google Pay\u2019s API reference for web in your live environment.\n\n\nMake sure that your API credential has the API Clientside Encryption Payments role. Check this in your live Customer Area or ask your Admin user to verify.\nGo to your live Customer Area to configure your Google Merchant ID.\nComplete the steps in the Google Pay API request production access.\nComplete the steps in the Google Pay API deploy to production documentation for Web.\n\n \nIn the live environment, note that Google Pay will only be available if:\n\nThe shopper is logged in to their Google account.\nThe shopper has at least one valid payment method on their Google Pay account.\n\nSee also\n\n\n                    Web Components integration guide\n                \n                    Google Pay API\n                \n                    Tokenization\n                \n                    Google Pay error codes\n                \n                    API Explorer\n                \n","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Google Pay","lvl3":"Google Pay Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/google-pay","lvl3":"\/pt\/payment-methods\/google-pay\/web-component"},"levels":4,"category":"Payment method","category_color":"green","tags":["Google","Component"]}}