Ratepay Component

Our Ratepay Component renders Ratepay in your payment form, and collects the required payment information from the shopper.

When making a Ratepay payment, you also need to:

1. Collect shopper details, and specify these in your payment request.
2. Provide information about the purchased items by specifying lineItems in your payment request.
3. Using Ratepay's device fingerprinting,calculate the shopper's device fingerprint, and specify it in your payment request. Ratepay uses the fingerprint for risk evaluation.
4. Capture the payment after the goods have been sent. This triggers the invoice to be sent to the shopper by the merchant.

Requirements

Import resources for v6

If you are using Web Components v6, import the Component that you need for Ratepay:

import { AdyenCheckout, RatePay } from '@adyen/adyen-web'

Show Ratepay in your payment form

To present the Ratepay Component 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
   Austria	AT	EUR
   Germany	DE	EUR
   The Netherlands v3.22.1 or later	NL	EUR
   Switzerland	CH	CHF

   The response contains supported payment method types:

   Payment Method	paymentMethod.type
   Ratepay Open invoice	ratepay
   Ratepay Direct debit v5.13.0 or later	ratepay_directdebit

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

3. Add the Ratepay Component:

   a. Create a DOM element for Ratepay, placing it where you want the form to be rendered:

   <div id="ratepay-container"></div>

   b. Create an instance of the Ratepay Component, and mount it. You can also include optional configuration for the visibility of the following shopper input fields:

   • personalDetails: Shopper name, date of birth, phone number, and email address.
   • billingAddress: The address where to send the invoice.
   • deliveryAddress: The address where the goods should be delivered.

   If you remove the above-mentioned fields from the configuration, you will need to collect this information and then provide it in your /payments request. For information on the required fields, refer to Make a payment.

   Here's an example of creating an instance of the Ratepay Component with various configuration options.

   const ratepay = checkout.create("ratepay", { // For Ratepay Direct Debit, use "ratepay_directdebit".
     countryCode: "NL", // 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('#ratepay-container');;
   

Calculate the device fingerprint

Before making a payment you need to implement Ratepay's device fingerprinting. Send the calculated device fingerprint when making a /payments request.

Make a payment

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.

From your server, make a /payments request, including the following parameters: