Expanded checkout overview

PayPal Expanded Checkout helps you present custom credit and debit card fields to your payers so they can pay using your site's branding. Unlike standard PayPal Checkout, Expanded Checkout gives you control over the visual presentation of card fields. Use it when you need to match checkout to your own brand experience.

If you do not need custom branding, use standard PayPal Checkout instead.

Eligibility

• This integration is PCI-compliant to collect card information from buyers.
• Expanded Checkout supports all major credit cards in 36 countries and 22 currencies.

Capabilities

• Accept one-time payments with all major debit and credit cards
• Customize PayPal buttons and Card Fields to match your business branding
• Authenticate buyers with 3D Secure

How it works

The integration uses the PayPal JavaScript SDK v5 to render hosted card fields and PayPal buttons on your page. Your payers can pay with PayPal, debit and credit cards, Pay Later, Venmo, and alternative payment methods. The SDK handles which buttons appear based on your configuration.

When a buyer selects card payment, card fields render on your page, and the buyer fills in their card details. Optionally, you can collect a billing address using your own input elements and pass it along with the order. After the buyer submits, the order goes to PayPal servers for processing.

Architecture and lifecycle

The PayPal Card Fields component renders on your page and can be customized to match your user experience. You can load the PayPal buttons component alongside the Card Fields component. This gives your buyer the option to select which payment method they want to use. The PayPal buttons component appears on your page based on the configuration you set in the JavaScript SDK.

When your buyer selects card fields to pay

1. Card Fields renders on your page.
2. The buyer fills in their card information: cardholder name, card number, expiration date, postal code, and CVV.
3. Optionally, the buyer can enter their billing address into your own input elements. These values are passed along with the order.
4. After the buyer fills in the card fields, they click the Pay or Submit button to process the card transaction.
5. The order goes to PayPal servers, where the payment is processed.

Full integration flow with Hosted Card Fields and 3D Secure

1. The <script> tag fetches the PayPal JavaScript SDK when your checkout page renders.
2. Your page renders the hosted card fields using the PayPal JavaScript SDK.
3. The buyer enters their card details into the card fields.
4. Optionally, you can collect the billing address with your own inputs and include the values in the submit method.
5. The buyer clicks the Submit button, which calls the cardFields.submit method.
6. The createOrder callback sends a request to your server to create a PayPal order.
7. Your server sends a request to the PayPal Orders API with the appropriate 3DS verification.
8. The createOrder callback returns an orderId back to your page.
9. Depending on the 3DS verification method passed by your createOrder call, the buyer sees a 3DS User Authentication from the card-issuing bank.
10. The onApprove callback returns a liabilityShift response that your page can use to determine how to process the order.
11. If there are no issues during the createOrder process, the onApprove callback sends a capture request to your server.
12. Your server sends a request to the PayPal Orders API to capture the order.
13. Your page can use the capture response to verify the payment was completed, catch any errors about their payment method, and handle the approval or decline.

Next step

• To set up your environment: Set up your development environment

Related content

• Compare all checkout types
• Eligibility — supported payment methods, countries, and currencies
• Orders REST V2 API
• Sandbox testing guide