Fondy-checkout-vue NPM

checkout-vue

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

config

{
  options: {},
  params: {},
  button: {}, // button config 
  fields_custom: {},
  messages: {},
  validate: {},
  css_variable: {},
}

options

Name	Type	Default	Description	Priority
`methods`	Array	'card'	support `card`, `sepa`, `banklinks_eu`, `receipt`.
`methods_disabled`	Array	[]	support `card`, `sepa`, `banklinks_eu`, `receipt`.
`card_icons`	Array	'mastercard', 'visa'	support `mastercard`, `visa`, `mir`, `prostir`, `diners`, `american_express` , `jcb`, `maestro`, `union_pay`.
`banklinks_eu_icons`	Array	[]
`local_methods_icons`	Array	[]
`crypto_icons`	Array	[]
`loans_icons`	Array	[]
`emoney_icons`	Array	[]
`wallets_icons`	Array	[]
`title`	String			options or server
`link`	String		format url	server or options
`full_screen`	Boolean	true
`locales`	Array	all	support `cs`, `de`, `en`, `es`, `fr`, `hu`, `it`, `ko`, `lv`, `pl`, `ro`, `ru`, `sk`, `uk`.
`api_domain`	String	'api.fondy.eu'
`endpoint`	Object
`active_tab`	String	'card'	support `card`, `sepa`.	server or options
`active_method`	String	''		server or options
`logo_url`	String		format url	options or server
`offerta_url`	String		format url	options or server
`button`	Boolean	true
`fee`	Boolean	false
`email`	Boolean	false		server or options
`fields`	Boolean	false
`default_country`	String
`countries`	Array
`lang`	Boolean	true
`theme`	Object
`show_menu_first`	Boolean	false
`disable_request`	Boolean	false	no requests are sent to the server
`show_button_amount`	Boolean	true	displaying the amount on the button
`subscription`	Object
`loading`	String		format url
`hide_button_title`	Boolean	false
`amount_readonly`	Boolean	true

options.endpoint

Name	Type	Default	Description
`gateway`	String	'/latest/checkout-v2/index.html'
`button`	String	'/latest/checkout-v2/button/index.html'

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	Type	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

params

Name	Type	Default	Description	Priority
`merchant_id`	Integer	1396424
`order_desc`	String			options or server
`amount`	Integer	null
`currency`	String	'USD'
`response_url`	String		format url
`lang`	String	browser language		server or options
`required_rectoken`	String		support `Y`, `N`, `y`, `n`.
`verification`	String		support `Y`, `N`, `y`, `n`.
`verification_type`	String		support `amount`, `code`
`token`	String		length 40
`button`	String		length 20-80
`offer`	Boolean	false
`recurring_data`	Object
`custom`	Object
`customer_data`	Object

params.recurring_data

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

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

validate

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

Use

var app = fondy({css selector}, {config})

app.$on('success', function(model) {})
app.$on('error', function(model) {})
app.$on('ready', function(model) {})
app.$on('callback', function(model) {})
app.$on('show-pay', function(model) {})

app.submit()

app.location({method}, {system})

app.setParams({params})

Destroy app

app.$destroy()
app.$el.remove()

Use validate

https://vee-validate.logaretm.com/v3/guide/rules.html#rules

support after, alpha, date_format, decimal, digits, email, max, min, numeric, required, customer_field, phone, numrange, ccard