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 for you pre-designed example (HTML/CSS/JavaScript) which you can try to use on your site:

First, you need to import JavaScript SDK:

https://rawgit.com/cloudipsp/checkout-vue/latest/dist/checkout.js

Then CSS files:

https://rawgit.com/cloudipsp/checkout-vue/latest/dist/checkout.css

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
periodString‘month’

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

 Date when the first payment must be charged.

 format YYYY-MM-DD

end_timeString 

 Date when subscription must be stoped.

 format YYYY-MM-DD

 

params - order parameters descibed in main  API documentation

 

Parameter nameParameter typeDefault valueDescription
merchant_idInteger1396424 
order_descString  Supported values: `day`, `week`, `month`, `year`.
amountInteger100 
currencyString  
response_urlString  format 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 
customObject  

 

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!