Integrate our products into your software. Let's make payment happen together!
Look at all the possibilitiesThe landing payment page can be customized by providing one or both of the following:
Customizations are not shared between languages. Therefore, each language can have its own custom CSS or JSON configuration.
Any existing element on the page may be freely styled using CSS, except for the restrictions mentioned below.
Essential elements on the page must remain visible and functional, more specifically:
The default styling of the list of payment methods, is as shown on the left. To add a border and bottom padding to each payment method as shown on the right, the following CSS can be used:
.payment-method {
border: 2px solid rgb(128, 128, 128);
margin-bottom: 10px;
}
In order to facilitate an easy design process, the following code contains the HTML and CSS to view a production like payment page.
Only existing CSS properties can be modified.
To be added once Landing Page V2 has been finalized.
Certain aspects of the landing page can be modified by means of JSON formatted configuration.
The currently supported properties are:
Property | Description |
---|---|
translations |
A JSON object in which the default translation of one or more keys can be overridden. |
methodOrder |
A JSON array in which the default order of the payment methods can be overridden using the method keys as described here. The order in the array, specifies the order of the list on the landing page, with the first element in the array being the first element in the list. If set, any enabled payment methods not present in this array will be appended at the back of the list shown on the landing page. |
translations
property{
"BACK": "Back",
"CANCEL_REQUEST": "Cancel Request",
"PAYMENT_TITLE": "Payment",
"TO": "to",
"PROCESSING": "Processing",
"PAYMENT_REFERENCE": "Reference",
"PAYMENT_MERCHANT_REFERENCE": "Merchant Reference",
"PAYMENT_DATE": "Date",
"PAYMENT_DESCRIPTION": "",
"PAYMENT_DETAILS": "Details",
"PAYMENT_METHOD_INSTRUCTIONS": "Proceed by selecting a payment method",
"PAYMENT_PROVIDED_BY": "Payments provided by",
"PAYMENT_CANCEL": "Cancelling payment",
"PAYMENT_CANCEL_TIMEOUT": "Cancelling is taking longer than expected",
"PAYMENT_CANCEL_ABORT": "Back to",
"IDEAL": "iDeal",
"CARD": "Credit or debit card",
"BCMC": "Bancontact",
"PAYPAL": "PayPal",
"SOFORT": "Sofort",
"BANKTRANSFER": "Bank transfer",
"GIROPAY": "GiroPay",
"PAYCONIQ": "Payconiq",
"ALIPAY": "Alipay",
"KLARNA": "Klarna",
"GIFT": "Gift card",
"SEPA": "SEPA Automatic Incasso",
"APPLEPAY": "Apple Pay",
"IDEAL_DESC": "Popular in the Nederlands",
"CARD_DESC": "Popular for international payments",
"BCMC_DESC": "Popular in Belgium",
"PAYPAL_DESC": "Digital wallet",
"SOFORT_DESC": "",
"BANKTRANSFER_DESC": "Manual wire transfer from bank to bank",
"GIROPAY_DESC": "",
"PAYCONIQ_DESC": "",
"ALIPAY_DESC": "",
"KLARNA_DESC": "",
"GIFT_DESC": "",
"SEPA_DESC": "",
"APPLEPAY_DESC": ""
}
To override the BACK
key and in addition show the appleplay
and paypal
payment methods first and second respectively,
followed by the other enabled payment methods, use the following:
{
"translations": {
"BACK": "Go back..."
},
"methodOrder": ["appleplay", "paypal"]
}