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
}

PayPal PHP Server SDK

GitHub.

Testing

PayPal test cards.