Accept Riverty payments using an existing Components integration. Our Web Component renders Riverty in your payment form, and collects the required payment information from the shopper.
Requirements
Requirement | Description |
---|---|
Integration type | Make sure that you have built your Web Components integration. The minimum required version is 5.58.0. |
Setup steps | Before you begin, add Riverty in your test Customer Area. |
Process overview
When accepting a payment with Riverty:
- Collect your shopper's details, and specify these in your /payments request.
- Provide information about the purchased items in the
lineItems
object of your /payments request. - Use Riverty’s profile tracking technology to calculate the profile tracking ID, and specify this in your /payments request.
- Capture the payment after the goods are sent. This triggers the invoice that the merchant sends to the shopper.
When using profile tracking
When making a Riverty payment, profile tracking is recommended in DE, AT, CH to improve synchronous acceptance. It is used for risk evaluation of shoppers.
Implement profile tracking by using a Riverty script that calculates a profile tracking ID for each shopper. Use the script in one of two ways:
- Run the script when the shopper is on your checkout page.
The script collects data about the shopper’s device, the so-called profile tracking ID, to be able to predict scripted attacks. This data can be encrypted in a string which can be sent in the /payments request asdeviceFingerprint
.
You need a RivertyprofileTrackingShopId
for the profile tracking integration. Get thisprofileTrackingShopId
from Riverty’s implementation support team via implementation_BNPL@riverty.com. - Redirect the shopper to a page hosted by Riverty that will run the script.
If thedeviceFingerprint
value is missing in the /payments request, the result of the transaction attempt might be redirectShopper (as explained below). You are to then redirect the shopper to a Riverty hosted page where the same profile tracking script is already implemented to ensure in the end the transaction is compliant with regulation.
To improve the customer experience and reduce the number of transactions that are redirected, it is advisable to run the script when the shopper is on your checkout page.
Show Riverty in your payment form
To show Riverty in your payment form:
-
From your server, make a POST /paymentMethods request and specify one of the following combinations of countryCode and amount.currency:
Country/region countryCode
amount.currency
Germany DE EUR Austria AT EUR Switzerland CH CHF Netherlands NL EUR Belgium BE EUR The response contains the payment method type
riverty
. -
Pass the full response from the /paymentMethods call as the
paymentMethodsResponse
object when creating an instance of the AdyenCheckout. -
Add the Riverty Component:
a. Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:
<div id="riverty-container"></div>
b. Use the
create
method of your AdyenCheckout instance, in this casecheckout
, to create the Component. Optionally include configuration for the visibility settings of the following shopper input fields:Parameter Description personalDetails
Shopper name, date of birth, phone number, and email address. billingAddress
The address where to send the invoice. deliveryAddress
The address where the purchased goods should be delivered. If you remove these fields from your payment form, you need to provide this information in your
/payments
request. For information on the required fields, refer to Make a payment.This is an example of creating an instance of the Riverty Component with various configuration options:
const riverty = checkout.create("riverty", { countryCode: "DE", // the country code from the /paymentMethods` request visibility: { // Optional configuration personalDetails: "hidden", // These fields will not appear on the payment form. billingAddress: "readOnly", // These fields will appear on the payment form, but the shopper cannot edit them. deliveryAddress: "editable" //These fields will appear on the payment form, and the shopper can edit them. This is the default behavior. } }).mount('#riverty-container');;
When the shopper selects to pay, the Component calls the
onSubmit
event, which contains astate.data
. Ifstate.isValid
is true, collect thestate.data
and pass this to your server and proceed making a /payments request from your server.
Make a payment
From your server, make a /payments request:
Parameter | Required | Description |
---|---|---|
paymentMethod.type | ![]() |
The type of Riverty payment. Possible values: - riverty: Pay in 14. - riverty_account: Monthly Consolidated Invoice. - sepadirectdebit_riverty: Secure Direct Debit. |
paymentMethod.iban |
When the paymentMethod.type = sepadirectdebit_riverty provide the IBAN of the shopper. | |
deviceFingerprint | A string containing the shopper's calculated profile tracking ID. | |
shopperName.firstName | ![]() |
Shopper's first name. (B2B payments are currently not supported. Providing a business name here may result in a rejection.) |
shopperName.lastName | ![]() |
Shopper's last name. (B2B payments are currently not supported. Providing a business name here may result in a rejection.) |
telephoneNumber | ![]() |
Shopper's telephone number. |
shopperEmail | ![]() |
Shopper's email address. |
dateOfBirth | ![]() |
Shopper's date of birth, in format: YYYY-MM-DD |
shopperIP | ![]() |
The shopper's IP address. Riverty uses this for risk checks. |
billingAddress | ![]() |
The address where to send the invoice. |
deliveryAddress | ![]() |
The address where the purchased goods should be delivered. If the shopper is using Riverty for the first time, the payment can be rejected if deliveryAddress is different from billingAddress , for risk reasons. If deliveryAddress is different from billingAddress , the following fields are required to identify the recipient at the delivery address: deliveryAddress.firstName and deliveryAddress.lastName . |
lineItems | ![]() |
Price and product information about the purchased items. This is included on the invoice that Riverty sends to the shopper. Required values for each lineItem : quantity , description and id |