API FONDYVersion 1.0

The previous version is deprecated.

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

See the Pen Fondy – custom checkout. Version 2.0 by CloudIPSP (@cloudipsp) on CodePen.

First, you need to import JavaScript SDK:

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

Then CSS files:

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

Checkout page is configured with JavaScript code:

var Options = {
	options: {
		methods: ['card', 'banklinks_eu', 'wallets', 'local_methods'],
		methods_disabled: [],
		card_icons: ['mastercard', 'visa', 'maestro'],
		active_tab: 'card',
		default_country: 'PL',
		countries: ["PL", "IE", "GB", "CZ", "GE"],
		fields: false,
		title: 'my_title',
		link: 'https://shop.com',
		full_screen: true,
		button: true,
		locales: ['cs', 'de', 'en', 'es', 'fr', 'hu', 'it', 'ko', 'lv', 'pl', 'ro', 'ru', 'sk', 'uk'],
		email: true
	},
	params: {
		merchant_id: 1396424,
		required_rectoken: 'y',
		currency: 'EUR',
		amount: 500,
		order_desc: 'my_order_desc',
		response_url: 'http://shop.com/thankyoupage'
	},
	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'
		}
	}
}
fondy("#app", Options);

JavaScript configuration has the 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’, ‘local_methods’]	Enable checkout payment methods:  cards, internet banking, Google Pay, Apple Pay, Local payment methods  Supported values: `card` – bank cards, `banklinks_eu` – internet banking and local country payment methods (iDEAL, Giropay, MyBank, Blick etc. ), `wallets` – Google and Apple Pay, `local_methods` – Local country methods, such as GiroPay, EPS, SafetyPay, Multibanco, MyBank, MyBank OXXO, Skrill, iDeal, Blik  Example of payment page with the maximum set of payment methods: Example with extended payment methods
methods_disabled	Array	[]	Disable checkout payment methods:  cards, internet banking, Google Pay, Apple Pay, Local payment methods  Supported values: `card`, `banklinks_eu`, `wallets`, `local_methods`
card_icons	Array	[‘mastercard’, ‘visa’]	Payment systems logos set.  Supported values: `mastercard`, `visa`, `maestro`.
fields	Boolean	false	Enables additional input fields on checkout page. Example with additional merchant fields
title	String
link	String
full_screen	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: "cs": "Čeština", "de": "Deutsche", "en": "English", "es": "Español", "fr": "Français", "hu": "Magyar", "it": "Italiano", "ko": "한국어", "lv": "Latviešu", "pl": "Polski", "ro": "Română", "ru": "Русский", "sk": "Slovenský", "uk": "Українською"
email	Boolean	false	Defines if email must be provided on checkout page by customer.
api_domain	String	‘pay.fondy.eu’
theme	Object

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 described 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 light background, black card

Example style dark background, silver card

Example with additional merchant fields

See the Pen Fondy – custom checkout. Version 2.0 by CloudIPSP (@cloudipsp) on CodePen.

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.

See the Pen Fondy – custom checkout. Version 2.0 by CloudIPSP (@cloudipsp) on CodePen.

Example with subscription and localization of custom fields

See the Pen Fondy – custom checkout. Subscription. Version 2.0 by CloudIPSP (@cloudipsp) on CodePen.

Example with extended payment methods

See the Pen Fondy – custom checkout. Version 2.0 by CloudIPSP (@cloudipsp) on CodePen.

Example with handling of pay-button click event

See the Pen Fondy – checkout with own submit buttons. Version 2.0 by CloudIPSP (@cloudipsp) on CodePen.

Example with JavaScript callbacks

See the Pen Fondy – custom checkout. Javascript calbacks. Version 2.0 by CloudIPSP (@cloudipsp) on CodePen.

Example ApplePay/GooglePay buttons

See the Pen Fondy – custom checkout. Apple/GooglePay button. Version 2.0 by CloudIPSP (@cloudipsp) on CodePen.

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:

See the Pen Fondy – custom checkout. With order created on backend. Version 2.0 by CloudIPSP (@cloudipsp) on CodePen.

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 
      local_methods: "Skrill"
    }
  }

See the Pen Fondy – custom checkout. Version 2.0 by CloudIPSP (@cloudipsp) on CodePen.

Using colour presets

You can use gradient color presets with object theme in the options section.

Example:

    options: {
      methods: ['card', 'banklinks_eu', 'wallets', 'local_methods'],
      ...
      ,
      theme: {
        type: "light",
        preset: "black"
    }

type attribute can have “light” or “dark” value.

preset attribute can have one of the following values:


vibrant_gold
vibrant_silver
euphoric_pink
black
solid_black
silver
black_and_white
heated_steel
nude_pink
tropical_gold
navy_shimmer


See the Pen Fondy – minimal checkout ligt euphoric_pink v2.0 by CloudIPSP (@cloudipsp) on CodePen.

All gradients naming you can match as follows:

Or you can use custom flat colors with css_variable parameter (to use it, you need to set preset: “reset”):

See the Pen Fondy – minimal checkout ligt euphoric_pink v2.0 by CloudIPSP (@cloudipsp) on CodePen.

We recommend to use such colors:
valencia: #D94343
flame_pea: #DF583D
jaffa: #E86F33
zest: #E58626
gamboge: #EBA212
citron: #A9B221
sushi: #82B536
chelsea_cucumber: #6BA854
fruit_salad: #54A868
breaker_bay: #54A199
pelorous: #43ABBF
havelock_blue: #57A4DC
curious_blue: #4F8BE0
indigo: #6073D1
fuchsia_blue: #7054C7
studio: #8453B5
wisteria: #9D55B5
fuchsia_pink: #BA5BB2
mulberry: #C74E8A
cabaret: #D4486B