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
Example
var paypal = digitalriverpayments.createElement('paypal', {
style: {
label: 'checkout',
size: 'responsive',
color: 'gold',
shape: 'pill',
layout: 'horizontal',
fundingicons: 'false',
tagline: 'false'
},
sourceData: {
"type": "payPal",
"amount": 10,
"currency": "USD",
"payPal": {
"returnUrl": "https://returnUrl.com",
"cancelUrl": "https://cancelUrl.com",
"items": [{
"name": "Galaxy S9+ 256GB (Unlocked)",
"quantity": 1,
"unitAmount": 959.99
}, {
"name": "AKG Y50BT On-Ear Bluetooth Headphones",
"quantity": 1,
"unitAmount": 0
}],
"taxAmount": 67.2,
"shippingAmount": 0,
"amountsEstimated": true,
"requestShipping": true,
"shipping": {
"recipient": "Fred Flintstone",
"phoneNumber": "952-555-1212",
"address": {
"line1": "10380 Bren Road W",
"city": "Minneapolis",
"state": "MN",
"country": "US",
"postalCode": "55403"
}
}
}
}
});
paypalElement.mount('drjs-paypal');

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 funtions

paypal.mount();

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

Example
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
Example
<div id="paypal-container"></div>
paypal.mount('paypal-container');

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
Example
paypal.destroy();

paypal.update();

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

Example
Example
let paypalData = {
style: {
label: 'checkout',
size: 'responsive',
color: 'gold',
shape: 'pill',
layout: 'horizontal',
fundingicons: 'false',
tagline: 'false'
},
sourceData: {
"type": "payPal",
"amount": 10,
"currency": "USD",
"payPal": {
"returnUrl": "https://returnUrl.com",
"cancelUrl": "https://cancelUrl.com",
"items": [{
"name": "Galaxy S9+ 256GB (Unlocked)",
"quantity": 1,
"unitAmount": 959.99
}, {
"name": "AKG Y50BT On-Ear Bluetooth Headphones",
"quantity": 1,
"unitAmount": 0
}],
"taxAmount": 67.2,
"shippingAmount": 0,
"amountsEstimated": true,
"requestShipping": true,
"shipping": {
"recipient": "Fred Flintstone",
"phoneNumber": "952-555-1212",
"address": {
"line1": "10380 Bren Road W",
"city": "Minneapolis",
"state": "MN",
"country": "US",
"postalCode": "55403"
}
}
}
}
}
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
Example
paypal.on('ready', function(event) {
//paypal element is ready and can accept an update call
});
Response object
Response object
{
elementType: "paypal"
}

Click

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

Example
Example
paypal.on('click', function(event) {
//receive the event
}
Response object
Response object
{
elementType: "paypal"
}

Cancel

The Cancel event triggers when the customer closes the PayPal Element Payment Request interface.

Example
Example
paypal.on('cancel', function(event) {
//receive the event
}
Response object
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
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 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.