API hutkoВерсия 1.0

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

Створіть вбудовану сторінку оформлення замовлення з індивідуальним дизайном Version 2.0

  1. Приклад базового дизайну платіжної сторінки. Картка, Apple Pay, Google Pay
  2. Приклад стилю 1
  3. Приклад стилю 2
  4. Приклад із додатковими полями мерчанта
  5. Приклад із підпискою 1
  6. Приклад із підпискою 2 (з локалізацією кастомних полів)
  7. Приклад з обробкою події кліку на платіжній кнопці
  8. Приклад зі зворотними callback викликами JavaScript
  9. Приклад кнопок Apple Pay / Google Pay
  10. Приклад із замовленням, створеним на бекенді
  11. Використання колірних пресетів

Ви можете створити власну сторінку оформлення замовлення, розміщену на вашому вебсайті у вигляді звичайного 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

 

Назва параметра Тип параметра Значення за замовчуванням Опис
insert Boolean false  Дозволяє здійснювати платежі за підпискою
open Boolean false Відображає варіанти частоти та періоду для платежів за підпискою
hide Boolean false Зробіть для клієнта опції підписки доступними лише для читання
period Array [‘day’, ‘week’, ‘month’, ‘year’]

 Період підписки

 Підтримувані значення: `day`, `week`, `month`, `year`

 

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

 

Назва параметра Тип параметра Значення за замовчуванням Опис
every Integer 1 Кількість інтервалів
period String ‘month’

Інтервал, з яким має стягуватися плата за підписку

 Підтримувані значення: `day`, `week`, `month`, `year`
amount Integer 100  Сума, яка буде списана з вказаним інтервалом, якщо відрізняється від суми замовлення
start_time String  

Дата, коли повинен бути списаний перший платіж

 формат YYYY-MM-DD
end_time String  

Дата, коли підписку буде припинено

 формат YYYY-MM-DD

 

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

 

Назва параметра Тип параметра Значення за замовчуванням Опис
merchant_id Integer 1396424  
order_desc String    Опис замовлення
amount Integer 100  
currency String    
response_url String   URL-адреса відповіді
lang String  ‘en’  
required_rectoken String    Підтримувані значення: `Y`, `N`, `y`, `n`
verification String    Підтримувані значення: `Y`, `N`, `y`, `n`
verification_type String    Підтримувані значення: `amount`, `code` 
email String    формат email
token String    довжина 40
offer Boolean  false  
custom Object    

 

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": "USD",
    "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

Хочу приймати платежі з Hutko!