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 nameParameter typeDefault valueDescription
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

 

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 described 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 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

Connect to FONDY and learn more!