Dorokhov.codes
PayPal
We have two options:
- PayPal Standard Checkout.
- PayPal Advanced Checkout.
PayPal Standard Checkout
- Customer Experience: Redirects users to PayPal’s website to complete the transaction.
- Ease of Setup: Simple to integrate, requiring minimal technical skills.
- Customization: Limited customization options for the checkout page.
- PCI Compliance: Since transactions occur on PayPal’s servers, merchants don’t handle sensitive payment information directly, reducing PCI compliance burdens.
- Best for: Smaller businesses or those without advanced development resources.
PayPal Advanced Checkout
- Customer Experience: Keeps users on your website throughout the checkout process with an embedded payment experience.
- Ease of Setup: Requires more technical expertise to integrate.
- Customization: Greater control over the checkout experience, allowing branding and tailored user flows.
- PCI Compliance: Merchants must ensure compliance with PCI standards, as payment details are processed on their website.
- Best for: Businesses looking for a seamless, branded checkout experience and having resources for development and compliance.
PayPal Advanced Checkout
JavaScript SDK
PayPal Advanced Checkout requires the JavaScript SDK. Connect it like this:
<script src="https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=CLIENT_ID"></script>
The SDK offers Buttons, Marks, Card Fields, and other components.
Render card fields
// Initialize the PayPal CardFields component
// `createOrder` is a required function to set up the order details
const cardField = window.paypal.CardFields({
createOrder: () => {
// Define the order creation logic here
// Return the order ID after creation
},
});
// Check if the CardFields component is eligible for rendering
// This ensures that the browser and environment meet PayPal's requirements
if (cardField.isEligible()) {
// Create and render the "Name" field for the cardholder's name
const nameField = cardField.NameField({
style: {
input: { color: "blue" }, // Styling for input fields
".invalid": { color: "purple" }, // Styling for invalid input
},
});
nameField.render("#card-name-field-container"); // Attach to the corresponding container
// Create and render the "Number" field for the card number
const numberField = cardField.NumberField({
style: {
input: { color: "blue" }, // Styling for input fields
},
});
numberField.render("#card-number-field-container"); // Attach to the corresponding container
// Create and render the "CVV" field for the card's security code
const cvvField = cardField.CVVField({
style: {
input: { color: "blue" }, // Styling for input fields
},
});
cvvField.render("#card-cvv-field-container"); // Attach to the corresponding container
// Create and render the "Expiry" field for the card's expiration date
const expiryField = cardField.ExpiryField({
style: {
input: { color: "blue" }, // Styling for input fields
},
});
expiryField.render("#card-expiry-field-container"); // Attach to the corresponding container
}