PayPal Component

On this page, you can find additional configuration for adding PayPal to your Components integration.

Before you begin

This page assumes you have already:

• Built a Components integration.
• Completed the PayPal setup steps.

API reference

Select which endpoint you're integrating:

Amounts in Hungarian Forints (HUF)

In case of a transaction in HUF, PayPal expects the transaction amount and the line item amounts to be rounded to the nearest whole amount. For example, an amount of HUF 74499 must be rounded to HUF 74500. PayPal also expects the rounded line item amounts to add up to the rounded transaction amount.

If you do not round the amounts, Adyen will do that. However, a discrepancy can occur between the transaction amount and the total of the line item amounts. When this happens, PayPal doesn't accept the transaction. To avoid that problem, we recommend that you round all HUF amounts yourself and check that they add up.

PayPal risk fields

PayPal requires marketplaces and also merchants in specific verticals to send information about the context of the transaction, for risk mitigation purposes.

Common PayPal risk fields for marketplaces

As an example, the following table shows the most common paypalRisk fields that marketplaces need to send. It is possible that PayPal requires you to send more, less, or other fields.

Component configuration

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="paypal-container"></div>

Step 2: Create an instance of the Component

Select which endpoint you are integrating:

Optional configuration

When creating an instance of the Component, you can also:

• Add a Content Security Policy (CSP) nonce.
• Customize the layout of the PayPal Smart Payment Buttons.
• Handle shipping changes.
• Validate user input.
• Disable the PayPal Credit button.
• Add PayPal Pay Later messages and buttons.
• Disable PayPal Pay Later.
• Set the intent for individual payments.
• Hide Venmo.

Content Security Policy (CSP) nonce

You can include a cspNonce to add a CSP nonce if you use this on your site. This was added in v5.2.0.

Layout

You can configure the layout of the PayPal Smart Payment Buttons. To do that, configure the style element in the PayPal payment method configuration. Use the available style options.

Shipping changes

You can use PayPal's callback method onShippingChange to listen to shipping address changes and validate that you support the shipping address.

Validate user input

You can validate user input with the following parameters:

• onInit: Called when the button renders.
• onClick: Called when one of the PayPal buttons is clicked.

Disable PayPal Credit

You can use blockPayPalCreditButton to control rendering the PayPal Credit button. Set this parameter to true if you don't want the PayPal Credit button to be rendered. The default value is false.

Add PayPal Pay Later messages and buttons

PayPal Pay Later is supported in the following countries/regions: AU, FR, DE, IT, ES, UK, US, with local currencies. Certain limitations apply to cross-border payments, when a shopper pays in a country/region other than where you are registered.

To present this option:

1. Set enableMessages to true, to enable Pay Later messaging on your website.
2. Render Pay Later messages and buttons by adding code to your page as described in PayPal's instructions.

Disable PayPal Pay Later

You can use blockPayPalPayLaterButton to control rendering the PayPal PayLater button. Set this parameter to true if you don't want the PayPal PayLater button to be rendered. The default value is false.

Example

const paypalConfiguration = {
  style: { // Optional configuration for PayPal payment buttons.
      layout: "vertical",
      color: "blue"
  },
  cspNonce: "MY_CSP_NONCE",
  onShippingChange: function(data, actions) {
      // Listen to shipping changes.
  },
  onInit: (data, actions) => {
      // onInit is called when the button first renders.
      // Call actions.enable() to enable the button.
      actions.enable();
      // Or actions.disable() to disable it.
  },
  onClick: () => {
      // onClick is called when the button is clicked.
  },
  blockPayPalCreditButton: true,
  blockPayPalPayLaterButton: true
};

Set the intent for individual payments

From v5.34.0 onwards, you can use intent to determine when the funds are captured and whether the payment details are tokenized:

• capture: authorizes and capture immediately.
• authorize: authorizes immediately and captures later.
• subscription: specifies this is a subscription payment.
• tokenize: specifies this is a billing payment.

Example

const paypalConfiguration = {
    intent: "authorize"
};

Hide Venmo

If you and your shopper are both located in the US, Venmo is shown in the PayPal Component by default. To hide Venmo in the PayPal Component, set blockPayPalVenmoButton to true.

v6.0.0 or later

Create an instance of the Component, passing:

• Your instance of AdyenCheckout.
• The payment method-specific configuration.

const paypal = new PayPal(checkout, paypalConfiguration).mount('#paypal-container');

const paypalComponent = checkout.create('paypal', paypalConfiguration).mount('#paypal-container');

Get the payment outcome

You can use the resultCode from the API response to show the shopper the current payment status. The resultCode values you can receive for PayPal are:

However, the synchronous API response doesn't give you the final outcome. To learn the final status of a payment and determine how to proceed with the order, you should wait for webhooks. This is especially important if you use any standard risk rules or custom risk rules that trigger after authorisation.

The webhooks you can receive for PayPal are:

Include more information in webhooks

For PayPal, we recommend adding the following information to your standard webhooks:

• OFFER_CLOSED event code: informs you if the shopper failed to complete the payment. To enable receiving this event code, follow the instructions for non-default event codes.

• PayPal specific details. When enabled, your standard webhooks return the following details as additionalData:

  • paypalEmail: the email address of the shopper's PayPal account.
  • paypalPayerId: the shopper's PayPal Payer ID.
  • paypalPayerStatus: indicates if the shopper's account has been verified by PayPal.
  • paypalAddressStatus: indicates if the shopper's address has been confirmed by PayPal.
  • paypalProtectionEligibility: indicates if the payment is eligible for PayPal Seller Protection.
  • paypalPayerResidenceCountry: the shopper's country or region of residence.

  To enable receiving these details, follow the instructions for additional settings, making sure to select Include PayPal Details.

Recurring payments

To prepare for making recurring payments:

1. Enable recurring payments.
2. Configure webhooks to ensure they include details about recurring payments.

Then you can make recurring payments:

1. In the initial payment request, include specific parameters to create a token.
   This token represents the shopper's stored payment details.
2. In the later recurring payment requests, use the token.

Enable recurring payments

1. Contact PayPal Support to enable Reference Transactions on your seller account. For this, you need your Merchant ID.
2. Enable the recurring permissions on your PayPal account. Follow the steps described in the section Give Adyen access to your PayPal account, and also grant the permissions Charge an existing customer based on a prior transaction and Create and manage Recurring Payments.

Configure webhooks

Add the following information to your standard webhooks:

• recurring.recurringDetailReference and recurring.shopperReference. To enable receiving these details as additionalData in the AUTHORISATION webhook:

  1. Log in to your Customer Area.
  2. Go to Developers > Additional data.
  3. Under Payment, select Recurring details.

• RECURRING_CONTRACT event code: informs you that a recurring contract has been created. To enable receiving this event code, follow the instructions for non-default event codes.

Create a token

To create a token, include the following parameters in your initial /sessions or /paymentspayment request:

• recurringProcessingModel: Subscription or UnscheduledCardOnFile
• shopperInteraction: Ecommerce
• shopperReference: Your unique identifier for the shopper
• storePaymentMethod: true
• shopperEmail: Required when making a zero-value authorization request with amount.value: 0. Don't include this parameter if the request is not for a zero-value authorization.

When the payment has been settled, you receive a webhook containing:

• eventCode: RECURRING_CONTRACT
• originalReference: The pspReference of the initial payment.
• pspReference: This is the token for making later recurring payments for this shopper.

Make a payment with a token

To make a later, recurring payment with the token, include in your /sessions or /payments request:

• paymentMethod.storedPaymentMethodId: The pspReference from the RECURRING_CONTRACT.

  You can also get this value using the /listRecurringDetails endpoint.

• shopperReference: The unique shopper identifier that you specified when creating the token.
• shopperInteraction: ContAuth.
• recurringProcessingModel: Subscription or UnscheduledCardOnFile.

Set up PayPal Seller Protection

If you participate in the PayPal Seller Protection program, make sure that you submit the following fields in your payment requests:

• deliveryAddress
• shopperName
• lineItems

The details provided in these fields will populate the Ship to section of the PayPal checkout.

We recommend that you check that your setup is working correctly with a test payment. Make sure that you submit the correct fields, and that the test payment is marked as eligible for PayPal Seller Protection in the transaction details.

Test and go live

Test your integration

When you are done setting up your integration, use your PayPal sandbox accounts to test the PayPal payment flow. Your business sandbox account lets you simulate your role as a merchant when testing payments. With your personal sandbox account you can simulate the role of a customer.

Refer to the following resources:

You can check the status of a PayPal test payment in your Customer Area > Transactions > Payments.

Before you go live

For live operations, you need to get a live PayPal business account and configure your live environment. See Set up PayPal.

Note that in the live environment, PayPal will only be available if:

• The shopper is logged in to their PayPal account.
• The shopper has at least one valid payment method on their PayPal account.

See also