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:

https://pay.fondy.eu/latest/checkout.js

Then CSS files:

https://pay.fondy.eu/latest/checkout.css

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
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  Order description
amountInteger100 
currencyString  
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 
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 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"
  }
}' \
 'https://api.fondy.eu/api/checkout/token'

Receive order token:

{
  "response":{
    "response_status":"success",
    "token":"b3c178ad84446ef36eaab365b1e12e6987e9b3d9"
  }
}

 

 

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!