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 name	Parameter type	Default value	Description
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

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

params - order parameters descibed in main  API documentation

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://pay.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'
    }
  }