API hutko

Create an embedded checkout page with an individual design. Version 2.0

  1. Basic checkout design example. Card, ApplePay, GooglePay
  2. Example style 1
  3. Example style 2
  4. Example with additional merchant fields: Contract number, full name
  5. Example with subscription 1
  6. Example with subscription 2
  7. Example with extended payment methods
  8. Example with handling of pay-button click event
  9. Example with JavaScript callbacks
  10. Example ApplePay/GooglePay buttons
  11. Example with order created on backend
  12. Using color presets

 

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.

Pay attention 

Before integrating Google Pay™ please read Google Pay APIs Acceptable Use Policy

By starting the integration you confirm that you accept the terms defined in the Google Pay API Terms of Service.

 

Basic checkout design example. Card, ApplePay, GooglePay

 

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

First, you need to import JavaScript SDK:

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

Then CSS files:

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

Checkout page is configured with JavaScript code:

 

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 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’, ‘wallets’]

 Enable checkout payment methods:  cards, Google Pay, Apple Pay, Local payment methods

 Supported values: `card` – bank cards, `wallets` – Google Pay and Apple Pay

 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`, `wallets`

 
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.hutko.org’  
theme  Object    

 

regular - enables subscription option on checkout page. See example with subscription and example with subscription 2

 

Parameter name Parameter type Default value Description
insert Boolean false  Enables subscription payments
open Boolean false Shows frequency and period options for subscription payments
hide Boolean false Make subscription options read-only for customer
period Array [‘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 name Parameter type Default value Description
every Integer 1 Number of intervals
period String ‘month’

The interval with which a subscription should be charged

 Supported values: `day`, `week`, `month`, `year`.
amount Integer 100  The amount to be charged on the interval specified if differs from order amount.
start_time String  

 Date when the first payment must be charged.

 format YYYY-MM-DD
end_time String  

 Date when subscription must be stoped.

 format YYYY-MM-DD

 

params - order parameters described in main  API documentation

 

Parameter name Parameter type Default value Description
merchant_id Integer 1396424  
order_desc String    Order description
amount Integer 100  
currency String    
response_url String    Response url
lang String  ‘en’  
required_rectoken String    Supported values: `Y`, `N`, `y`, `n`.
verification String    Supported values: `Y`, `N`, `y`, `n`.
verification_type String    Supported values: `amount`, `code` 
email String    format email
token String    length 40
offer Boolean  false  
custom Object    

 

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 Hutko – custom checkout. Additional fields. Version 2.0 by Hutko (@hutkoorg) 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 Hutko – custom checkout. Subscription. Version 2.0 by Hutko (@hutkoorg) on CodePen.

 

 

Example with subscription and localization of custom fields

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

 

 

Example with handling of pay-button click event

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

 

 

Example with JavaScript callbacks

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

 

 

Example ApplePay/GooglePay buttons

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

Receive order token:

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

 

 

Load checkout page with order token as a parameter:

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

 

 

Using colour presets

You can use gradient color presets with object theme in the options section.

Example:

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

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