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

Question

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!

Answer 1

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/button-element#2.x/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);
});