Integrate Google Pay with JS SDK for direct merchants

1import * as PayPal from "./paypal-api.js";
2
3/* Create Order route Handler */
4app.post("/api/orders", async (req, res) => {
5  const order = await PayPal.createOrder();
6  res.json(order);
7});
8
9/* Capture Order route Handler */
10app.post("/api/orders/:orderID/capture", async (req, res) => {
11  const {
12    orderID
13  } = req.params;
14  const captureData = await PayPal.capturePayment(orderID);
15  res.json(captureData);
16});

1<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD&buyer-country=US&merchant-id=SUB_MERCHANT_ID&components=googlepay"></script>

1<script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>

1/**
2 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
3 *
4 * Display a Google Pay payment button after confirmation of the viewer's
5 * ability to pay.
6 */
7function onGooglePayLoaded() {
8  const paymentsClient = getGooglePaymentsClient();
9  paymentsClient.isReadyToPay(isReadyToPayRequest)
10      .then(function(response) {
11        if (response.result) {
12          addGooglePayButton();
13        }
14      })
15      .catch(function(err) {
16        console.error(err);
17      });
18}
19/**
20 * Add a Google Pay purchase button
21 */
22function addGooglePayButton() {
23  const paymentsClient = getGooglePaymentsClient();
24  const button =
25      paymentsClient.createButton({
26        onClick: onGooglePaymentButtonClicked /* To be defined later */,
27        allowedPaymentMethods: [baseCardPaymentMethod]
28      });
29  document.getElementById('container').appendChild(button);
30}

1/* Note: the `googlePayConfig` object in this request is the response from `paypal.Googlepay().config()` */
2async function getGooglePaymentDataRequest() {
3  const googlePayConfig = await paypal.Googlepay().config();
4  const paymentDataRequest = Object.assign({}, baseRequest);
5  paymentDataRequest.allowedPaymentMethods = googlePayConfig.allowedPaymentMethods;
6  // Uncomment for Japan integrations only
7  // paymentDataRequest.allowedPaymentMethods[0].parameters.allowedAuthMethods = ['PAN_ONLY'];
8  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
9  paymentDataRequest.merchantInfo = googlePayConfig.merchantInfo;
10  paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
11  return paymentDataRequest;
12}
13function getGoogleTransactionInfo(){
14    return {
15        currencyCode: 'USD',
16        totalPriceStatus: 'FINAL',
17        totalPrice: '100.00' // Your amount
18      }
19}

1/* Show Google Pay payment sheet when Google Pay payment button is clicked */
2async function onGooglePaymentButtonClicked() {
3  const paymentDataRequest = await getGooglePaymentDataRequest();
4  const paymentsClient = getGooglePaymentsClient();
5  paymentsClient.loadPaymentData(paymentDataRequest);
6}

1async function processPayment(paymentData) {
2  return new Promise(async function (resolve, reject) {
3    try {
4        // Create the order on your server
5        const {id} = await fetch(`/orders`, {
6        method: "POST",
7        body:
8        // You can use the "body" parameter to pass optional, additional order information, such as:
9        // amount, and amount breakdown elements like tax, shipping, and handling
10        // item data, such as sku, name, unit_amount, and quantity
11        // shipping information, like name, address, and address type
12      });
13      const confirmOrderResponse = await paypal.Googlepay().confirmOrder({
14          orderId: id,
15          paymentMethodData: paymentData.paymentMethodData
16        });
17      /** Capture the Order on your Server  */
18      if(confirmOrderResponse.status === "APPROVED"){
19           const response =  await fetch(`/capture/${id}`, {
20              method: 'POST',
21            }).then(res => res.json());
22          if(response.capture.status === "COMPLETED")
23              resolve({transactionState: 'SUCCESS'});
24          else
25              resolve({
26                transactionState: 'ERROR',
27                error: {
28                  intent: 'PAYMENT_AUTHORIZATION',
29                  message: 'TRANSACTION FAILED',
30                }
31      })
32      } else {
33           resolve({
34            transactionState: 'ERROR',
35            error: {
36              intent: 'PAYMENT_AUTHORIZATION',
37              message: 'TRANSACTION FAILED',
38            }
39          })
40      }
41    } catch(err) {
42      resolve({
43        transactionState: 'ERROR',
44        error: {
45          intent: 'PAYMENT_AUTHORIZATION',
46          message: err.message,
47        }
48      })
49    }
50  });
51}

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <title>Googlepay Example</title>
8    <script src="./script.js"></script>
9    <script src="https://www.paypal.com/sdk/js?client-id=<client_id>&components=googlepay"></script>
10    <link rel="stylesheet" type="text/css" href="styles.css" />
11  </head>
12  <body>
13    <main>
14      <section>
15        <div id="button-container"></div>
16      </section>
17    </main>
18    <script src="https://pay.google.com/gp/p/js/pay.js"></script>
19    <script>
20      document.addEventListener("DOMContentLoaded", (event) => {
21        if (google && paypal.Googlepay) {
22          onGooglePayLoaded().catch(console.log);
23        }
24      });
25    </script>
26  </body>
27</html>

1...
2const { status } = await paypal.Googlepay().confirmOrder({
3  orderId: id,
4  paymentMethodData: paymentData.paymentMethodData,
5});
6if (status === "PAYER_ACTION_REQUIRED") {
7  console.log("==== Confirm Payment Completed Payer Action Required =====");
8  paypal
9    .Googlepay()
10    .initiatePayerAction({ orderId: id })
11    .then(async () => {
12      console.log("===== Payer Action Completed =====");
13      /** GET Order */
14      const orderResponse = await fetch(`/orders/${id}`, {
15        method: "GET",
16      }).then((res) => res.json());
17      console.log("===== 3DS Contingency Result Fetched =====");
18      console.log(
19        orderResponse?.payment_source?.google_pay?.card?.authentication_result
20      );
21      /* CAPTURE THE ORDER*/
22      const captureResponse = await fetch(`/orders/${id}/capture`, {
23        method: "POST",
24      }).then((res) => res.json());
25      console.log(" ===== Order Capture Completed ===== ");
26    });
27}
28...