In-Context Checkout flow

Important: Integration with checkout.js V3.5 is Deprecated. For the latest integration information, see the PayPal Express Checkout Integration Guide.

The enhanced PayPal Express Checkout with In-Context gives your customers a simplified checkout experience that keeps them local to your website throughout the payment authorization process and enables them to use their PayPal balance, bank account, or credit card to pay without sharing or entering any sensitive information on your site.

Note: This flow replaces the classic Express Checkout full-page redirect checkout flow.

Customers remain on your website, which ensures a natural and user-friendly checkout experience. This flow complements your existing payment solution and gives your buyers another way to pay. Online shoppers appreciate the convenience and security of PayPal.

On desktops, customers check out in a secure window that overlays your website. On tablets and smart phones, customers access the PayPal payment screens in full-page mode.

The following steps correspond to the steps in the diagram:

1.

To check out with PayPal, the buyer clicks the PayPal Check out button.

In response to the button click, these actions occur:

  • The In-Context JavaScript opens a pop-up window and waits for your form submit to create an Express Checkout payment.
  • A successful create payment call returns HATEOAS links that you use in subsequent steps.

Use the redirect URL from the response to redirect the buyer to the PayPal URL. If you have correctly integrated the In-Context JavaScript, the pop-up window manages the redirect.

2.

In the secure window that overlays your website, the buyer logs in to PayPal.

3.

The buyer reviews and authorizes the PayPal payment.

4.

After the buyer clicks Continue to approve the payment, PayPal redirects the buyer to the return URL with the payer ID and payment ID values appended. The return URL is the value that you specified in the return_url parameter in the create payment request. For example:

http://return_url?paymentId=payment-id&token=token&PayerID=payer-id

Optionally, you can show payment details to the buyer. Use the self link from the HATEOAS links of the create payment response to get buyer details, such as the shipping address, email, and so on, and display them on a confirmation page.

5.

The confirmation page triggers an execute payment call. This call uses the execute link from the HATEOAS links of the create payment response and the payer ID from the return URL.

Next

Meet the prerequisites to integrate the Express Checkout with In-Context flow.

Additional information