API FONDYVersion 1.0

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:

Basic checkout design example. Card, ApplePay, GooglePay


First, you need to import JavaScript SDK:


Then CSS files:


Checkout page is configured with JavaScript code:


var Options = {
	options: {
		methods: ['card', 'banklinks_eu','wallets'],
		cardIcons: ['mastercard', 'visa'],
		active_tab: 'card',
		default_country: 'PL',
		countries: ["PL","IE","GB","CZ","GE"],
		fields: false,
		title: 'my_title',
		link: 'https://shop.com',
		fullScreen: true,
		button: true,
		locales: ['fr','en','cs','sk'],
		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: {
		pl: {
			card_number: 'Numer karty',
			my_title: 'Cel płatności',
			my_order_desc: 'Płatność testowa'
		en: {
			card_number: 'Card number',
			my_title: 'Order description',
			my_order_desc: 'Test order'


JavaScript configuration has following structure:

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


options - payment form customization options


Parameter nameParameter typeDefault valueDescription
methods Array [‘card’, ‘banklinks_eu’,’wallets’]

 Enable checkout tabs:  cards, internet banking, Google Pay, Apple Pay.

 Supported values: `card` – bank cards, `banklinks_eu` – internet banking and local country payment methods (iDEAL, Giropay, MyBank, Blick etc. ), `wallets` – Google and Apple Pay.

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

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 a compact area (false) or in full page (true)
button Boolean true Defines if default pay button  should be shown, or it will be a custom 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 style 1



Example style 2



Example with additional merchant fields



Example with subscription 1

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



Example ApplePay/GooglePay buttons



Example with order created on backend

Create order at your server:

curl -i -X POST \
 -H "Content-Type:application/json" \
 -d \
  "request": {
    "server_callback_url": "http://myshop/callback/",
    "order_id": "TestOrder_JSSDK_v2",
    "currency": "USD",
    "merchant_id": 1396424,
    "order_desc": "Test payment",
    "lifetime" : 999999
    "amount": 1000,
    "signature": "91ea7da493a8367410fe3d7f877fb5e0ed666490"
}' \

Receive order token:




Load checkout page with order token as a parameter:



Example to customise bank links payment method

Specify parameters:

    active_tab: 'banklinks_eu', //enable bank links tab by default
    default_country: 'PL', //customize banks open by default
    countries: ["PL","IE","GB","CZ"] //customize banks countries list
  messages: {
    en: {
      banklinks_eu: 'Bank links',   //you can rename payment methods on your own 
      sepa: 'SEPA Direct Debit'

Connect to FONDY and learn more!