PayPal elements

Search…
PayPal elements
Learn how to use the PayPal elements.
With DigitalRiver.js, you can create a PayPal element that will wrap 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, 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.
Example
1
var paypal = digitalriverpayments.createElement('paypal', {
2
    style: {
3
        label: 'checkout',
4
        size: 'responsive',
5
        color: 'gold',
6
        shape: 'pill',
7
        layout: 'horizontal',
8
        fundingicons: 'false',
9
        tagline: 'false'
10
    },
11
    sourceData: {
12
        "type": "payPal",
13
        "sessionId": "ea03bf6f-84ef-4993-b1e7-b7d5ecf71d1f",
14
        "payPal": {
15
            "returnUrl": "https://returnUrl.com",
16
            "cancelUrl": "https://cancelUrl.com"
17
        }
18
    }
19
});
20
 
21
paypalElement.mount('drjs-paypal');
Copied!
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
1
<div id="paypal-container"></div>
2
 
3
paypal.mount('paypal-container');
Copied!
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
1
<div id="paypal-container"></div>
2
 
3
paypal.mount('paypal-container');
Copied!
paypal.destroy();
Use this function to remove the PayPal element from your page as well as remove its functionality. You cannot re-add the element to your page via mount().
Example
1
paypal.destroy();
Copied!
paypal.update();
Call this function to update the PayPal element's data. 
Example
1
let paypalData = {
2
    style: {
3
        label: 'checkout',
4
        size: 'responsive',
5
        color: 'gold',
6
        shape: 'pill',
7
        layout: 'horizontal',
8
        fundingicons: 'false',
9
        tagline: 'false'
10
    },
11
    sourceData: {
12
        "type": "payPal",
13
        "sessionId": "ea03bf6f-84ef-4993-b1e7-b7d5ecf71d1f",
14
        "payPal": {
15
            "returnUrl": "https://returnUrl.com",
16
            "cancelUrl": "https://cancelUrl.com"
17
        }
18
    }
19
}
20
 
21
paypal.update(paypalData);
Copied!
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
1
paypal.on('ready', function(event) {
2
    //paypal element is ready and can accept an update call
3
});
Copied!
Response object
1
{
2
    elementType: "paypal"
3
}
Copied!
Click
The Click event triggers when the customer clicks a PayPal Element.
Example
1
paypal.on('click', function(event) {
2
    //receive the event
3
}
Copied!
Response object
1
{
2
    elementType: "paypal"
3
}
Copied!
Cancel
The Cancel event triggers when the customer closes the PayPal Element Payment Request interface.
Example
1
paypal.on('cancel', function(event) {
2
    //receive the event
3
}
Copied!
Response object
1
{
2
    elementType: "paypal"
3
}
Copied!
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
1
paypal.on('source', function(event) {
2
    var source = event.source;
3
  
4
    //pass the source to your back end for further processing.
5
});
Copied!
Pay in 4
Additional setup required: If you are interested in promoting Pay in 4, contact your Account Manager. The Account Manager will send set up 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, and the order value is between $30 and $600. When they complete their purchase, they make a down payment. They pay the rest in 3 payments–one every two weeks. This option is only available in the US.
When a customer selects this payment method, a "soft hit" shows up in their credit report.
Online Banking elements
Compliance element
Last modified 9mo ago
Copy link
Contents
Creating a PayPal element
PayPal element functions
PayPal element events–paypal.on('event', handler);
Pay in 4