Payment component

Learn how to accept payment in a secure, customizable component

The payment component displays transaction-applicable payment methods and then processes the customer's selection.

For a list of payments the component supports, refer to Supported payment methods.

Unless your checkout only uses the wallet component (plus the mandatory compliance component), you'll need to implement this component.

To use the component's features, you'll need to create it and mount it.

Features

After customers make a selection, the payment component can, when necessary, redirect customers to payment providers and handle PSD2/SCA requirements.

The component also has the capability to:

Saved payment options

The component can display a customer's saved payment methods for convenience purposes.

To activate this feature, you need to pass customerId in the create checkout session request. Digital River then determines whether the referenced customer exists, and, if it does, retrieves and displays its transaction-applicable payment sources[].

Save a payment method for future purchases

The component can ask customers whether they'd like to save a payment method for future purchases.

To activate this feature, you must pass customerId in the create checkout session request.

If the referenced resource doesn't exist in your account, Digital River creates a customer.

If the payment method selected by customers supports reusability, then the component asks whether they'd like to save it for future purchases. If customers opt to do so, then, after Digital River creates the source, we save it to that customer.

Custom consents

For each payment method that the component displays, customers are shown the terms of sale and the privacy policy of the transaction's designated selling entity.

If you save your consents in Digital River Dashboard, they are appended to Digital River's disclosures.

The component requires customers to accept all of these terms before they can complete the purchase.

If you have no customized consents in Dashboard, the component only displays Digital River's disclosures.

Creating the payment component

To create an instance of the payment component, pass 'payment' to createComponent().

let paymentComponent;
...
paymentComponent = components.createComponent('payment');
...

Mounting the payment component

To attach the payment component to your DOM, pass the id of its container to mount().

<div id="payment-container" style="display: block">
...
paymentComponent.mount('payment-container');
...

Last updated