PayPal elements

Learn how to use the PayPal elements.

With DigitalRiver.js, you can create a PayPal element that will wrap up the PayPal Checkout.js library and automatically handle payment authorization. The element follows the same creation and event structure as other DigitalRiver.js elements.

Creating a PayPal element

To create a PayPal element for a checkout or account management flow, use the createElement function exposed through the DigitalRiver Object. This object follows the same pattern and allows for the same custom classes and styles as other elements.

Checkout flow

var paypalElement = digitalriverpayments.createElement('paypal', {
    style: {
        label: 'checkout',
        size: 'responsive',
        color: 'gold',
        shape: 'pill',
        layout: 'horizontal',
        fundingicons: 'false',
        tagline: 'false'
    },
    sourceData: {
        "type": "payPal",
        "sessionId": "ea03bf6f-84ef-4993-b1e7-b7d5ecf71d1f",
        "payPal": {
            "returnUrl": "https://returnUrl.com",
            "cancelUrl": "https://cancelUrl.com"
        }
    }
});

paypalElement.mount('drjs-paypal');

Account management flow

PayPal element data object

Key	Required	Description
style	Optional	A PayPal element style option object.
sourceData	Required	A PayPal Source Details object. See the PayPal documentation for more information.

PayPal element style options

Option	Required	Description
label	Optional	The label that appears on the PayPal button. The default is blank.
color	Optional	The color of the PayPal button. The default is gold.
shape	Optional	The shape of the PayPal button. The default is pill.
layout	Optional	The layout of the PayPal button. The default is horizontal.
fundingicons	Optional	Indicates whether the funding icons appear on the button. The default is false.
tagline	Optional	Indicates whether the tagline appears on the PayPal button. The default is none.

PayPal element functions

paypal.mount();

Use this function to place the created PayPal element on your page.

Example

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

paypal.mount('paypal-container');

paypal.unmount();

Use this function to remove the PayPal element from your page. You can re-add the element to your page by calling mount().

Example

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

paypal.mount('paypal-container');

paypal.destroy();

Use this function to remove the PayPal element from your page and remove its functionality. You cannot re-add the element to your page via mount().

Example

paypal.destroy();

paypal.update();

Call this function to update the PayPal element's data.

Example

let paypalData = {
    style: {
        label: 'checkout',
        size: 'responsive',
        color: 'gold',
        shape: 'pill',
        layout: 'horizontal',
        fundingicons: 'false',
        tagline: 'false'
    },
    sourceData: {
        "type": "payPal",
        "sessionId": "ea03bf6f-84ef-4993-b1e7-b7d5ecf71d1f",
        "payPal": {
            "returnUrl": "https://returnUrl.com",
            "cancelUrl": "https://cancelUrl.com"
        }
    }
}

paypal.update(paypalData);

PayPal element events–paypal.on('event', handler);

Call this function to listen to events that can be used to build and enhance your purchase flows.

Event	Triggered When
ready	The created element is loaded and ready to accept an update request.
click	A shopper clicked the element's button.
cancel	The customer has canceled the experience.
source	The customer has authorized the payment and a source, and Drop-In returned associated data.

Ready

The Ready event triggers when the PayPal Element has loaded and is available to take an update() call.

Example

paypal.on('ready', function(event) {
    //paypal element is ready and can accept an update call
});

Response object

{
    elementType: "paypal"
}

Click

The Click event triggers when the customer clicks a PayPal Element.

Example

paypal.on('click', function(event) {
    //receive the event
}

Response object

{
    elementType: "paypal"
}

Cancel

The Cancel event triggers when customers close the PayPal Element Payment Request interface.

Example

paypal.on('cancel', function(event) {
    //receive the event
}

Response object

{
    elementType: "paypal"
}

Source

The Source event triggers when the Customer completes their interaction with the Payment Request interface, and they create a Payment Source. The emitted object will be a Payment Request Response object.

Example

paypal.on('source', function(event) {
    var source = event.source;

    //pass the source to your back end for further processing.
});

Pay in 4

Additional setup required: If you want to promote Pay in 4, contact your Account Manager. The Account Manager will send setup instructions for PayPal in 4 banners.

Pay in 4 is a credit card installment product automatically provided by PayPal when a customer signs in to PayPal Express or PayPal Checkout. This option appears by default when a customer purchases a physical product with an order value between $30 and $600. When they complete their purchase, they make a down payment. They pay the rest in three installment payments–one every two weeks. This option is only available in the US.

When a customer selects this payment method, a "soft hit" appears in their credit report.