Search code examples
javascriptpaypalpayment-gatewaygoogle-pay

How to do an Authorize + Capture flow for Google Pay with Paypal?


I'm integrating Google Pay in a simple E-Commerce website. We're using Adyen as the payment gateway.

Everything is working fine if I just pass it an amount, tap "Pay" and the payment is complete.

Now here's the issue: We also need the user's shipping address to calculate the shipping costs. With the simple "just capture" flow we sure get that data, but after the payment was complete. Also, we have to present a summary page before we capture the payment.

So: We need an Authorize + Payment flow, where we get the shipping address after the authorization. Then we calculate the shipping costs and and adjust the actual amount in the capture request later on.

Fair enough. But: I'm using Paypal as a payment method for Google Pay. My understanding is that it generates some kind of a virtual Credit Card so it can be used as one. This is my only option since I don't have a real credit card.

Now, this works great for the "just capture" flow, but as soon as we introduce an Authorization step, it looks like I'm being forced to log into Google and to enter a real Credit Card.

Google provides a way to test with fake Card numbers, but when I turn them on I can't request the shipping address anymore (error OR-ACC-01).

So here is my question: Is it possible to achieve an Authorize + Capture checkout flow with Google Pay when the only payment method connected to Google Pay is Paypal?

Here is a setup with an Authorization step and a required email address and shipping address:

https://jsfiddle.net/0n8tbeu3/2/

with the relevant part being:

paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.emailRequired = true;

I expect it to work with my GPay, but instead I'm forced to enter a new / real Credit Card.

EDIT:

To clear things up, here are some screenshots.

1. No AUTHORIZATION or SHIPPING_METHOD intent.

// paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];

On Mobile: I get the default GPay payment sheet and can complete the payment. (sorry for bad quality, had to take it with my poor webcam since that screen is protected):enter image description here

On Desktop: I can't complete the payment unless I enter a credit card. Paypal is shown as "not available here" (the credit card input form is collapsed and I've reused the screenshot from an attempt with the Authorization intent because the relevant part is exactly the same)

enter image description here

2. WITH AUTHORIZATION and SHIPPING_METHOD intent (the callbacks are of course configured as well).

paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION", "SHIPPING_METHOD"];

I get basically the same screen as above on Mobile and Desktop where it says that Paypal is not available and prompts me for a credit card.


Solution

  • I'm trying to make sure I understand what you are trying to achieve in case it can be solved in another way.

    Are you ultimately after the shipping address to calculate shipping costs? And you want to be able to explicitly authorize the payment before performing the capture. Or are you doing the authorize so that you can receive the shipping address?

    I suggest calculating the shipping costs using dynamic price update. The relevant parts are:

    • callbackIntents = ["SHIPPING_ADDRESS", "SHIPPING_OPTION", ...];, and
    • paymentDataCallbacks: { onPaymentDataChanged }

    To handle authorization, use the PAYMENT_AUTHORIZATION callback as well:

    • callbackIntents = [..., "PAYMENT_AUTHORIZATION"];, and
    • paymentDataCallbacks: { onPaymentAuthorized }

    as soon as we introduce an Authorization step, it looks like I'm being forced to log into Google and to enter a real Credit Card.

    I'm not sure what the deal is here. Are you able to provide some screenshots or a screen recording?