feat: add payment token functionality to savePayment flow (#43)

Author: gregjopa

.github/workflows/nodejs.yml

@@ -28,7 +28,9 @@ jobs:
           find . -name package.json -maxdepth 10 -type f -not -path "*/node_modules/*" | while read -r file; do
             directory=$(dirname "$file")
             echo "::group:: $directory"
-            cd "$directory" && npm install && cd -
+            cd "$directory" 
+            npm install || exit 1
+            cd -
             echo "::endgroup::"
           done
 
@@ -37,7 +39,9 @@ jobs:
           find . -name package.json -maxdepth 10 -type f -not -path "*/node_modules/*" | while read -r file; do
             directory=$(dirname "$file")
             echo "::group:: $directory"
-            cd "$directory" && npm run format:check && cd -
+            cd "$directory" 
+            npm run format:check || exit 1
+            cd -
             echo "::endgroup::"
           done
 
@@ -46,6 +50,8 @@ jobs:
           find . -name package.json -maxdepth 10 -type f -not -path "*/node_modules/*" | while read -r file; do
             directory=$(dirname "$file")
             echo "::group:: $directory"
-            cd "$directory" && npm run lint && cd -
+            cd "$directory" 
+            npm run lint || exit 1
+            cd -
             echo "::endgroup::"
           done

client/savePayment/html/src/recommended/app.js

@@ -23,6 +23,10 @@ async function onPayPalLoaded() {
 const paymentSessionOptions = {
   async onApprove(data) {
     console.log("onApprove", data);
+    const createPaymentTokenResponse = await createPaymentToken(
+      data.vaultSetupToken,
+    );
+    console.log("Create payment token response: ", createPaymentTokenResponse);
   },
   onCancel(data) {
     console.log("onCancel", data);
@@ -65,7 +69,7 @@ async function getBrowserSafeClientToken() {
 }
 
 async function createSetupToken() {
-  const response = await fetch("/paypal-api/checkout/setup-token/create", {
+  const response = await fetch("/paypal-api/vault/setup-token/create", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -75,3 +79,16 @@ async function createSetupToken() {
 
   return { setupToken: id };
 }
+
+async function createPaymentToken(vaultSetupToken) {
+  const response = await fetch("/paypal-api/vault/payment-token/create", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ vaultSetupToken }),
+  });
+  const data = await response.json();
+
+  return data;
+}

client/savePayment/html/src/recommended/index.html

@@ -17,7 +17,7 @@
     <h1>Save Payment Recommended Integration</h1>
 
     <div class="buttons-container">
-      <paypal-button id="paypal-button" type="pay" hidden></paypal-button>
+      <paypal-button id="paypal-button" hidden></paypal-button>
     </div>
     <script src="app.js"></script>
 

server/node/src/paypalServerSdk.ts

@@ -16,12 +16,13 @@ import {
   PaypalPaymentTokenUsageType,
   VaultController,
   VaultInstructionAction,
+  VaultTokenRequestType,
 } from "@paypal/paypal-server-sdk";
 
 import type {
   OAuthProviderError,
-  OAuthToken,
   OrderRequest,
+  SetupTokenRequest,
 } from "@paypal/paypal-server-sdk";
 
 /* ######################################################################
@@ -112,7 +113,7 @@ export async function getBrowserSafeClientToken() {
 }
 
 /* ######################################################################
- * Process transactions
+ * Process orders
  * ###################################################################### */
 
 export async function createOrder(orderRequestBody: OrderRequest) {
@@ -178,19 +179,67 @@ export async function captureOrder(orderId: string) {
   }
 }
 
-export async function createSetupToken() {
+/* ######################################################################
+ * Save payment methods
+ * ###################################################################### */
+
+export async function createSetupToken(
+  setupTokenRequestBody: SetupTokenRequest,
+  paypalRequestId?: string,
+) {
   try {
     const { result, statusCode } = await vaultController.createSetupToken({
-      paypalRequestId: Date.now().toString(),
+      body: setupTokenRequestBody,
+      paypalRequestId,
+    });
+
+    return {
+      jsonResponse: result,
+      httpStatusCode: statusCode,
+    };
+  } catch (error) {
+    if (error instanceof ApiError) {
+      const { result, statusCode } = error;
+
+      return {
+        jsonResponse: result as CustomError,
+        httpStatusCode: statusCode,
+      };
+    } else {
+      throw error;
+    }
+  }
+}
+
+export async function createSetupTokenWithSampleDataForPayPal() {
+  const defaultSetupTokenRequestBody = {
+    paymentSource: {
+      paypal: {
+        experienceContext: {
+          cancelUrl: "https://example.com/cancelUrl",
+          returnUrl: "https://example.com/returnUrl",
+          vaultInstruction: VaultInstructionAction.OnPayerApproval,
+        },
+        usageType: PaypalPaymentTokenUsageType.Merchant,
+      },
+    },
+  };
+
+  return createSetupToken(defaultSetupTokenRequestBody, Date.now().toString());
+}
+
+export async function createPaymentToken(
+  vaultSetupToken: string,
+  paypalRequestId?: string,
+) {
+  try {
+    const { result, statusCode } = await vaultController.createPaymentToken({
+      paypalRequestId: paypalRequestId ?? Date.now().toString(),
       body: {
         paymentSource: {
-          paypal: {
-            experienceContext: {
-              cancelUrl: "https://example.com/cancelUrl",
-              returnUrl: "https://example.com/returnUrl",
-              vaultInstruction: VaultInstructionAction.OnPayerApproval,
-            },
-            usageType: PaypalPaymentTokenUsageType.Merchant,
+          token: {
+            id: vaultSetupToken,
+            type: VaultTokenRequestType.SetupToken,
           },
         },
       },

server/node/src/server.ts

@@ -1,11 +1,14 @@
 import express, { Request, Response } from "express";
 import cors from "cors";
 
+import type { PaymentTokenResponse } from "@paypal/paypal-server-sdk";
+
 import {
   getBrowserSafeClientToken,
   createOrderWithSampleData,
   captureOrder,
-  createSetupToken,
+  createPaymentToken,
+  createSetupTokenWithSampleDataForPayPal,
 } from "./paypalServerSdk";
 
 const app = express();
@@ -62,10 +65,11 @@ app.post(
 );
 
 app.post(
-  "/paypal-api/checkout/setup-token/create",
+  "/paypal-api/vault/setup-token/create",
   async (_req: Request, res: Response) => {
     try {
-      const { jsonResponse, httpStatusCode } = await createSetupToken();
+      const { jsonResponse, httpStatusCode } =
+        await createSetupTokenWithSampleDataForPayPal();
       res.status(httpStatusCode).json(jsonResponse);
     } catch (error) {
       console.error("Failed to create setup token:", error);
@@ -74,6 +78,48 @@ app.post(
   },
 );
 
+app.post(
+  "/paypal-api/vault/payment-token/create",
+  async (req: Request, res: Response) => {
+    try {
+      const { jsonResponse, httpStatusCode } = await createPaymentToken(
+        req.body.vaultSetupToken as string,
+      );
+
+      const paymentTokenResponse = jsonResponse as PaymentTokenResponse;
+
+      if (paymentTokenResponse.id) {
+        // This payment token id is a long-lived value for making
+        // future payments when the buyer is not present.
+        // PayPal recommends storing this value in your database
+        // and NOT returning it back to the browser.
+        await savePaymentTokenToDatabase(paymentTokenResponse);
+        res.status(httpStatusCode).json({
+          status: "SUCCESS",
+          description:
+            "Payment token saved to database for future transactions",
+        });
+      } else {
+        res.status(httpStatusCode).json({
+          status: "ERROR",
+          description: "Failed to create payment token",
+        });
+      }
+    } catch (error) {
+      console.error("Failed to create payment token:", error);
+      res.status(500).json({ error: "Failed to create payment token." });
+    }
+  },
+);
+
+async function savePaymentTokenToDatabase(
+  paymentTokenResponse: PaymentTokenResponse,
+) {
+  // example function to teach saving the paymentToken to a database
+  // to be used for future transactions
+  return Promise.resolve();
+}
+
 const port = process.env.PORT ?? 8080;
 
 app.listen(port, () => {