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

See the Pen
Custom checkout. Version 2.0 by AliancePay (@AliancePay)
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: 1545859,
		required_rectoken: 'y',
		currency: 'UAH',
		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'
		}
	}
}
checkout("#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

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 and localization of custom fields

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:

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


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”):

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