Update hosted-fields example to new standards (#109)

advanced-integration/v1/client/app.js

@@ -0,0 +1,186 @@
+async function createOrderCallback() {
+  try {
+    const response = await fetch("/api/orders", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      // use the "body" param to optionally pass additional order information
+      // like product ids and quantities
+      body: JSON.stringify({
+        cart: [
+          {
+            id: "YOUR_PRODUCT_ID",
+            quantity: "YOUR_PRODUCT_QUANTITY",
+          },
+        ],
+      }),
+    });
+
+    const orderData = await response.json();
+
+    if (orderData.id) {
+      return orderData.id;
+    } else {
+      const errorDetail = orderData?.details?.[0];
+      const errorMessage = errorDetail
+        ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
+        : JSON.stringify(orderData);
+
+      throw new Error(errorMessage);
+    }
+  } catch (error) {
+    console.error(error);
+    resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
+  }
+}
+
+async function onApproveCallback(data, actions) {
+  try {
+    const response = await fetch(`/api/orders/${data.orderID}/capture`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const orderData = await response.json();
+    // Three cases to handle:
+    //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
+    //   (2) Other non-recoverable errors -> Show a failure message
+    //   (3) Successful transaction -> Show confirmation or thank you message
+
+    const transaction =
+      orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
+      orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
+    const errorDetail = orderData?.details?.[0];
+
+    // this actions.restart() behavior only applies to the Buttons component
+    if (errorDetail?.issue === "INSTRUMENT_DECLINED" && !data.card && actions) {
+      // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
+      // recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
+      return actions.restart();
+    } else if (
+      errorDetail ||
+      !transaction ||
+      transaction.status === "DECLINED"
+    ) {
+      // (2) Other non-recoverable errors -> Show a failure message
+      let errorMessage;
+      if (transaction) {
+        errorMessage = `Transaction ${transaction.status}: ${transaction.id}`;
+      } else if (errorDetail) {
+        errorMessage = `${errorDetail.description} (${orderData.debug_id})`;
+      } else {
+        errorMessage = JSON.stringify(orderData);
+      }
+
+      throw new Error(errorMessage);
+    } else {
+      // (3) Successful transaction -> Show confirmation or thank you message
+      // Or go to another URL:  actions.redirect('thank_you.html');
+      resultMessage(
+        `Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
+      );
+      console.log(
+        "Capture result",
+        orderData,
+        JSON.stringify(orderData, null, 2),
+      );
+    }
+  } catch (error) {
+    console.error(error);
+    resultMessage(
+      `Sorry, your transaction could not be processed...<br><br>${error}`,
+    );
+  }
+}
+
+window.paypal
+  .Buttons({
+    createOrder: createOrderCallback,
+    onApprove: onApproveCallback,
+  })
+  .render("#paypal-button-container");
+
+// Example function to show a result to the user. Your site's UI library can be used instead.
+function resultMessage(message) {
+  const container = document.querySelector("#result-message");
+  container.innerHTML = message;
+}
+
+// If this returns false or the card fields aren't visible, see Step #1.
+if (window.paypal.HostedFields.isEligible()) {
+  // Renders card fields
+  window.paypal.HostedFields.render({
+    // Call your server to set up the transaction
+    createOrder: createOrderCallback,
+    styles: {
+      ".valid": {
+        color: "green",
+      },
+      ".invalid": {
+        color: "red",
+      },
+    },
+    fields: {
+      number: {
+        selector: "#card-number",
+        placeholder: "4111 1111 1111 1111",
+      },
+      cvv: {
+        selector: "#cvv",
+        placeholder: "123",
+      },
+      expirationDate: {
+        selector: "#expiration-date",
+        placeholder: "MM/YY",
+      },
+    },
+  }).then((cardFields) => {
+    document.querySelector("#card-form").addEventListener("submit", (event) => {
+      event.preventDefault();
+      cardFields
+        .submit({
+          // Cardholder's first and last name
+          cardholderName: document.getElementById("card-holder-name").value,
+          // Billing Address
+          billingAddress: {
+            // Street address, line 1
+            streetAddress: document.getElementById(
+              "card-billing-address-street",
+            ).value,
+            // Street address, line 2 (Ex: Unit, Apartment, etc.)
+            extendedAddress: document.getElementById(
+              "card-billing-address-unit",
+            ).value,
+            // State
+            region: document.getElementById("card-billing-address-state").value,
+            // City
+            locality: document.getElementById("card-billing-address-city")
+              .value,
+            // Postal Code
+            postalCode: document.getElementById("card-billing-address-zip")
+              .value,
+            // Country Code
+            countryCodeAlpha2: document.getElementById(
+              "card-billing-address-country",
+            ).value,
+          },
+        })
+        .then((data) => {
+          return onApproveCallback(data);
+        })
+        .catch((orderData) => {
+          resultMessage(
+            `Sorry, your transaction could not be processed...<br><br>${JSON.stringify(
+              orderData,
+            )}`,
+          );
+        });
+    });
+  });
+} else {
+  // Hides card fields if the merchant isn't eligible
+  document.querySelector("#card-form").style = "display: none";
+}

advanced-integration/v1/package.json

@@ -2,14 +2,14 @@
   "name": "paypal-advanced-integration",
   "description": "Sample Node.js web app to integrate PayPal Advanced Checkout for online payments",
   "version": "1.0.0",
-  "main": "server.js",
+  "main": "server/server.js",
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "nodemon server.js",
+    "start": "nodemon server/server.js",
     "format": "npx prettier --write **/*.{js,md}",
     "format:check": "npx prettier --check **/*.{js,md}",
-    "lint": "npx eslint server.js paypal-api.js --env=node && npx eslint public/*.js --env=browser"
+    "lint": "npx eslint server/*.js --env=node && npx eslint client/*.js --env=browser"
   },
   "license": "Apache-2.0",
   "dependencies": {