PayPal: Drop In Guide

​

Pre-requisites

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

​

Show Universal Checkout

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

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

​

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:

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,     
    }
}

​

Limitations

The button provided by PayPal has a maximum width of 750px. This value is hardcoded by PayPal and cannot be updated. We encourage you to limit the the width of the checkout to 750px to have consistent payment method buttons.

​

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.

​

Vaulting

Vaulting PayPal requires the Billing Agreement API to be activated on your account. Get in touch with your account manager at PayPal to activate this feature.

In order to be approved by PayPal for Billing Agreements, you may be required to collect device data using their Fraudnet/Magnes library and pass a user session identifier to PayPal during the transaction. This can be done by passing this as metadata.paypal_client_metadata_id in the Primer Client Session/Payment API.

In order to vault PayPal accounts, pass the following data in the Client Session:

​

Pre-requisites

Step 1: Add a URL scheme

PayPal on iOS makes use of deep links to bring the user back to your app.

Navigate in the Info tab in your project’s target settings, and add a URL type and give it a URL scheme value, e.g. merchant.

Step 2: Configure Primer settings
Once the URL scheme is added in your project, pass it to the PrimerSettings object along with the rest of you settings.

let settings = PrimerSettings(
    // ...
    // 👇 Add your Apple Pay options
    paymentMethodOptions: PrimerPaymentMethodOptions(
        urlScheme: "merchant://"
    ),
    // ...
)
Primer.shared.configure(settings: settings)

​

Show Universal Checkout

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

class MyViewController: UIViewController {
  func startUniversalCheckout() {
    Primer.shared.showUniversalCheckout(clientToken: self.clientToken)
  }
}

​

Customization

Check the customization guide to learn how to customize Universal Checkout.

​

Vaulting

Vaulting PayPal requires the Billing Agreement API to be activated on your account. Get in touch with your account manager at PayPal to activate this feature.

In order to be approved by PayPal for Billing Agreements, you may be required to collect device data using their Fraudnet/Magnes library and pass a user session identifier to PayPal during the transaction. This can be done by passing this as metadata.paypal_client_metadata_id in the Primer Client Session/Payment API.

In order to vault PayPal accounts, pass the following data in the Client Session:

​

Pre-requisites

PayPal requires the SDK to open a browser to allow the customer to authenticate and approve their order. To prepare your app for that, add this to your AndroidManifest.xml

<activity
    android:name="io.primer.android.WebBrowserInteropActivity"
    android:launchMode="singleTask">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="${applicationId}.primer" />
    </intent-filter>
</activity>

The applicationId is defined as part of your defaultConfig, on your app’s build.gradle file. You can find more about it here.

android {
    defaultConfig {
        applicationId "your.application.id"
        (...)
        manifestPlaceholders = [appId: applicationId.toLowerCase()]
    }
    (...)
}

<data android:scheme="${appId}.primer" />

​

Show Universal Checkout

val options = Options(redirectScheme = "primer")
val config = PrimerConfig(settings = PrimerSettings(options = options))
// configure settings
Primer.instance.configure(config, listener)
// show Universal Checkout, or...
Primer.instance.showUniversalCheckout(context, token)
// show only PayPal
Primer.instance.showPaymentMethod(
        context,
        token,
        PrimerPaymentMethod.PAYPAL,
        PaymentMethodIntent.CHECKOUT
)

​

Customization

Check the customization guide to learn how to customize Universal Checkout.

​

Vaulting

Vaulting PayPal requires the Billing Agreement API to be activated on your account. Get in touch with your account manager at PayPal to activate this feature.

In order to be approved by PayPal for Billing Agreements, you may be required to collect device data using their Fraudnet/Magnes library and pass a user session identifier to PayPal during the transaction. This can be done by passing this as metadata.paypal_client_metadata_id in the Primer Client Session/Payment API.

In order to vault PayPal accounts, pass the following data in the Client Session:

​

Pre-requisites

iOS To render the ‘PayPal’ button go to the ./ios directory of your React Native project and open the .xcworkspace file with Xcode. Go to the info tab in the project folder and add a custom URL type like this:

Finally, go to the settings object in your javascript code once again and add the newly created URL type scheme and its identifier:

const settings: PrimerSettings = {
        // ...
        paymentMethodOptions: {
            // ...
            iOS: {
                urlScheme: 'merchant://'
            },
        }
};

await Primer.configure(settings);

​

Android

PayPal requires an authentication step that is completed in an external browser view. To support this, open ./android/app/src/main/AndroidManifest.xml in your project, then add the following:

<!-- </activity> some other activity -->
<activity
    android:name="io.primer.android.WebBrowserInteropActivity"
    android:launchMode="singleTask">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="primer" />
    </intent-filter>
</activity>

Finally, go to the settings object in your javascript code once again and add the newly created URL type scheme and its identifier:

const settings: PrimerSettings = {
        // ...
        paymentMethodOptions: {
            // ...
            android: {
                redirectScheme: 'primer'
            },
        }
};
await Primer.configure(settings);

​

Show Universal Checkout

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

const CheckoutScreen = async (props: any) => {
  const onUniversalCheckoutButtonTapped = async () => {
    try {
      await Primer.showUniversalCheckout(clientToken)
    } catch (err) {
      // handle error
    }
  }
}

​

Customization

Check the customization guide to learn how to customize Universal Checkout.

​

Vaulting

Vaulting PayPal requires the Billing Agreement API to be activated on your account. Get in touch with your account manager at PayPal to activate this feature.

In order to be approved by PayPal for Billing Agreements, you may be required to collect device data using their Fraudnet/Magnes library and pass a user session identifier to PayPal during the transaction. This can be done by passing this as metadata.paypal_client_metadata_id in the Primer Client Session/Payment API.

In order to vault PayPal accounts, pass the following data in the Client Session:

When showing drop-in checkout, set the option paymentFlow to PREFER_VAULT.

    Primer.showUniversalCheckout(clientToken, {
        // Other options
        paypal: {
            paymentFlow: "PREFER_VAULT"
        }
    });

​

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!

​

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!

​

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!

​

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!