API FONDYVersion 1.0

Create a checkout page with an individual design

Project at GitHub: https://github.com/cloudipsp/checkout-vue

You can design your own checkout page hosted on your website as a regular HTML + CSS code.

We developed pre-designed example (HTML/CSS/JavaScript) which you can try to use on your site:

First, you need to import JavaScript SDK:


Then CSS files:


Checkout page is configured with JavaScript code:


var Options = {
	options: {
		methods: ['card'],
		cardIcons: ['mastercard', 'visa', 'diners-club', 'american-express'],
		fields: false,
		title: 'my_title',
		link: 'https://shop.com',
		fullScreen: true,
		button: true,
		locales: ['en'],
		email: true,
		tooltip: true,
		fee: true,
	params: {
		merchant_id: 1396424,
		required_rectoken: 'y',
		currency: 'USD',
		amount: 500,
		order_desc: 'my_order_desc',
		response_url: 'http://shop.com/thankyoupage',
		email: '',
		lang: 'ru'
	messages: {
		en: {
			card_number: 'Card number',
			my_title: 'Order description',
			my_order_desc: 'Test order'


JavaScript configuration has folowing structure:

  options: {},
  regular: {},
  recurring: {},
  params: {},
  messages: {},
  validate: {}


options - payment form customization options


Parameter nameParameter typeDefault valueDescription
methods Array [‘card’]

 Enable checkout tabs:  cards, ibanks, emoney, direct debit.

 Supported values: `card`, `emoney`, `ibank`, `cash`, `sepa`.

 Example of payment page with the maximum set of payment methods: Example with extended payment methods

ibank Array 

 Payment methods available in “ibanks” checkout tab.

Supported values: `p24`, `platba24`, `raiffeisen`.

emoney Array 

 Payment methods available in “emoney” checkout tab.

Supported values: `paypal`, `qiwi`, `webmoney`, `yamoney`.

cash Array 

 Payment methods available in “cash” checkout tab.

 Supported values: `liqpay`.

fast Array  
cardIcons Array [‘mastercard’, ‘visa’]

 Payment systems logos set.

 Supported values: `mastercard`, `visa`, `mir`, `prostir`, `diners-club`, `american-express`.

fields Boolean false Enables additional input fields on checkout page. Example with additional merchant fields
title String  
link String  
fullScreen Boolean true Defines whether checkout form will be placed in compact area (false) or in full page (true)
button Boolean true Defines if default pay button  should be shown, or it will be a custome one
locales Array 

 Available checkout page locales .

 Supported values: `ru`, `en`, `uk`, `lv`, `fr`, `cs`, `sk`.

email Boolean false Defines if email must be provided on checkout page by customer.
tooltip Boolean true 
apiDomain String ‘api.fondy.eu’ 
fee Boolean true Client fee.
css String  Supported values: `bootstrap3`, `bootstrap4`, `foundation6`.


regular - enables subscription option on checkout page. See example with subscription and example with subscription 2


Parameter nameParameter typeDefault valueDescription
insertBooleanfalse Enables subscription payments
openBooleanfalseShows frequency and period options for subscription payments
hideBooleanfalseMake subscription options read-only for customer
periodArray[‘day’, ‘week’, ‘month’, ‘year’]

 Subscription period

 Supported values: `day`, `week`, `month`, `year`.


recurring - subscription parameters values: period, frequency, start date, end date, regular amount


Parameter nameParameter typeDefault valueDescription
everyInteger1Number of intervals

The interval with which a subscription should be charged

 Supported values: `day`, `week`, `month`, `year`.

amountInteger100 The amount to be charged on the interval specified if differs from order amount.

 Date when the first payment must be charged.

 format YYYY-MM-DD


 Date when subscription must be stoped.

 format YYYY-MM-DD


params - order parameters descibed in main  API documentation


Parameter nameParameter typeDefault valueDescription
order_descString  Order description
response_urlString  Response url
langString ‘en’ 
required_rectokenString  Supported values: `Y`, `N`, `y`, `n`.
verificationString  Supported values: `Y`, `N`, `y`, `n`.
verification_typeString  Supported values: `amount`, `code`
emailString  format email
tokenString  length 40
offerBoolean false 


messages - Messages localization


  messages: {
    {en}: {
      {id}: {value},


validate - Form validation errors localization


  validate: {
    {en}: {
      {id}: {value},


Below are examples of ready-made designs of payment pages in different styles.

Example 1



Example 2



Example with additional merchant fields



Example with subscription

After the first successful payment, payment gateway will create a calendar with scheduled regular payments. The frequency and frequency are set in the parameters of the payment page.



Example with subscription 2



Example with extended payment methods



Example with handling of pay-button click event



Example with JavaScript callbacks



Connect to FONDY and learn more!