API FONDYВерсія 1.0

Попередня версія застаріла.

Проєкт на GitHub: https://github.com/cloudipsp/checkout-vue

Ви можете створити власну сторінку оформлення замовлення, розміщену на вашому вебсайті у вигляді звичайного HTML + CSS коду.

Ми розробили готові приклади (HTML/CSS/JavaScript), які ви можете спробувати використати на своєму сайті:

Приклад базового дизайну каси. Картка, Apple Pay, Google Pay

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

По-перше, вам потрібно імпортувати JavaScript SDK:

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

Потім файли CSS:

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

Сторінка оформлення замовлення налаштована за допомогою JavaScript коду:

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 має наступну структуру:

{
  options: {},
  regular: {},
  recurring: {},
  params: {},
  messages: {},
  validate: {}
}

options - опції налаштування платіжної форми

Назва параметра	Тип параметра	Значення за замовчуванням	Опис
methods	Array	[‘card’, ‘banklinks_eu’, ‘wallets’, ‘local_methods’]	Увімкніть способи оплати на касі: картки, інтернет-банкінг, Google Pay, Apple Pay, місцеві способи оплати  Значення, що підтримуються: `card` – bank cards, `banklinks_eu` – інтернет-банкінг та локальні способи оплати в країні (iDEAL, Giropay, MyBank, Blick, інші. ), `wallets` – Google Pay and Apple Pay, `local_methods` – Локальні національні методи, такі як GiroPay, EPS, SafetyPay, Multibanco, MyBank, MyBank OXXO, Skrill, iDeal, Blik  Приклад сторінки оплати з максимальним набором способів оплати: Приклад з розширеними способами оплати
methods_disabled	Array	[]	Вимкнути способи оплати на касі: картки, інтернет-банкінг, Google Pay, Apple Pay, локальні способи оплати  Підтримувані значення: `card`, `banklinks_eu`, `wallets`, `local_methods`
card_icons	Array	[‘mastercard’, ‘visa’]	Набір логотипів платіжних систем  Підтримувані значення: `mastercard`, `visa`, `maestro`
fields	Boolean	false	Дозволяє вводити додаткові поля на сторінці оформлення замовлення. Приклад з додатковими полями мерчанта
title	String
link	String
full_screen	Boolean	true	Визначає, чи буде форма оформлення замовлення розміщена в компактній області (false) або на всю сторінку (true)
button	Boolean	true	Визначає, чи буде кнопка оплати за замовчуванням  має бути показано, інакше вона буде кастомна
locales	Array		Доступні локалізації сторінки оформлення замовлення.  Підтримувані значення: "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	Визначає, чи потрібно вказувати електронну пошту на сторінці оформлення замовлення
api_domain	String	‘pay.fondy.eu’
theme	Object

regular - вмикає опцію підписки на сторінці оформлення замовлення. Дивіться приклад із підпискою 1 і приклад із підпискою 2

period - значення параметрів підписки: період, частота, дата початку, дата закінчення, регулярна сума

параметри - параметри замовлення, описані в основній документації API

messages - Локалізація повідомлень

{
  messages: {
    {en}: {
      {id}: {value},
      ...
    },
    ...
  },
}

validate - Локалізація помилок валідації форми

{
  validate: {
    {en}: {
      {id}: {value},
      ...
    },
    ...
  },
}

Нижче наведені приклади готових дизайнів платіжних сторінок в різних стилях.

Приклад стилю 1: світлий фон, чорна картка

Приклад стилю 2: темний фон, срібляста картка

Приклад із додатковими полями мерчанта

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

Приклад із підпискою 1

Після першої успішної оплати платіжний шлюз створить календар із запланованими регулярними платежами. Частота і періодичність задаються в параметрах сторінки оплати.

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

Приклад із підпискою 2 (з локалізацією кастомних полів)

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

Приклад із розширеними способами оплати

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

Приклад з обробкою події кліку на платіжній кнопці

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

Приклад зі зворотними викликами JavaScript

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

Приклад кнопок Apple Pay / Google Pay

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

Приклад методу Monobank

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

Приклад із замовленням, створеним на бекенді

Створіть замовлення на своєму сервері:

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'

Отримайте токен замовлення:

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

Завантажити сторінку оформлення замовлення з токеном замовлення в якості параметра:

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

Приклад налаштування способу оплати за банківськими посиланнями

Вкажіть параметри:

    active_tab: 'banklinks_eu', //увімкнути вкладку банківських посилань за замовчуванням
    default_country: 'PL', //налаштувати банки, відкриті за замовчуванням
    countries: ["PL","IE","GB","CZ"] //налаштувати список країн банків
...
,
  messages: {
    en: {
      banklinks_eu: 'Bank links',   //ви можете самостійно перейменовувати способи оплати 
      local_methods: "Skrill"
    }
  }

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

Використання колірних пресетів

Ви можете обрати колірні градієнти і тему в параметрах section.

Приклад:

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

type атрибут може мати значення “світлий” або “темний”.

preset може мати одне з наступних значень:


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) на CodePen.

Ось перелік градієнтів і їхні назви:

Або виможна зробити об’єкти однотонними з параметром css_variable (щоб скористатись ним, потрібно встановити пресет: “reset”):

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

Ми рекомендуємо використовувати такі кольори:
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