Payment-method icon

Riverty Component

Add Riverty to an existing Components integration.

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:

  1. Collect your shopper's details, and specify these in your /payments request.
  2. Provide information about the purchased items in the lineItems object of your /payments request.
  3. Use Riverty’s profile tracking technology to calculate the profile tracking ID, and specify this in your /payments request.
  4. 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 as deviceFingerprint.
    You need a Riverty profileTrackingShopId for the profile tracking integration. Get this profileTrackingShopId 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 the deviceFingerprint 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:

  1. 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.

  2. Pass the full response from the /paymentMethods call as the paymentMethodsResponse object when creating an instance of the AdyenCheckout.

  3. 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 case checkout, 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 a state.data. If state.isValid is true, collect the state.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 -white_check_mark- 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 -white_check_mark- Shopper's first name. (B2B payments are currently not supported. Providing a business name here may result in a rejection.)
shopperName.lastName -white_check_mark- Shopper's last name. (B2B payments are currently not supported. Providing a business name here may result in a rejection.)
telephoneNumber -white_check_mark- Shopper's telephone number.
shopperEmail -white_check_mark- Shopper's email address.
dateOfBirth -white_check_mark- Shopper's date of birth, in format: YYYY-MM-DD
shopperIP -white_check_mark- The shopper's IP address. Riverty uses this for risk checks.
billingAddress -white_check_mark- The address where to send the invoice.
deliveryAddress -white_check_mark- 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 -white_check_mark- 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