CODEWITHSUNDEEP
google-pay
Dave
Dave

Reputation: 61

CRYPTOGRAM_3DS – Why doesn't it work as the only option?

I'm trying to add Google Pay support to a website where we already have it working for a native app. The in-app implementation does not allow PAN_ONLY cards (due to high chargebacks), only CRYPTOGRAM_3DS. This works just fine.

When I configure the website to only allow CRYPTOGRAM_3DS, I can never get paymentsClient.isReadyToPay() to return true. I've tried different Android devices which are able to make in-app payments with no success. To be clear: If I allow PAN_ONLY then Google Pay works as expected and I can obtain tokens.

How can I troubleshoot the reason why this is happening? Does it work for anyone else if you remove PAN_ONLY from the setup config?

thanks!

Upvotes: 5

Views: 4903

Answers (1)

Soc
Soc

Reputation: 7780

CRYPTOGRAM_3DS refers to tokenized cards. That is, cards that have been added and stored on you Android device. These are the same cards that you can use to pay in-store (not in-app) with Tap and Pay.

If you are using CRYPTOGRAM_3DS only, this means that it will currently only work on a Android device where a user has saved a tokenized card.

I've put the following example together to demonstrate (make sure you test on a Android device with appropriate cards): https://jsfiddle.net/w5ptorbd/

<script src="https://unpkg.com/@google-pay/[email protected]/dist/index.umd.js"></script>

<google-pay-button environment="TEST"></google-pay-button>

const button = document.querySelector('google-pay-button');

button.paymentRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: ['CRYPTOGRAM_3DS'],
        allowedCardNetworks: ['MASTERCARD', 'VISA'],
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId',
        },
      },
    },
  ],
  merchantInfo: {
    merchantId: '12345678901234567890',
    merchantName: 'Demo Merchant',
  },
  transactionInfo: {
    totalPriceStatus: 'FINAL',
    totalPriceLabel: 'Total',
    totalPrice: '100.00',
    currencyCode: 'USD',
    countryCode: 'US',
  },
};

button.addEventListener('loadpaymentdata', event => {
  console.log('load payment data', event.detail);
});

button.addEventListener('readytopaychange', event => {
  console.log('ready to pay change', event.detail);
});

Upvotes: 6

Related Questions