3DS integration working

Author: devpato

README.md

@@ -17,42 +17,55 @@
   <hr />
 </div>
 
-# PayPal JavaScript FullStack Advanced Checkout
-This sample app shows how to build and customize a card payment form to accept debit and credit cards. Please make sure to style the card form so that it aligns with your business branding.
+# PayPal JavaScript FullStack 3Ds Advanced Checkout
+This sample app shows you how to build and customize a card payment form to accept debit and credit cards and using 3Ds for authentification. Style the card form so that it aligns with your business branding.
 
 To create this application from scratch, follow the [Advanced Checkout integration](https://developer.paypal.com/docs/checkout/advanced/integrate) guide from the [PayPal Developer](https://developer.paypal.com/home) docs.
 
+### Run this App
 
-## Run this project
+You can run this app locally or on [Stackblitz](https://stackblitz.com/edit/pp-so?file=README.md).
 
-### PayPal Codespaces
-[![Open Code In GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/paypaldev/PayPal-JavaScript-FullStack-Advanced-Checkout-Sample?devcontainer_path=.devcontainer%2Fdevcontainer.json)
+#### Run it locally
+You will need to create a `.env` file with the following environment variables:
 
-- Rename the ``.env.example`` file to `.env`.
-- Add your environment variables in the `.env` file.
+```shell
+CLIENT_ID=
+APP_SECRET=
+```
 
-### Locally
-
-- Rename the `.env.example` file to `.env`.
-- Add your environment variables in the `.env` file.
+In the `checkout.ejs` replace the `YOUR_CLIENT_ID` string in the  `script` tag with your PayPal Client ID.
 
 Complete the steps in [Get started](https://developer.paypal.com/api/rest/) to get the following sandbox account information from the Developer Dashboard:
 - Sandbox client ID and the secret of [a REST app](https://www.paypal.com/signin?returnUri=https%3A%2F%2Fdeveloper.paypal.com%2Fdeveloper%2Fapplications&_ga=1.252581760.841672670.1664266268).
 - Access token to use the PayPal REST API server.
 
 ![paypal developer credentials](env.png)
 
-Now, run the following commands in your terminal:
+Now, run the following command in your terminal:
 
 `npm install`
 
-`npm start` and navigate to [http://localhost:8888/](http://localhost:8888/).
+`npm run start`
+
+and navigate in your browser to: `http://localhost:9597/`.
 
 ### Sample Card
 
+#### Succesful 3Ds Authentification
+Card Type: `Visa`
+
+Card Number: `5458406954745076`
+
+Expiration Date: `01/2025`
+
+CVV: `123`
+
+#### Failure 3Ds Authentification
+
 Card Type: `Visa`
 
-Card Number: `4032039534213337`
+Card Number: `4928527426776525`
 
 Expiration Date: `01/2025`
 

client/app.js

@@ -1,4 +1,29 @@
+//Close 3Ds Dialog
+function onClose() {
+  const threedsElement = document.getElementById("threeds");
+  threedsElement.innerHTML = "";
+}
+
+//Handle 3Ds Payload
+async function onHandle3Ds(payload, orderId) {
+  const { liabilityShifted, liabilityShift } = payload;
+
+  if (liabilityShift === "POSSIBLE") {
+    await onApproveCallback(orderId);
+  } else if (liabilityShifted === false || liabilityShifted === undefined) {
+    document.getElementById("threeds").innerHTML = `<Dialog open>
+        <p>You have the option to complete the payment at your own risk,
+         meaning that the liability of any chargeback has not shifted from
+          the merchant to the card issuer.</p>
+        <button onclick=onApproveCallback("${orderId}")>Pay Now</button>
+        <button onclick=onClose()>Close</button>
+      </Dialog>
+    `;
+  }
+}
+
 async function createOrderCallback() {
+  resultMessage("")
     try {
       const response = await fetch("/api/orders", {
         method: "POST",
@@ -35,9 +60,14 @@ async function createOrderCallback() {
     }
   }
 
-  async function onApproveCallback(data, actions) {
+  async function onApproveCallback(orderId) {
+    console.log('orderId', orderId);
+    
+    const threedsElement = document.getElementById("threeds");
+    threedsElement.innerHTML = "";
+
     try {
-      const response = await fetch(`/api/orders/${data.orderID}/capture`, {
+      const response = await fetch(`/api/orders/${orderId}/capture`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -99,7 +129,7 @@ async function createOrderCallback() {
   window.paypal
     .Buttons({
       createOrder: createOrderCallback,
-      onApprove: onApproveCallback,
+      onApprove: (data)=> onApproveCallback(data.orderID),
     })
     .render("#paypal-button-container");
 
@@ -111,10 +141,14 @@ async function createOrderCallback() {
 
   // If this returns false or the card fields aren't visible, see Step #1.
   if (window.paypal.HostedFields.isEligible()) {
+    let orderId;
     // Renders card fields
     window.paypal.HostedFields.render({
       // Call your server to set up the transaction
-      createOrder: createOrderCallback,
+      createOrder: async (data, actions) => {
+        orderId = await createOrderCallback(data, actions);
+        return orderId;
+      },
       styles: {
         ".valid": {
           color: "green",
@@ -138,49 +172,37 @@ async function createOrderCallback() {
         },
       },
     }).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";
-  }
+        document.querySelector("#card-form").addEventListener("submit", async (event) => {
+          event.preventDefault();
+          try {
+            const { value: cardHolderName } = document.getElementById("card-holder-name");
+            const { value: streetAddress } = document.getElementById("card-billing-address-street");
+            const { value: extendedAddress } = document.getElementById("card-billing-address-unit");
+            const { value: region } = document.getElementById("card-billing-address-state");
+            const { value: locality } = document.getElementById("card-billing-address-city");
+            const { value: postalCode } = document.getElementById("card-billing-address-zip");
+            const { value: countryCodeAlpha2 } = document.getElementById("card-billing-address-country");
+  
+            const payload = await cardFields.submit({
+              cardHolderName,
+              contingencies: ["SCA_ALWAYS"],
+              billingAddress: {
+                streetAddress,
+                extendedAddress,
+                region,
+                locality,
+                postalCode,
+                countryCodeAlpha2,
+              },
+            });
+  
+            await onHandle3Ds(payload, orderId);
+          } catch (error) {
+            alert("Payment could not be captured! " + JSON.stringify(error));
+          }
+        });
+    }); 
+} else {
+  // Hides card fields if the merchant isn't eligible
+  document.querySelector("#card-form").style = "display: none";
+}

env.png

@@ -99,6 +99,7 @@
       </form>
       <p id="result-message"></p>
     </div>
+    <div id="threeds"></div>
     <script src="app.js"></script>
   </body>
 </html>