feat: update Card Fields integration with Billing Address (#131)

paypal-examples · Jun 3, 2024 · a70265b · a70265b
1 parent bd8f509
commit a70265b
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 11 deletions.
diff --git a/advanced-integration/README.md b/advanced-integration/README.md
@@ -2,8 +2,8 @@
 
 This folder contains example code for a PayPal advanced Checkout integration using both the JavaScript SDK and Node.js to complete transactions with the PayPal REST API.
 
-* [`v2`](v2/README.md) contains sample code for the current advanced Checkout integration. This includes guidance on using Hosted Card Fields.
-* [`v1`](v1/README.md) contains sample code for the legacy advanced Checkout integration. Use `v2` for new integrations.
+- [`v2`](v2/README.md) contains sample code for the current advanced Checkout integration. This includes guidance on using Card Fields.
+- [`v1`](v1/README.md) contains sample code for the legacy advanced Checkout integration. Use `v2` for new integrations.
 
 ## Instructions
 

diff --git a/advanced-integration/v2/README.md b/advanced-integration/v2/README.md
@@ -2,7 +2,7 @@
 
 This folder contains example code for [version 2](https://developer.paypal.com/docs/checkout/advanced/integrate/) of a PayPal advanced Checkout integration using the JavaScript SDK and Node.js to complete transactions with the PayPal REST API.
 
-Version 2 is the current advanced Checkout integration, and includes hosted card fields.
+Version 2 is the current advanced Checkout integration, and includes Card Fields.
 
 ## Instructions
 

diff --git a/advanced-integration/v2/client/checkout.js b/advanced-integration/v2/client/checkout.js
@@ -124,13 +124,35 @@ if (cardField.isEligible()) {
 
   // Add click listener to submit button and call the submit function on the CardField component
   document
-    .getElementById("multi-card-field-button")
+    .getElementById("card-field-submit-button")
     .addEventListener("click", () => {
-      cardField.submit().catch((error) => {
-        resultMessage(
-          `Sorry, your transaction could not be processed...<br><br>${error}`,
-        );
-      });
+      cardField
+        .submit({
+          // From your billing address fields
+          billingAddress: {
+            addressLine1: document.getElementById("card-billing-address-line-1")
+              .value,
+            addressLine2: document.getElementById("card-billing-address-line-2")
+              .value,
+            adminArea1: document.getElementById(
+              "card-billing-address-admin-area-line-1",
+            ).value,
+            adminArea2: document.getElementById(
+              "card-billing-address-admin-area-line-2",
+            ).value,
+            countryCode: document.getElementById(
+              "card-billing-address-country-code",
+            ).value,
+            postalCode: document.getElementById(
+              "card-billing-address-postal-code",
+            ).value,
+          },
+        })
+        .catch((error) => {
+          resultMessage(
+            `Sorry, your transaction could not be processed...<br><br>${error}`,
+          );
+        });
     });
 } else {
   // Hides card fields if the merchant isn't eligible

diff --git a/advanced-integration/v2/server/views/checkout.ejs b/advanced-integration/v2/server/views/checkout.ejs
@@ -9,15 +9,43 @@
   </head>
   <body>
     <div id="paypal-button-container" class="paypal-button-container"></div>
+    <!-- Containers for Card Fields hosted by PayPal -->
     <div id="card-form" class="card_container">
       <div id="card-name-field-container"></div>
       <div id="card-number-field-container"></div>
       <div id="card-expiry-field-container"></div>
       <div id="card-cvv-field-container"></div>
-      <button id="multi-card-field-button" type="button">Pay now with Card</button>
+      <!-- To be replaced with your own Billing Address Fields -->
+      <div>
+        <label for="card-billing-address-line-1">Billing Address</label>
+        <input type="text" id="card-billing-address-line-1" name="card-billing-address-line-1" autocomplete="off"
+          placeholder="Address line 1">
+      </div>
+      <div>
+        <input type="text" id="card-billing-address-line-2" name="card-billing-address-line-2" autocomplete="off"
+          placeholder="Address line 2">
+      </div>
+      <div>
+        <input type="text" id="card-billing-address-admin-area-line-1" name="card-billing-address-admin-area-line-1"
+          autocomplete="off" placeholder="Admin area line 1">
+      </div>
+      <div>
+        <input type="text" id="card-billing-address-admin-area-line-2" name="card-billing-address-admin-area-line-2"
+          autocomplete="off" placeholder="Admin area line 2">
+      </div>
+      <div>
+        <input type="text" id="card-billing-address-country-code" name="card-billing-address-country-code"
+          autocomplete="off" placeholder="Country code">
+      </div>
+      <div>
+        <input type="text" id="card-billing-address-postal-code" name="card-billing-address-postal-code"
+          autocomplete="off" placeholder="Postal/zip code">
+      </div>
+      <br><br>
+      <button id="card-field-submit-button" type="button">Pay now with Card</button>
     </div>
     <p id="result-message"></p>
     <script src="https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=<%= clientId %>"></script>
     <script src="checkout.js"></script>
   </body>
-</html>
+</html>