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

1/* Create Order */
2export async function createOrder() {
3  const purchaseAmount = "100.00";
4  const accessToken = await generateAccessToken();
5  const url = \`${base}/v2/checkout/orders\`;
6  const response = await fetch(url, {
7    method: "post",
8    headers: {
9      "Content=Type": "application/json",
10      Authorization: \`Bearer ${accessToken}\`,
11    },
12    body: JSON.stringify({
13      intent: "CAPTURE",
14      puchase_units: [
15        {
16          amount: {
17            currency_code: "USD",
18            value: purchaseAmount,
19          },
20        },
21      ],
22    }),
23  });
24  const data = await response.json();
25  return data;
26}
27/* Capture Order */
28export async function capturePayment(orderId) {
29  const accessToken = await generateAccessToken();
30  const url = \`${base}/v2/checkout/orders/${orderId}/capture\`;
31  const response = await fetch(url, {
32    method: "post",
33    headers: {
34      "Content-Type": "application/json",
35      Authorization: \`Bearer ${accessToken}\`,
36    },
37  });
38  const data = await response.json();
39  return data;
40}

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

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

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  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
7  paymentDataRequest.merchantInfo = googlePayConfig.merchantInfo;
8  paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
9  return paymentDataRequest;
10}
11function getGoogleTransactionInfo(){
12    return {
13        currencyCode: 'USD',
14        totalPriceStatus: 'FINAL',
15        totalPrice: '100.00' // Your amount
16      }
17}

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

1async function processPayment(paymentData) {
2  return new Promise(function async (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/*
2 * Define the version of the Google Pay API referenced when creating your
3 * configuration
4 */
5const baseRequest = {
6  apiVersion: 2,
7  apiVersionMinor: 0,
8};
9let paymentsClient = null,
10  allowedPaymentMethods = null,
11  merchantInfo = null;
12/* Configure your site's support for payment methods supported by the Google Pay */
13function getGoogleIsReadyToPayRequest(allowedPaymentMethods) {
14  return Object.assign({}, baseRequest, {
15    allowedPaymentMethods: allowedPaymentMethods,
16  });
17}
18/* Fetch Default Config from PayPal via PayPal SDK */
19async function getGooglePayConfig() {
20  if (allowedPaymentMethods == null || merchantInfo == null) {
21    const googlePayConfig = await paypal.Googlepay().config();
22    allowedPaymentMethods = googlePayConfig.allowedPaymentMethods;
23    merchantInfo = googlePayConfig.merchantInfo;
24  }
25  return {
26    allowedPaymentMethods,
27    merchantInfo,
28  };
29}
30/* Configure support for the Google Pay API */
31async function getGooglePaymentDataRequest() {
32  const paymentDataRequest = Object.assign({}, baseRequest);
33  const { allowedPaymentMethods, merchantInfo } = await getGooglePayConfig();
34  paymentDataRequest.allowedPaymentMethods = allowedPaymentMethods;
35  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
36  paymentDataRequest.merchantInfo = merchantInfo;
37  paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
38  return paymentDataRequest;
39}
40function onPaymentAuthorized(paymentData) {
41  return new Promise(function (resolve, reject) {
42    processPayment(paymentData)
43      .then(function (data) {
44        resolve({ transactionState: "SUCCESS" });
45      })
46      .catch(function (errDetails) {
47        resolve({ transactionState: "ERROR" });
48      });
49  });
50}
51function getGooglePaymentsClient() {
52  if (paymentsClient === null) {
53    paymentsClient = new google.payments.api.PaymentsClient({
54      environment: "TEST",
55      paymentDataCallbacks: {
56        onPaymentAuthorized: onPaymentAuthorized,
57      },
58    });
59  }
60  return paymentsClient;
61}
62async function onGooglePayLoaded() {
63  const paymentsClient = getGooglePaymentsClient();
64  const { allowedPaymentMethods } = await getGooglePayConfig();
65  paymentsClient
66    .isReadyToPay(getGoogleIsReadyToPayRequest(allowedPaymentMethods))
67    .then(function (response) {
68      if (response.result) {
69        addGooglePayButton();
70      }
71    })
72    .catch(function (err) {
73      console.error(err);
74    });
75}
76function addGooglePayButton() {
77  const paymentsClient = getGooglePaymentsClient();
78  const button = paymentsClient.createButton({
79    onClick: onGooglePaymentButtonClicked,
80  });
81  document.getElementById("container").appendChild(button);
82}
83function getGoogleTransactionInfo() {
84  return {
85    displayItems: [
86      {
87        label: "Subtotal",
88        type: "SUBTOTAL",
89        price: "100.00",
90      },
91      {
92        label: "Tax",
93        type: "TAX",
94        price: "10.00",
95      },
96    ],
97    countryCode: "US",
98    currencyCode: "USD",
99    totalPriceStatus: "FINAL",
100    totalPrice: "110.00",
101    totalPriceLabel: "Total",
102  };
103}
104async function onGooglePaymentButtonClicked() {
105  const paymentDataRequest = await getGooglePaymentDataRequest();
106  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
107  const paymentsClient = getGooglePaymentsClient();
108  paymentsClient.loadPaymentData(paymentDataRequest);
109}
110async function processPayment(paymentData) {
111  try {
112    const { currencyCode, totalPrice } = getGoogleTransactionInfo();
113    const order = {
114      intent: "CAPTURE",
115      purchase_units: [
116        {
117          amount: {
118            currency_code: currencyCode,
119            value: totalPrice,
120          },
121        },
122      ],
123    };
124    /* Create Order */
125    const { id } = await fetch(\`/orders\`, {
126      method: "POST",
127      headers: {
128        "Content-Type": "application/json",
129      },
130      body: JSON.stringify(order),
131    }).then((res) => res.json());
132    const { status } = await paypal.Googlepay().confirmOrder({
133      orderId: id,
134      paymentMethodData: paymentData.paymentMethodData,
135    });
136    if (status === "APPROVED") {
137      /* Capture the Order */
138      const captureResponse = await fetch(\`/orders/${id}/capture\`, {
139        method: "POST",
140      }).then((res) => res.json());
141      return { transactionState: "SUCCESS" };
142    } else {
143      return { transactionState: "ERROR" };
144    }
145  } catch (err) {
146    return {
147      transactionState: "ERROR",
148      error: {
149        message: err.message,
150      },
151    };
152  }
153}

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...