Skip to content

Commit a70265b

Browse files
mchounmchoun
authored
feat: update Card Fields integration with Billing Address (#131)
1 parent bd8f509 commit a70265b

File tree

4 files changed

+61
-11
lines changed

4 files changed

+61
-11
lines changed

‎advanced-integration/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

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

5-
* [`v2`](v2/README.md) contains sample code for the current advanced Checkout integration. This includes guidance on using Hosted Card Fields.
6-
* [`v1`](v1/README.md) contains sample code for the legacy advanced Checkout integration. Use `v2` for new integrations.
5+
- [`v2`](v2/README.md) contains sample code for the current advanced Checkout integration. This includes guidance on using Card Fields.
6+
- [`v1`](v1/README.md) contains sample code for the legacy advanced Checkout integration. Use `v2` for new integrations.
77

88
## Instructions
99

‎advanced-integration/v2/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

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

5-
Version 2 is the current advanced Checkout integration, and includes hosted card fields.
5+
Version 2 is the current advanced Checkout integration, and includes Card Fields.
66

77
## Instructions
88

‎advanced-integration/v2/client/checkout.js

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -124,13 +124,35 @@ if (cardField.isEligible()) {
124124

125125
// Add click listener to submit button and call the submit function on the CardField component
126126
document
127-
.getElementById("multi-card-field-button")
127+
.getElementById("card-field-submit-button")
128128
.addEventListener("click", () => {
129-
cardField.submit().catch((error) => {
130-
resultMessage(
131-
`Sorry, your transaction could not be processed...<br><br>${error}`,
132-
);
133-
});
129+
cardField
130+
.submit({
131+
// From your billing address fields
132+
billingAddress: {
133+
addressLine1: document.getElementById("card-billing-address-line-1")
134+
.value,
135+
addressLine2: document.getElementById("card-billing-address-line-2")
136+
.value,
137+
adminArea1: document.getElementById(
138+
"card-billing-address-admin-area-line-1",
139+
).value,
140+
adminArea2: document.getElementById(
141+
"card-billing-address-admin-area-line-2",
142+
).value,
143+
countryCode: document.getElementById(
144+
"card-billing-address-country-code",
145+
).value,
146+
postalCode: document.getElementById(
147+
"card-billing-address-postal-code",
148+
).value,
149+
},
150+
})
151+
.catch((error) => {
152+
resultMessage(
153+
`Sorry, your transaction could not be processed...<br><br>${error}`,
154+
);
155+
});
134156
});
135157
} else {
136158
// Hides card fields if the merchant isn't eligible

‎advanced-integration/v2/server/views/checkout.ejs

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,43 @@
99
</head>
1010
<body>
1111
<div id="paypal-button-container" class="paypal-button-container"></div>
12+
<!-- Containers for Card Fields hosted by PayPal -->
1213
<div id="card-form" class="card_container">
1314
<div id="card-name-field-container"></div>
1415
<div id="card-number-field-container"></div>
1516
<div id="card-expiry-field-container"></div>
1617
<div id="card-cvv-field-container"></div>
17-
<button id="multi-card-field-button" type="button">Pay now with Card</button>
18+
<!-- To be replaced with your own Billing Address Fields -->
19+
<div>
20+
<label for="card-billing-address-line-1">Billing Address</label>
21+
<input type="text" id="card-billing-address-line-1" name="card-billing-address-line-1" autocomplete="off"
22+
placeholder="Address line 1">
23+
</div>
24+
<div>
25+
<input type="text" id="card-billing-address-line-2" name="card-billing-address-line-2" autocomplete="off"
26+
placeholder="Address line 2">
27+
</div>
28+
<div>
29+
<input type="text" id="card-billing-address-admin-area-line-1" name="card-billing-address-admin-area-line-1"
30+
autocomplete="off" placeholder="Admin area line 1">
31+
</div>
32+
<div>
33+
<input type="text" id="card-billing-address-admin-area-line-2" name="card-billing-address-admin-area-line-2"
34+
autocomplete="off" placeholder="Admin area line 2">
35+
</div>
36+
<div>
37+
<input type="text" id="card-billing-address-country-code" name="card-billing-address-country-code"
38+
autocomplete="off" placeholder="Country code">
39+
</div>
40+
<div>
41+
<input type="text" id="card-billing-address-postal-code" name="card-billing-address-postal-code"
42+
autocomplete="off" placeholder="Postal/zip code">
43+
</div>
44+
<br><br>
45+
<button id="card-field-submit-button" type="button">Pay now with Card</button>
1846
</div>
1947
<p id="result-message"></p>
2048
<script src="https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=<%= clientId %>"></script>
2149
<script src="checkout.js"></script>
2250
</body>
23-
</html>
51+
</html>

0 commit comments

Comments
 (0)