Using Google Pay and ThreeDSecure with the Braintree Drop-in UI returns a CardNonce instead of a GooglePaymentCardNonce. Here's the solution to that
We were recently tasked with implementing a new payment integration using the Braintree Drop-In UI on one of our apps. However, we ran into an issue when requesting ThreeDSecure using Google Pay.
ThreeDSecure provides an additional layer of security for online credit and debit card transactions, an essential protocol if you are processing card payments. Braintree offers an easy way to implement card payments as well as integration with ThreeDSecure. It also offers an equally straightforward way to implement Google Pay.
There are two types of card that can be used with Google Pay, PAN cards (non-network tokenized standard credit cards) and DPAN cards (network tokenized cards that have a generated virtual card with a device-specific account number). ThreeDSecure is not available with DPAN cards as they are considered already secure. However, you will need to implement it when using PAN cards. The Braintree drop-in UI detects the card type and will handle this implementation automatically if it detects a PAN card and you have requested ThreeDSecure. You can do this with the following Kotlin code:
It is highly recommended that you use ThreeDSecure with PAN cards to improve their security.
We opted to go with the scenario where the user explicitly fills out their details (such as email and address) and we can then use this information to authorise the payment. We used this as an opportunity to measure the “quick checkout” conversion rate using Apple Pay on iOS (as Apple Pay does not require ThreeDSecure payments) to see whether moving away from the drop-in UI would be worth it. We anticipate that it will be and are also predicting to see an increased conversion rate.
All in all, the Braintree drop-in UI is extremely simple to use. However, you may have to compromise on the flexibility of the solution. Hopefully, this blog post will help people facing a similar situation and save them time when implementing ThreeDSecure and GooglePay.
Unfortunately, we ran into an issue where the return type after completing a ThreeDSecure whilst using Google Pay. Normally the return type after completing a payment using Google pay without ThreeDSecure is a GooglePaymentCardNonce. This was not as we expected; it was a normal CardNonce when completing a payment using GooglePay and requesting ThreeDSecure. This meant that we lost the billing information that we needed to authorise the purchase.
We contacted Braintree and discovered that it was not currently possible for the drop-in UI to return a GooglePaymentCardNonce after completing ThreeDSecure. We would either have to explicitly get the user to provide their billing details (removing the option of a “quick checkout”) or move to Braintree’s hosted fields (a significant restructuring would be necessary to move away from the drop-in UI).
Search over 300 blog posts from our team
Subscribe to our monthly digest of blogs to stay in the loop and come with us on our journey to make things better!