Before you start

This guide assumes that you know how to

Accept payments with PayPal

Prepare the client session

PayPal requires the following data to process a payment successfully. Pass the following data in the client session, or in the payment request (for manual payment creation).

Parameter NameRequiredDescription
3-letter currency code in ISO 4217 format, e.g. USD for US dollars
  1. order
Details of the line items of the order
  1. order

The country code of the user is required for PayPal.

Prepare the SDK for payments

Pre-requisites

If your website uses Content Security Policy, make sure to add the following rules:

PolicyOrigin
frame-srcc.paypal.com
child-srcc.paypal.com
script-srcc.paypal.com

Show Universal Checkout

PayPal is automatically presented to the customer when calling Primer.showUniversalCheckout.

1234567891011
try {  await Primer.showUniversalCheckout(clientToken, {    container: '#checkout-container',    options,    onCheckoutComplete({ payment }) {      console.log('Checkout complete.', payment)    },  })} catch (e) {  // handle error}
typescript
copy

Customization

Check the Customization Guide to learn how to customize payment method buttons.

Additionally, you can style the PayPal button by passing the following options:

1234567891011
const options = {    /* Other options... */    paypal: {        buttonColor: 'gold', // 'gold' (default) | 'blue' | 'silver' | 'white' | 'black'        buttonShape: 'pill', // 'pill' | 'rect'        buttonSize: 'small', // 'small' | 'medium' | 'large' | 'responsive'        buttonHeight: 50,        buttonLabel: 'paypal', // 'paypal' (default) | 'checkout' | 'credit' | 'pay' | 'buynow' | 'installment'        buttonTagline: false,         }}
typescript
copy

Troubleshooting

  • If the PayPal button fails to appear, check that a valid countryCode has been provided in the client session.

  • If PayPal fails to render when the button is clicked, open your Developer Inspector - PayPal usually prints an error there.

Test

When testing PayPal in your Primer Sandbox, make sure to use a PayPal sandbox account, not your own PayPal account. Go to PayPal’s Developer Dashboard to manage your sandbox accounts.

Go live

You don’t need to do anything particular to go live! Just make sure to use the Production credentials!