How to get user filled details from Stripe Google pay on successful payment

Question

I am using the Stripe Google Pay button element. When user click the button, Google Pay sheet pop-up appears with a form. The user fills in their mobile number, shipping address (or select if already available in their browser), and then on basis of their shipping address (postalCode) I update the shipping amount and update the total payable amount. After user click the Pay button, the payment is processed successfully. So, in short, everything is working fine.

My question is how can I get the Gpay form's values such shipping address, mobile number that user have just filled before clicking the pay button. I need those details so that I can create a new order record in my database with user details.

<script>
            var stripe = Stripe('pk_test_51KflooCipcb7UHWlf6LhOWSy.....QSm1PE9HvJ005P6i5YbD', {
              apiVersion: "2020-08-27",
            });
            
            //Payment Request
            var paymentRequest = stripe.paymentRequest({
              country: 'GB',
              currency: 'gbp',
              total: {
                label: 'Total Amount',
                amount: 0,
              },
              requestPayerName: true,
              requestPayerPhone: true,
              requestPayerEmail: true,
              requestShipping: true,
            });
....
....
</script>

You can see in above form -

requestPayerName: true, requestPayerPhone: true, requestPayerEmail: true, requestShipping: true,

I need those fields' values after payment is success. Please suggest. I am struggling for the past two days.

Answer 1

Those fields will show up in the PaymentResponse object. You can access the PaymentResponse object by listening to the token event, which will be fired after the customer is done interacting with the browser’s payment interface.