Siga as etapas deste tutorial para integrar um aplicativo da Web com a API Google Pay e configurá-lo para aceitar cartões de pagamento.
- Etapa 1: definir a versão da API Google Pay
- Etapa 2: escolher um método de tokenização de pagamento
- Etapa 3: definir as redes de cartões de pagamento aceitas
- Etapa 4: descrever as formas de pagamento permitidas
- Etapa 5: carregar a biblioteca JavaScript da API Google Pay
- Etapa 6: determinar a disponibilidade para pagar com a API Google Pay
- Etapa 7: adicionar um botão de pagamento do Google Pay
- Etapa 8: criar um objeto PaymentDataRequest
- Etapa 9: registrar o manipulador de eventos para o gesto do usuário.
- Etapa 10 (opcional): fazer uma pré-busca de dados de pagamento antes da interação do usuário
- Etapa 11 (opcional): configurar Autorizar pagamentos
- Etapa 12 (opcional para envio habilitado): configurar atualizações dinâmicas de preços
Etapa 1: definir a versão da API Google Pay
Declare a versão da API Google Pay que o site usa. As versões principal e secundária são obrigatórias nos campos esperados em cada objeto transmitido e incluídas na resposta.
O exemplo de código a seguir mostra as versões da API declaradas:
const baseRequest = { apiVersion: 2, apiVersionMinor: 0 };
Etapa 2: solicitar um token de pagamento para seu provedor
O Google criptografa informações sobre o cartão selecionado de um pagador para garantir o processamento seguro por um provedor de pagamento.
const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } };
Substitua example e exampleGatewayMerchantId
pelos valores apropriados do seu provedor de pagamento. Use a tabela a seguir para encontrar os valores
gateway
e gatewayMerchantId
específicos do seu provedor de pagamento:
Gateway | Parâmetros e documentos |
---|---|
ACI |
"gateway": "aciworldwide" "gatewayMerchantId": "YOUR_ENTITY_ID" |
Adyen |
"gateway": "adyen" "gatewayMerchantId": "YOUR_MERCHANT_ACCOUNT_NAME" |
Alfa-Bank |
"gateway": "alfabank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
AllPayments |
"gateway": "allpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
APPEX |
"gateway": "epos" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Assist |
"gateway": "assist" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Sistemas de faturamento |
"gateway": "billingsystems" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Bizzon |
"gateway": "bizzon" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Blue Media |
"gateway": "bluemedia" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
BlueSnap |
"gateway": "bluesnap" "gatewayMerchantId": "YOUR_shopToken" |
Braintree |
"gateway": "braintree" "braintree:apiVersion": "v1" "braintree:sdkVersion": "braintree.client.VERSION" "braintree:merchantId": "YOUR_BRAINTREE_MERCHANT_ID" "braintree:clientKey": "YOUR_BRAINTREE_TOKENIZATION_KEY" |
Braspag |
"gateway": "cielo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CardConnect |
"gateway": "cardconnect" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Cardknox |
"gateway": "cardknox" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Cathay United Bank |
"gateway": "cathaybk" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Serviços para comerciantes Chase |
"gateway": "chase" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Checkout.com |
"gateway": "checkoutltd" "gatewayMerchantId": "YOUR_PUBLIC_KEY" |
CloudPayments |
"gateway": "cloudpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Computop |
"gateway": "computop" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ConcordPay |
"gateway": "concordpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Corefy |
"gateway": "paycoreio" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Credorax |
"gateway": "credorax" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Cybersource |
"gateway": "cybersource" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Datatrans |
"gateway": "datatrans" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
dLocal |
"gateway": "dlocal" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Dotpay |
"gateway": "dotpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
e-SiTef da Software Express |
"gateway": "softwareexpress" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
EasyPay |
"gateway": "easypay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
EBANX |
"gateway": "ebanx" "gatewayMerchantId": "YOUR_PUBLIC_INTEGRATION_KEY" |
EBANX Pay |
"gateway": "ebanxpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
eCard |
"gateway": "ecard" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ECPay |
"gateway": "ecpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Nenhum documento do desenvolvedor disponível |
eGHL |
"gateway": "eghl" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
eSafe |
"gateway": "esafe" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Nenhum documento do desenvolvedor disponível |
Evopay |
"gateway": "evopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Gateway de pagamento da Evo |
"gateway": "evopaymentgateway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Nenhum documento do desenvolvedor disponível |
Fat Zebra |
"gateway": "fatzebra" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
First Data (Payeezy) |
"gateway": "firstdata" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
FreedomPay |
"gateway": "freedompay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Gestpay |
"gateway": "gestpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Global One Pay |
"gateway": "globalonepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Nenhum documento do desenvolvedor disponível |
Global Payments |
"gateway": "globalpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Gateway de pagamento GMO |
"gateway": "gmopg" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
GoPay |
"gateway": "gopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
GP Webpay |
"gateway": "gpwebpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Nenhum documento do desenvolvedor disponível |
HiTrust |
"gateway": "hitrustpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
IMOJE |
"gateway": "imoje" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
InPlat |
"gateway": "inplat" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
IntellectMoney |
"gateway": "intellectmoney" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
iPay88 |
"gateway": "ipay88" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
iQmetrix |
"gateway": "iqmetrixpaymentservicesgateway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
IXOPAY |
"gateway": "ixopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
JudoPay |
"gateway": "judopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Nenhum documento do desenvolvedor disponível |
Kassa |
"gateway": "kassacom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Kineox |
"gateway": "kineox" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
LiqPay |
"gateway": "liqpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
LogPay |
"gateway": "logpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Lyra |
"gateway": "lyra" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Mastercard Payment Gateway Services |
"gateway": "mpgs" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MOBI.Money |
"gateway": "mobimoney" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Modulbank |
"gateway": "modulbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Molpay |
"gateway": "molpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Nenhum documento do desenvolvedor disponível |
Moneris |
"gateway": "moneris" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Moneta |
"gateway": "moneta" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Nenhum documento do desenvolvedor disponível |
Monext |
"gateway": "monext" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Money.Mail.Ru |
"gateway": "moneymailru" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Multicarta |
"gateway": "mulitcarta" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Mundipagg |
"gateway": "mundipagg" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MyCheck |
"gateway": "mycheck" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MyPay |
"gateway": "mypay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Nenhum documento do desenvolvedor disponível |
Newebpay (antiga STPath, Pay2Go) |
"gateway": "newebpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Nexi |
"gateway": "nexi" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
NMI |
"gateway": "creditcall" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Nuvei |
"gateway": "nuvei" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Onelya |
"gateway": "onelya" "gatewayMerchantId": "YOUR_GATWAY_MERCHANT_ID" |
Payfacto |
"gateway": "payfacto" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
paygent |
"gateway": "paygent" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayLane |
"gateway": "paylane" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payler |
"gateway": "payler" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payload |
"gateway": "payload" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paymark |
"gateway": "paymark" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paymentwall |
"gateway": "paymentwall" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paymo |
"gateway": "paymo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayNearMe |
"gateway": "paynearme" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Pay.nl |
"gateway": "paynl" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayOnline |
"gateway": "payonline" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paysafe |
"gateway": "paysafe" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payture |
"gateway": "payture" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayU |
"gateway": "payu" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payway |
"gateway": "payway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Platon |
"gateway": "platon" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Portmone |
"gateway": "portmonecom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Primer |
"gateway": "primer" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Przelewy24 |
"gateway": "przelewy24" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
QIWI |
"gateway": "qiwi" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Qualpay |
"gateway": "qualpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Radial |
"gateway": "radial" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
RBK.money |
"gateway": "rbkmoney" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Rebilly |
"gateway": "Rebilly" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Redsys |
"gateway": "redsys" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Reepay |
"gateway": "reepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Sberbank |
"gateway": "sberbank" "gatewayMerchantId": "YOUR_ORGANIZATION_NAME" |
Sipay |
"gateway": "sipay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Softbank Payment Service |
"gateway": "sbps" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Solid |
"gateway": "solid" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Sony Payment Services |
"gateway": "sonypaymentservices" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Spreedly |
"gateway": "spreedly" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Square |
"gateway": "square" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Stripe |
"gateway": "stripe" "stripe:version": "2018-10-31" "stripe:publishableKey": "YOUR_PUBLIC_STRIPE_KEY" |
TapPay (Cherri Tech) |
"gateway": "tappay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
TAS Link |
"gateway": "taslink" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Tatra banka (CardPay) |
"gateway": "tatrabanka" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Nenhum documento do desenvolvedor disponível |
Tinkoff |
"gateway": "tinkoff" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
theMAP |
"gateway": "themap" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
TPay.com |
"gateway": "tpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Tranzzo |
"gateway": "tranzzo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
UAPAY |
"gateway": "uapay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Uniteller |
"gateway": "uniteller" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
UPC |
"gateway": "upc" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Vantiv |
"gateway": "vantiv" "vantiv:merchantPayPageId": "YOUR_PAY_PAGE_ID" "vantiv:merchantOrderId": "YOUR_ORDER_ID" "vantiv:merchantTransactionId": "YOUR_TRANSACTION_ID" "vantiv:merchantReportGroup": "*web" |
Veritrans |
"gateway": "veritrans" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Vindicia |
"gateway": "vindicia" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
WayForPay |
"gateway": "wayforpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Windcave |
"gateway": "windcave" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Wirecard |
"gateway": "wirecard" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Worldnet |
"gateway": "worldnet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Worldpay |
"gateway": "worldpay" "gatewayMerchantId": "YOUR_WORLDPAY_MERCHANT_ID" |
Yandex.Checkout |
"gateway": "yandexcheckout" "gatewayMerchantId": "YOUR_SHOP_ID" |
O tipo de tokenização de PAYMENT_GATEWAY
é a implementação de comerciante mais comum
da forma de pagamento com cartão na API Google Pay. Caso seu provedor de pagamento não seja compatível, você
poderá aceitar o Google Pay por meio de uma integração DIRECT. Para mais informações, consulte a
documentação
da tokenização direta.
Etapa 3: definir as redes de cartões de pagamento compatíveis
Defina as redes de cartões aceitas pelo seu site. Veja o exemplo de código a seguir:
const allowedCardNetworks = ["VISA", "ELECTRON", "MASTERCARD", "MAESTRO", "ELO", "ELO_DEBIT"];
A API Google Pay pode retornar cartões registrados em arquivos no Google (PAN_ONLY
) e/ou um
token de dispositivo em um dispositivo Android autenticado com um criptograma 3-D Secure
(CRYPTOGRAM_3DS
). Veja o exemplo de código a seguir:
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
Para mais informações, consulte
CardParameters
na documentação de referência do objeto. Além disso, verifique com o gateway ou processador quais são as
redes de cartões compatíveis e se há suporte para tokens de dispositivos Android.
Etapa 4: descrever as formas de pagamento permitidas
Para descrever as formas de pagamento permitidas, siga estas etapas:
- Combine os métodos de autenticação e as redes de cartões compatíveis para
descrever o suporte do site à forma de pagamento
CARD
. Veja o exemplo de código a seguir:const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } };
- Estenda o objeto da forma de pagamento por cartão base para descrever as informações que precisam ser retornadas
ao aplicativo. Inclua uma descrição dos dados de pagamento tokenizados. Veja o exemplo de código
a seguir:
const cardPaymentMethod = Object.assign( {tokenizationSpecification: tokenizationSpecification}, baseCardPaymentMethod );
Para mais informações sobre parameters
compatível, consulte
CardParameters
.
O Google Pay também oferece suporte ao tipo CARD
e à forma de pagamento
do tipo PAYPAL
. Para mais detalhes sobre como adicionar o tipo PAYPAL
como forma de pagamento
ao Google Pay, consulte a
documentação do desenvolvedor do PayPal.
Etapa 5: carregar a biblioteca JavaScript da API Google Pay
Para carregar a biblioteca JavaScript da API Google Pay, conclua as seguintes etapas:
- Inclua o JavaScript hospedado do Google em sua página. Veja o exemplo de código a seguir:
<script async src="https://pay.google.com/gp/p/js/pay.js" onload="console.log('TODO: add onload function')"> </script>
- Depois que a biblioteca JavaScript da API Google Pay for carregada, inicialize um
objeto
PaymentsClient
. O desenvolvimento inicial usa um ambienteTEST
, que retorna formas de pagamento fictícias adequadas para referenciar a estrutura de uma resposta de pagamento. Nesse ambiente, uma forma de pagamento selecionada não é capaz de uma transação. Veja o exemplo de código a seguir:const paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
Para mais informações sobre os requisitos de um ambiente
PRODUCTION
que retorne formas de pagamento sujeitas à cobrança, consulte a Lista de verificação de integração.
Etapa 6: determinar a disponibilidade para pagar com a API Google Pay
Para determinar a disponibilidade para pagar com a API Google Pay, conclua as seguintes etapas:
- Adicione as formas de pagamento permitidas ao objeto de solicitação base. Veja o exemplo de código
a seguir:
const isReadyToPayRequest = Object.assign({}, baseRequest); isReadyToPayRequest.allowedPaymentMethods = [baseCardPaymentMethod];
- Chame
isReadyToPay()
para determinar se a API Google Pay é compatível com os dispositivo e navegador atuais para as formas de pagamento especificadas. Veja o exemplo de código a seguir:paymentsClient.isReadyToPay(isReadyToPayRequest) .then(function(response) { if (response.result) { // add a Google Pay payment button } }) .catch(function(err) { // show error in developer console for debugging console.error(err); });
Etapa 7: adicionar um botão de pagamento do Google Pay
Adicione um botão de pagamento do Google Pay à sua página para incentivar os compradores a conferir as formas de pagamento compatíveis com a API Google Pay e o seu site. Para mais informações sobre os tipos de botões, cores e requisitos de exibição disponíveis, consulte as diretrizes da promoção de marca.
Veja o seguinte exemplo de código do botão de pagamento:
const button = paymentsClient.createButton({onClick: () => console.log('TODO: click handler')}); document.getElementById('container').appendChild(button);
Etapa 8: criar um objeto PaymentDataRequest
Para criar um objeto PaymentDataRequest
, conclua as seguintes etapas:
- Crie um objeto JavaScript que descreva o suporte do seu site à API Google Pay. Para uma
lista completa das propriedades compatíveis, consulte
PaymentDataRequest
. Veja o exemplo de código a seguir:const paymentDataRequest = Object.assign({}, baseRequest);
- Adicione as formas de pagamento compatíveis com seu aplicativo, como qualquer configuração de outros
dados esperados na resposta. Veja o exemplo de código a seguir:
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
- Defina um preço total e uma moeda para um comprador autorizar. Veja o exemplo de código
a seguir:
paymentDataRequest.transactionInfo = { totalPriceStatus: 'FINAL', totalPrice: '123.45', currencyCode: 'BRL', countryCode: 'BR' };
- Forneça um nome de comerciante visível ao usuário e use nosso valor
TEST
merchantId
quando emTEST
. Para mais detalhes e informações sobre quando substituir o valorTEST
merchantId
, consulteMerchantInfo
. Veja o seguinte exemplo de código de um nome de comerciante visível ao usuário:paymentDataRequest.merchantInfo = { merchantName: 'Example Merchant' merchantId: '12345678901234567890' };
Etapa 9: registrar o manipulador de eventos para gestos do usuário
Para registrar um manipulador de eventos para gestos do usuário, conclua as seguintes etapas:
- Registre um manipulador de eventos de clique para o botão de compra. O manipulador de eventos chama
loadPaymentData()
imediatamente após interagir com o botão de pagamento do Google Pay. - Processe a resposta da API Google Pay depois que um usuário do Google conceder permissão para que seu site receba informações sobre a forma de pagamento e dados de contato opcionais do usuário.
- Extraia o token de pagamento da resposta
paymentData
. Se você implementar uma integração de gateway, passe esse token para o gateway sem nenhuma modificação.paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData){ // if using gateway tokenization, pass this token without modification paymentToken = paymentData.paymentMethodData.tokenizationData.token; }).catch(function(err){ // show error in developer console for debugging console.error(err); });
Etapa 10 (opcional): fazer uma pré-busca de dados de pagamento antes da interação do usuário
Para melhorar o tempo de execução, faça uma pré-busca da configuração de pagamento do seu site na API Google Pay
antes de chamar loadPaymentData()
. Veja o exemplo a seguir:
paymentsClient.prefetchPaymentData(paymentDataRequest);
Etapa 11 (opcional): configurar Autorizar pagamentos
A opção Autorizar pagamentos é usada para iniciar o processo de pagamento e confirmar o status de autorização de um pagamento. Para configurá-la, siga os passos abaixo:
- Registre um callback
onPaymentAuthorized()
emPaymentOptions
. - Chame a função
loadPaymentData()
com o intent de callbackPAYMENT_AUTHORIZATION
. - Implemente
onPaymentAuthorized()
.
Registrar-se nos callbacks onPaymentAuthorized
O exemplo de código a seguir mostra como registrar callbacks onPaymentAuthorized
:
{ environment: "TEST", merchantInfo: { merchantName: "Example Merchant", merchantId: "12345678901234567890" }, paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized } }
Carregar dados de pagamento com intents de callback
O exemplo de código a seguir mostra como inicializar a planilha de pagamento com Autorizar pagamentos:
const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { merchantName: 'Example Merchant' merchantId: '12345678901234567890', }; paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
Processar callbacks onPaymentAuthorized
O callback onPaymentAuthorized()
é invocado pelo Google
com um objeto PaymentData
depois que um pagador aprova o pagamento por meio de um gesto do usuário, como se ele clicasse em Pagar.
O callback retorna um valor Promise<PaymentAuthorizationResult>
. O objeto PaymentAuthorizationResult
tem um status de estado de transação SUCCESS
ou ERROR
. Após a conclusão, a página de pagamento será fechada. Se ocorrer um erro, a página de pagamento processará os detalhes do erro retornados após o processamento do pagamento. O usuário pode alterar os dados do pagamento da
página de pagamento e autorizá-lo novamente. Veja o exemplo de código a seguir:
function onPaymentAuthorized(paymentData) { return new Promise(function(resolve, reject){ // handle the response processPayment(paymentData) .then(function() { resolve({transactionState: 'SUCCESS'}); }) .catch(function() { resolve({ transactionState: 'ERROR', error: { intent: 'PAYMENT_AUTHORIZATION', message: 'Insufficient funds', reason: 'PAYMENT_DATA_INVALID' } }); }); }); }
Etapa 12 (opcional para envio habilitado): configurar Atualizações dinâmicas de preços
As atualizações dinâmicas de preços permitem que o comerciante atualize de maneira dinâmica as opções de envio e as informações da transação de acordo com o endereço de entrega escolhido. Além disso, é possível atualizar de maneira dinâmica as informações da transação de acordo com a opção de envio escolhida.
Para configurar as atualizações dinâmicas de preços, siga as etapas abaixo:
- Registre os
callbacks
onPaymentAuthorized
eonPaymentDataChanged
emPaymentOptions
. - Chame a função
loadPaymentData()
com intents de callback. Para detalhes, consulte o exemplo correspondente. - Implemente
onPaymentAuthorized
eonPaymentDataChanged
.
Registrar o callback PaymentData
O exemplo de código a seguir mostra que as Atualizações dinâmicas de preços exigem que as funções de callback sejam
registradas no objeto
PaymentsClient
paymentOptions
.
{ environment: "TEST", merchantInfo: { merchantName: "Example Merchant", merchantId: "12345678901234567890" }, paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized, onPaymentDataChanged: onPaymentDataChanged } }
Carregar dados de pagamento com intents de callback
No exemplo de código a seguir, mostramos como uma página de pagamento será inicializada com a configuração de opções de envio e endereço de entrega obrigatórios:
const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { merchantId: '12345678901234567890', merchantName: 'Example Merchant' }; paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS", "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"]; paymentDataRequest.shippingAddressRequired = true; paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters(); paymentDataRequest.shippingOptionRequired = true;
Processar o callback onPaymentDataChanged
O callback onPaymentDataChanged
é invocado com um objeto
IntermediatePaymentData
,
que inclui o endereço e a opção de envio selecionados na página de pagamento.
O callback retorna um Promise<PaymentDataRequestUpdate>
. O objeto PaymentDataRequestUpdate
tem novas informações de transação, opções de envio e um erro de dados de pagamento. Esses dados atualizam a página de pagamento.
Use a página de pagamento para processar diretamente todos os casos de exceção, como um
endereço de entrega não utilizável ou uma opção de envio inválida. Configure um objeto PaymentDataError
para destacar o motivo do erro com uma mensagem de erro para o usuário. Lembre-se de incluir na mensagem o intent relacionado. Para detalhes sobre como configurar o objeto e a mensagem, consulte o exemplo de código a seguir:
function onPaymentDataChanged(intermediatePaymentData) { return new Promise(function(resolve, reject) { let shippingAddress = intermediatePaymentData.shippingAddress; let shippingOptionData = intermediatePaymentData.shippingOptionData; let paymentDataRequestUpdate = {}; if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") { if(shippingAddress.administrativeArea == "NJ") { paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError(); } else { paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions(); let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId; paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId); } } else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") { paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id); } resolve(paymentDataRequestUpdate); }); }
Resumir
Os blocos de código de exemplo nesta seção mostram um exemplo completo do tutorial da biblioteca JavaScript da API Google Pay, a opção Autorizar pagamentos e atualizações dinâmicas de preços.
Tutorial
<div id="container"></div>
<script>/** * Define the version of the Google Pay API referenced when creating your * configuration * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest} */ const baseRequest = { apiVersion: 2, apiVersionMinor: 0 }; /** * Card networks supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm card networks supported by your site and gateway */ const allowedCardNetworks = ["VISA", "ELECTRON", "MASTERCARD", "MAESTRO", "ELO", "ELO_DEBIT"]; /** * Card authentication methods supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm your processor supports Android device tokens for your * supported card networks */ const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"]; /** * Identify your gateway and your site's gateway merchant identifier * * The Google Pay API response will return an encrypted payment method capable * of being charged by a supported gateway after payer authorization * * @todo check with your gateway on the parameters to pass * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification} */ const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } }; /** * Describe your site's support for the CARD payment method and its required * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } }; /** * Describe your site's support for the CARD payment method including optional * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const cardPaymentMethod = Object.assign( {}, baseCardPaymentMethod, { tokenizationSpecification: tokenizationSpecification } ); /** * An initialized google.payments.api.PaymentsClient object or null if not yet set * * @see {@link getGooglePaymentsClient} */ let paymentsClient = null; /** * Configure your site's support for payment methods supported by the Google Pay * API. * * Each member of allowedPaymentMethods should contain only the required fields, * allowing reuse of this base request when determining a viewer's ability * to pay and later requesting a supported payment method * * @returns {object} Google Pay API version, payment methods supported by the site */ function getGoogleIsReadyToPayRequest() { return Object.assign( {}, baseRequest, { allowedPaymentMethods: [baseCardPaymentMethod] } ); } /** * Configure support for the Google Pay API * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest} * @returns {object} PaymentDataRequest fields */ function getGooglePaymentDataRequest() { const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { // @todo a merchant ID is available for a production environment after approval by Google // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist} // merchantId: '12345678901234567890', merchantName: 'Example Merchant' }; return paymentDataRequest; } /** * Return an active PaymentsClient or initialize * * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor} * @returns {google.payments.api.PaymentsClient} Google Pay API client */ function getGooglePaymentsClient() { if ( paymentsClient === null ) { paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'}); } return paymentsClient; } /** * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded * * Display a Google Pay payment button after confirmation of the viewer's * ability to pay. */ function onGooglePayLoaded() { const paymentsClient = getGooglePaymentsClient(); paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest()) .then(function(response) { if (response.result) { addGooglePayButton(); // @todo prefetch payment data to improve performance after confirming site functionality // prefetchGooglePaymentData(); } }) .catch(function(err) { // show error in developer console for debugging console.error(err); }); } /** * Add a Google Pay purchase button alongside an existing checkout button * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options} * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines} */ function addGooglePayButton() { const paymentsClient = getGooglePaymentsClient(); const button = paymentsClient.createButton({onClick: onGooglePaymentButtonClicked}); document.getElementById('container').appendChild(button); } /** * Provide Google Pay API with a payment amount, currency, and amount status * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest */ function getGoogleTransactionInfo() { return { countryCode: 'BR', currencyCode: 'BRL', totalPriceStatus: 'FINAL', // set to cart total totalPrice: '1.00' }; } /** * Prefetch payment data to improve performance * * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()} */ function prefetchGooglePaymentData() { const paymentDataRequest = getGooglePaymentDataRequest(); // transactionInfo must be set but does not affect cache paymentDataRequest.transactionInfo = { totalPriceStatus: 'NOT_CURRENTLY_KNOWN', currencyCode: 'BRL' }; const paymentsClient = getGooglePaymentsClient(); paymentsClient.prefetchPaymentData(paymentDataRequest); } /** * Show Google Pay payment sheet when Google Pay payment button is clicked */ function onGooglePaymentButtonClicked() { const paymentDataRequest = getGooglePaymentDataRequest(); paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); const paymentsClient = getGooglePaymentsClient(); paymentsClient.loadPaymentData(paymentDataRequest) .then(function(paymentData) { // handle the response processPayment(paymentData); }) .catch(function(err) { // show error in developer console for debugging console.error(err); }); } /** * Process payment data returned by the Google Pay API * * @param {object} paymentData response from Google Pay API after user approves payment * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference} */ function processPayment(paymentData) { // show returned data in developer console for debugging console.log(paymentData); // @todo pass payment token to your gateway to process payment paymentToken = paymentData.paymentMethodData.tokenizationData.token; }
</script><script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>
Autorizar pagamentos
<div id="container"></div>
<script>/** * Define the version of the Google Pay API referenced when creating your * configuration * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest} */ const baseRequest = { apiVersion: 2, apiVersionMinor: 0 }; /** * Card networks supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm card networks supported by your site and gateway */ const allowedCardNetworks = ["VISA", "ELECTRON", "MASTERCARD", "MAESTRO", "ELO", "ELO_DEBIT"]; /** * Card authentication methods supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm your processor supports Android device tokens for your * supported card networks */ const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"]; /** * Identify your gateway and your site's gateway merchant identifier * * The Google Pay API response will return an encrypted payment method capable * of being charged by a supported gateway after payer authorization * * @todo check with your gateway on the parameters to pass * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification} */ const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } }; /** * Describe your site's support for the CARD payment method and its required * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } }; /** * Describe your site's support for the CARD payment method including optional * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const cardPaymentMethod = Object.assign( {}, baseCardPaymentMethod, { tokenizationSpecification: tokenizationSpecification } ); /** * An initialized google.payments.api.PaymentsClient object or null if not yet set * * @see {@link getGooglePaymentsClient} */ let paymentsClient = null; /** * Configure your site's support for payment methods supported by the Google Pay * API. * * Each member of allowedPaymentMethods should contain only the required fields, * allowing reuse of this base request when determining a viewer's ability * to pay and later requesting a supported payment method * * @returns {object} Google Pay API version, payment methods supported by the site */ function getGoogleIsReadyToPayRequest() { return Object.assign( {}, baseRequest, { allowedPaymentMethods: [baseCardPaymentMethod] } ); } /** * Configure support for the Google Pay API * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest} * @returns {object} PaymentDataRequest fields */ function getGooglePaymentDataRequest() { const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { // @todo a merchant ID is available for a production environment after approval by Google // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist} // merchantId: '12345678901234567890', merchantName: 'Example Merchant' }; paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"]; return paymentDataRequest; } /** * Return an active PaymentsClient or initialize * * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor} * @returns {google.payments.api.PaymentsClient} Google Pay API client */ function getGooglePaymentsClient() { if ( paymentsClient === null ) { paymentsClient = new google.payments.api.PaymentsClient({ environment: 'TEST', paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized } }); } return paymentsClient; } /** * Handles authorize payments callback intents. * * @param {object} paymentData response from Google Pay API after a payer approves payment through user gesture. * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData object reference} * * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentAuthorizationResult} * @returns Promise<{object}> Promise of PaymentAuthorizationResult object to acknowledge the payment authorization status. */ function onPaymentAuthorized(paymentData) { return new Promise(function(resolve, reject){ // handle the response processPayment(paymentData) .then(function() { resolve({transactionState: 'SUCCESS'}); }) .catch(function() { resolve({ transactionState: 'ERROR', error: { intent: 'PAYMENT_AUTHORIZATION', message: 'Insufficient funds', reason: 'PAYMENT_DATA_INVALID' } }); }); }); } /** * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded * * Display a Google Pay payment button after confirmation of the viewer's * ability to pay. */ function onGooglePayLoaded() { const paymentsClient = getGooglePaymentsClient(); paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest()) .then(function(response) { if (response.result) { addGooglePayButton(); } }) .catch(function(err) { // show error in developer console for debugging console.error(err); }); } /** * Add a Google Pay purchase button alongside an existing checkout button * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options} * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines} */ function addGooglePayButton() { const paymentsClient = getGooglePaymentsClient(); const button = paymentsClient.createButton({onClick: onGooglePaymentButtonClicked}); document.getElementById('container').appendChild(button); } /** * Provide Google Pay API with a payment amount, currency, and amount status * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest */ function getGoogleTransactionInfo() { return { displayItems: [ { label: "Subtotal", type: "SUBTOTAL", price: "11.00", }, { label: "Tax", type: "TAX", price: "1.00", } ], countryCode: 'BR', currencyCode: "USD", totalPriceStatus: "FINAL", totalPrice: "12.00", totalPriceLabel: "Total" }; } /** * Show Google Pay payment sheet when Google Pay payment button is clicked */ function onGooglePaymentButtonClicked() { const paymentDataRequest = getGooglePaymentDataRequest(); paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); const paymentsClient = getGooglePaymentsClient(); paymentsClient.loadPaymentData(paymentDataRequest); } /** * Process payment data returned by the Google Pay API * * @param {object} paymentData response from Google Pay API after user approves payment * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference} */ function processPayment(paymentData) { return new Promise(function(resolve, reject) { setTimeout(function() { // @todo pass payment token to your gateway to process payment paymentToken = paymentData.paymentMethodData.tokenizationData.token; resolve({}); }, 3000); }); }
</script><script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>
Atualizações dinâmicas de preço
<div id="container"></div>
<script>/** * Define the version of the Google Pay API referenced when creating your * configuration * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest} */ const baseRequest = { apiVersion: 2, apiVersionMinor: 0 }; /** * Card networks supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm card networks supported by your site and gateway */ const allowedCardNetworks = ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]; /** * Card authentication methods supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm your processor supports Android device tokens for your * supported card networks */ const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"]; /** * Identify your gateway and your site's gateway merchant identifier * * The Google Pay API response will return an encrypted payment method capable * of being charged by a supported gateway after payer authorization * * @todo check with your gateway on the parameters to pass * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification} */ const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } }; /** * Describe your site's support for the CARD payment method and its required * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } }; /** * Describe your site's support for the CARD payment method including optional * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const cardPaymentMethod = Object.assign( {}, baseCardPaymentMethod, { tokenizationSpecification: tokenizationSpecification } ); /** * An initialized google.payments.api.PaymentsClient object or null if not yet set * * @see {@link getGooglePaymentsClient} */ let paymentsClient = null; /** * Configure your site's support for payment methods supported by the Google Pay * API. * * Each member of allowedPaymentMethods should contain only the required fields, * allowing reuse of this base request when determining a viewer's ability * to pay and later requesting a supported payment method * * @returns {object} Google Pay API version, payment methods supported by the site */ function getGoogleIsReadyToPayRequest() { return Object.assign( {}, baseRequest, { allowedPaymentMethods: [baseCardPaymentMethod] } ); } /** * Configure support for the Google Pay API * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest} * @returns {object} PaymentDataRequest fields */ function getGooglePaymentDataRequest() { const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { // @todo a merchant ID is available for a production environment after approval by Google // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist} // merchantId: '12345678901234567890', merchantName: 'Example Merchant' }; paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS", "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"]; paymentDataRequest.shippingAddressRequired = true; paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters(); paymentDataRequest.shippingOptionRequired = true; return paymentDataRequest; } /** * Return an active PaymentsClient or initialize * * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor} * @returns {google.payments.api.PaymentsClient} Google Pay API client */ function getGooglePaymentsClient() { if ( paymentsClient === null ) { paymentsClient = new google.payments.api.PaymentsClient({ environment: "TEST", merchantInfo: { merchantName: "Example Merchant", merchantId: "01234567890123456789" }, paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized, onPaymentDataChanged: onPaymentDataChanged } }); } return paymentsClient; } function onPaymentAuthorized(paymentData) { return new Promise(function(resolve, reject){ // handle the response processPayment(paymentData) .then(function() { resolve({transactionState: 'SUCCESS'}); }) .catch(function() { resolve({ transactionState: 'ERROR', error: { intent: 'PAYMENT_AUTHORIZATION', message: 'Insufficient funds', reason: 'PAYMENT_DATA_INVALID' } }); }); }); } /** * Handles dynamic buy flow shipping address and shipping options callback intents. * * @param {object} itermediatePaymentData response from Google Pay API a shipping address or shipping option is selected in the payment sheet. * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#IntermediatePaymentData|IntermediatePaymentData object reference} * * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate} * @returns Promise<{object}> Promise of PaymentDataRequestUpdate object to update the payment sheet. */ function onPaymentDataChanged(intermediatePaymentData) { return new Promise(function(resolve, reject) { let shippingAddress = intermediatePaymentData.shippingAddress; let shippingOptionData = intermediatePaymentData.shippingOptionData; let paymentDataRequestUpdate = {}; if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") { if(shippingAddress.administrativeArea == "NJ") { paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError(); } else { paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions(); let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId; paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId); } } else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") { paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id); } resolve(paymentDataRequestUpdate); }); } /** * Helper function to create a new TransactionInfo object. * @param string shippingOptionId respresenting the selected shipping option in the payment sheet. * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest */ function calculateNewTransactionInfo(shippingOptionId) { let newTransactionInfo = getGoogleTransactionInfo(); let shippingCost = getShippingCosts()[shippingOptionId]; newTransactionInfo.displayItems.push({ type: "LINE_ITEM", label: "Shipping cost", price: shippingCost, status: "FINAL" }); let totalPrice = 0.00; newTransactionInfo.displayItems.forEach(displayItem => totalPrice += parseFloat(displayItem.price)); newTransactionInfo.totalPrice = totalPrice.toString(); return newTransactionInfo; } /** * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded * * Display a Google Pay payment button after confirmation of the viewer's * ability to pay. */ function onGooglePayLoaded() { const paymentsClient = getGooglePaymentsClient(); paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest()) .then(function(response) { if (response.result) { addGooglePayButton(); // @todo prefetch payment data to improve performance after confirming site functionality // prefetchGooglePaymentData(); } }) .catch(function(err) { // show error in developer console for debugging console.error(err); }); } /** * Add a Google Pay purchase button alongside an existing checkout button * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options} * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines} */ function addGooglePayButton() { const paymentsClient = getGooglePaymentsClient(); const button = paymentsClient.createButton({onClick: onGooglePaymentButtonClicked}); document.getElementById('container').appendChild(button); } /** * Provide Google Pay API with a payment amount, currency, and amount status * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest */ function getGoogleTransactionInfo() { return { displayItems: [ { label: "Subtotal", type: "SUBTOTAL", price: "11.00", }, { label: "Tax", type: "TAX", price: "1.00", } ], countryCode: 'BR', currencyCode: "USD", totalPriceStatus: "FINAL", totalPrice: "12.00", totalPriceLabel: "Total" }; } /** * Provide a key value store for shippping options. */ function getShippingCosts() { return { "shipping-001": "0.00", "shipping-002": "1.99", "shipping-003": "10.00" } } /** * Provide Google Pay API with shipping address parameters when using dynamic buy flow. * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingAddressParameters|ShippingAddressParameters} * @returns {object} shipping address details, suitable for use as shippingAddressParameters property of PaymentDataRequest */ function getGoogleShippingAddressParameters() { return { allowedCountryCodes: ['US'], phoneNumberRequired: true }; } /** * Provide Google Pay API with shipping options and a default selected shipping option. * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingOptionParameters|ShippingOptionParameters} * @returns {object} shipping option parameters, suitable for use as shippingOptionParameters property of PaymentDataRequest */ function getGoogleDefaultShippingOptions() { return { defaultSelectedOptionId: "shipping-001", shippingOptions: [ { "id": "shipping-001", "label": "Free: Standard shipping", "description": "Free Shipping delivered in 5 business days." }, { "id": "shipping-002", "label": "$1.99: Standard shipping", "description": "Standard shipping delivered in 3 business days." }, { "id": "shipping-003", "label": "$10: Express shipping", "description": "Express shipping delivered in 1 business day." }, ] }; } /** * Provide Google Pay API with a payment data error. * * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataError|PaymentDataError} * @returns {object} payment data error, suitable for use as error property of PaymentDataRequestUpdate */ function getGoogleUnserviceableAddressError() { return { reason: "SHIPPING_ADDRESS_UNSERVICEABLE", message: "Cannot ship to the selected address", intent: "SHIPPING_ADDRESS" }; } /** * Prefetch payment data to improve performance * * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()} */ function prefetchGooglePaymentData() { const paymentDataRequest = getGooglePaymentDataRequest(); // transactionInfo must be set but does not affect cache paymentDataRequest.transactionInfo = { totalPriceStatus: 'NOT_CURRENTLY_KNOWN', currencyCode: 'BRL' }; const paymentsClient = getGooglePaymentsClient(); paymentsClient.prefetchPaymentData(paymentDataRequest); } /** * Show Google Pay payment sheet when Google Pay payment button is clicked */ function onGooglePaymentButtonClicked() { const paymentDataRequest = getGooglePaymentDataRequest(); paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); const paymentsClient = getGooglePaymentsClient(); paymentsClient.loadPaymentData(paymentDataRequest); } /** * Process payment data returned by the Google Pay API * * @param {object} paymentData response from Google Pay API after user approves payment * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference} */ function processPayment(paymentData) { return new Promise(function(resolve, reject) { setTimeout(function() { // show returned data in developer console for debugging console.log(paymentData); // @todo pass payment token to your gateway to process payment paymentToken = paymentData.paymentMethodData.tokenizationData.token; resolve({}); }, 3000); }); }
</script><script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>