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

Project at GitHub: https://github.com/cloudipsp/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, ApplePay, GooglePay¶

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: {},
}

optionsparamsmessagesvalidatecss_variablefields_custom

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

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