API hutko

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

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

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

See the Pen Hutko – custom checkout. Version 2.0 by Hutko (@hutkoorg) on CodePen.

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

https://pay.hutko.org/latest/checkout-vue/checkout.js

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

https://pay.hutko.org/latest/checkout-vue/checkout.css

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

var Options = {
	options: {
		methods: ['card', 'wallets'],
		methods_disabled: [],
		card_icons: ['mastercard', 'visa'],
		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', 'sk', 'uk'],
		email: true
	},
	params: {
		merchant_id: 1700002,
		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 має наступну структуру:

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

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

Назва параметра	Тип параметра	Значення за замовчуванням	Опис
methods	Array	[‘card’, ‘wallets’]	Увімкніть способи оплати на платіжній сторінці: картки, Google Pay, Apple Pay  Значення, що підтримуються: `card` – bank cards, `wallets` – Google Pay and Apple Pay
methods_disabled	Array	[]	Вимкнути способи оплати на касі: картки, Google Pay, Apple Pay  Підтримувані значення: `card`, `wallets`
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.hutko.org’
theme	Object

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

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

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

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

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

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

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

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

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

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

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

See the Pen Hutko – custom checkout. Additional fields. Version 2.0 by Hutko (@hutkoorg) on CodePen.

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

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

See the Pen Hutko – custom checkout. Subscription. Version 2.0 by Hutko (@hutkoorg) on CodePen.

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

See the Pen Hutko – custom checkout. Subscription. Version 2.0 by Hutko (@hutkoorg) on CodePen.

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

See the Pen Hutko – checkout with own submit buttons. Version 2.0 by Hutko (@hutkoorg) on CodePen.

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

See the Pen Hutko – custom checkout. Javascript calbacks. Version 2.0 by Hutko (@hutkoorg) on CodePen.

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

See the Pen Hutko – custom checkout. Apple/GooglePay button. Version 2.0 by Hutko (@hutkoorg) 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": "UAH",
    "merchant_id": 1700002,
    "order_desc": "Test payment",
    "lifetime" : 999999,
    "amount": 1000,
    "signature": "91ea7da493a8367410fe3d7f877fb5e0ed666490"
  }
}' \
 'https://pay.hutko.org/api/checkout/token'

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

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

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

See the Pen Hutko – custom checkout. With order created on backend. Version 2.0 by Hutko (@hutkoorg) on CodePen.

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

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

Приклад:

    options: {
      methods: ['card','wallets'],
      ...
      ,
      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 hutko – minimal checkout ligt euphoric_pink v2.0 by Hutko (@hutkoorg) on CodePen.

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

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

See the Pen hutko – minimal checkout ligt euphoric_pink v2.0 by Hutko (@hutkoorg) on 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