Skip to content

Update Card Fields integration with Billing Address #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 3, 2024
Merged

Update Card Fields integration with Billing Address #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c9d471f
update readme to align with Card Fields naming convention
mchoun May 23, 2024
da70f6d
update submit button id to align with public dev docs
mchoun May 23, 2024
eba3e07
add billing address implementation
mchoun May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions advanced-integration/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion advanced-integration/v2/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
34 changes: 28 additions & 6 deletions advanced-integration/v2/client/checkout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
32 changes: 30 additions & 2 deletions advanced-integration/v2/server/views/checkout.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading