Create an embedded checkout page with an individual design. Version 2.0¶
Project at GitHub: https://github.com/flittpayments/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, Apple Pay, Google Pay™¶
See the Pen Flitt - custom checkout light by Flitt.com (@flitt) on CodePen.
First, you need to import JavaScript SDK:
https://pay.flitt.com/latest/checkout-vue/checkout.js
Then CSS files:
html https://pay.flitt.com/latest/checkout-vue/checkout.css
Checkout page is configured with JavaScript code:
Configuration example
var Options = {
options: {
methods: ['card'],
methods_disabled: [],
card_icons: ['mastercard', 'visa', 'maestro'],
active_tab: 'card',
fields: false,
title: 'my_title',
link: 'https://shop.com',
full_screen: true,
button: true,
email: true
},
params: {
merchant_id: 1549901,
required_rectoken: 'y',
currency: 'GEL',
amount: 500,
order_desc: 'my_order_desc',
response_url: 'http://shop.com/thankyoupage'
}
}
checkout("#app", Options);
JavaScript configuration has the following structure:
Configuration structure
{
options: {},
params: {},
fields_custom: {},
messages: {},
validate: {},
css_variable: {},
}
Configure payment page form customization options
| Parameter name | Parameter type | Default value | Description |
|---|---|---|---|
| Parameter name | Parameter type | Default value | Description |
methods |
Array | ['card'] | Enable checkout payment methods: cards, online banking, BNPL, Google Pay, Apple Pay. Supported values: card - bank cards, wallets - Google and Apple Pay, installments - BNPL. |
methods_disabled |
Array | [] | Disable checkout payment methods: cards, Google Pay, Apple Pay, BNPL. Supported values: card, wallets, installments |
card_icons |
Array | ['mastercard', 'visa'] | Payment systems logos set. Supported values: mastercard, visa, maestro |
title |
String | ||
hide_title |
Boolean | false | Hide title text on page |
link |
String | ||
hide_link |
Boolean | false | Hide URL link text on page |
full_screen |
Boolean | true | Defines whether checkout form will be placed in a compact area (false) or in full page (true) |
locales |
Array | ['mastercard', 'visa'] | Payment systems logos set. Supported values: mastercard, visa, maestro |
logo_url |
String | Custom logo URL | |
button |
Boolean | true | Defines if default pay button should be shown, or it will be a custom one |
fee |
Boolean | false | |
email |
Boolean | false | Defines if email must be provided on checkout page by customer. |
fields |
Boolean | false | Enables additional input fields on checkout page. Example with additional merchant fields |
lang |
Boolean | true | Enables additional input fields on checkout page. Example with additional merchant fields |
api_domain |
String | pay.flitt.com | |
theme |
Object | true | Defines if default pay button should be shown, or it will be a custom one |
show_button_amount |
Boolean | Display the amount on the button | |
subscription |
Object | Subscription options |
options.theme
| Name | Type | Default | Description |
|---|---|---|---|
type |
String | 'light' | support light, dark. |
preset |
String | 'black' | support reset, black, silver, vibrant_silver, vibrant_gold, solid_black, black_and_white, euphoric_pink, heated_steel, nude_pink, tropical_gold, navy_shimmer. |
options.subscription
| Name | Type1 | Default | Description |
|---|---|---|---|
type |
String | 'disable' | support disable, hidden, shown_edit_on, shown_edit_off, shown_readonly |
periods |
Array | ['day', 'week', 'month'] | support day, week, month. |
quantity |
Boolean | false | |
trial |
Boolean | false | |
unlimited |
Boolean | true | |
readonly |
Boolean | false |
Order parameters described in Request parameters
| Parameter name | Parameter type | Default value | Description |
|---|---|---|---|
merchant_id |
Integer | 1549901 | |
order_desc |
String | Order description | |
amount |
Integer | 100 | The amount to be charged |
currency |
String | Order currency | |
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. |
|
token |
String | length 40 | |
button |
String | length 20-80 | |
offer |
Boolean | false | |
recurring_data |
Object | ||
custom |
Object | ||
customer_data |
Object |
params.recurring_data
Subscription parameters values: period, frequency, start date, end date, regular amount
| Name | Type | Default | Description |
|---|---|---|---|
every |
Integer | 1 | |
period |
String | 'month' | support day, week, month. |
amount |
Integer | 0 | |
end_time |
String | format YYYY-MM-DD | |
start_time |
String | format YYYY-MM-DD | |
quantity |
Integer | 0 | |
trial_period |
String | '' | |
trial_quantity |
Integer | 0 |
params.customer_data
| Name | Type | Default | Description |
|---|---|---|---|
customer_name |
String | ||
customer_address |
String | ||
customer_zip |
String | ||
customer_city |
String | ||
customer_country |
String | dictionary countries | |
customer_state |
String | ||
phonemobile |
String | format phone | |
email |
String | format email |
Messages localization
{
messages: {
{en}: {
{id}: {value},
...
},
...
},
}
Form validation errors localization
{
validate: {
{en}: {
{id}: {value},
...
},
...
},
}
{
css_variable: {
main: {hex color value},
card_bg: {hex color value},
card_shadow: {hex color value}
}
}
{
fields_custom: {
id-1: {
name: 'id-1',
label: 'label1',
value: 'value1',
readonly: true,
p: 1
},
id-2: {
name: 'id-2',
label: 'label2',
value: 'value2',
p: 2
},
id-3: {
name: 'id-3',
label: 'label3',
type: 'checkbox',
required: true,
p: 3
}
}
}
Below are examples of ready-made designs of payment pages in different styles.
Example style light background, blue card¶
See the Pen Flitt - custom checkout light by Flitt.com (@flitt) on CodePen.
Example style dark background, blue card¶
See the Pen Flitt - custom checkout dark by Flitt.com (@flitt) on CodePen.
Example for compact region¶
With parameters full_screen: false, hide_title: true, hide_link: true
See the Pen Flitt - custom checkout. Additional fields. Version 2.0 by Flitt.com (@flitt) on CodePen.
Example with additional merchant fields¶
See the Pen Flitt - custom checkout. Additional fields. Version 2.0 by Flitt.com (@flitt) 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 Flitt - custom checkout. Subscription. Version 2.0 by Flitt.com (@flitt) on CodePen.
Example with subscription and localization of custom fields¶
See the Pen Flitt - custom checkout. Subscription. Version 2.0 by Flitt.com (@flitt) on CodePen.
Example with extended payment methods¶
See the Pen Flitt - custom checkout. Version 2.0 by Flitt.com (@flitt) on CodePen.
Example with handling of pay-button click event¶
See the Pen Flitt - checkout with own submit buttons. Version 2.0 by Flitt.com (@flitt) on CodePen.
Example with JavaScript callbacks¶
See the Pen Flitt - custom checkout. Javascript calbacks. Version 2.0 by Flitt.com (@flitt) on CodePen.
Example of Apple Pay and Google Pay buttons¶
See the Pen Flitt - Apple, Google Pay buttons by Flitt.com (@flitt) 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": "GEL",
"merchant_id": 1549901,
"order_desc": "Test payment",
"lifetime" : 999999,
"amount": 1000,
"signature": "91ea7da493a8367410fe3d7f877fb5e0ed666490"
}
}' \
'https://pay.flitt.com/api/checkout/token'
Receive order token:
{
"response":{
"response_status":"success",
"token":"b3c178ad84446ef36eaab365b1e12e6987e9b3d9"
}
}
Load checkout page with order token as a parameter:
var Options = {
options: {
methods: ['card'],
methods_disabled: [],
card_icons: ['mastercard', 'visa', 'maestro'],
active_tab: 'card',
fields: false,
title: 'Demo checkout',
link: 'https://shop.com',
full_screen: true,
button: true,
email: true
},
params: {
token: "13c178ad84446ef36eaab365b1e12e6987e9b3d9"
}
}
checkout("#checkout-container", Options);
Using color presets and personal log¶
You can use gradient color presets with object theme in the options section.
options: {
methods: ['card'],
...
,
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
euphoric_pink preset example
See the Pen Flitt - minimal checkout ligt euphoric_pink v2.0 by Flitt.com (@flitt) on CodePen.
All gradients naming you can match as follows (click to enlarge image):
You can use custom flat colors with css_variable parameter (to use it, you need to set preset: "reset") as well as own logo with logo_url parameter:
Example with main color: valencia #D94343 for card background and fuchsia_blue: #7054C7 for button color
See the Pen Flit - custom colors by Flitt.com (@flitt) on CodePen.
We recommend to use such colors: