Custom form

Integration

Configuration HTML Tag Options

Required

<form /> Attributes Description
data-octobat-pkey Your Octobat publishable key. You can find it in your Octobat account within the "Developers / API keys" part.
data-plan
(only for subscriptions)
Your Stripe plan id available in your Stripe account.
data-charge
(only for one-time charges)
Your JWT encoded.
<select> Attributes Description
<select data-octobat="country"></select> Values of <options> tag must be two letter codes (ISO alpha-2).
<input /> Attributes Description
<input data-octobat="email"/> The mandatory e-mail field.
<input id="cc-number"/> Credit card number.
<input id="cc-exp-month"/> Credit card expiration month.
<input id="cc-exp-year"/> Credit card expiration year.
<input id="cc-cvc"/> Credit card CVC.

Highly recommended

<form /> Attributes Description Default value
data-taxes 'included' or 'excluded' tax. excluded
data-moss-compliance Determine your customer country thanks to his card credit and his IP address. Learn more about MOSS true
data-validate-tax-number
(only if you put into your form the tax-number input)
Accepted values: 'true', 'false', 'format'.
If 'true', check your customer tax number thanks to the VIES service. If no response within the first 7 seconds, check the format.
Else if 'format', check only the tax number format.
true
<input /> Attributes Description Default value
<input data-octobat="tax-number"/> Tax number input. Just available for European Union.  

Optional

<input /> Attributes Description Default value
<input data-octobat="name"/> Full Name or Company Name.  
<input data-octobat="street-line-1"/> Your customer street line.  
<input data-octobat="street-line-2"/> Your customer street line (more).  
<input data-octobat="city"/> Your customer city.  
<input data-octobat="zip-code"/> Your customer postal code.  
<input data-octobat="state"/> Your customer state.  
<input data-octobat="coupon"/> Thanks to this field you are able to handle couponing.  
<select> Attributes Description Default value
<select data-octobat="transaction-type"></select> Specify the transaction type (eservice, ebook or standard). eservice

JavaScript helpers

Form management

Function Description
Octobat.init('#custom-form-selector') Will associate the necessary callbacks to your form binded by its identifier. Useful if the form is not present in the DOM when the page is loaded, or if you need to update its data on a JS event.

Events

Event Description
octobat.form.init.complete Fired when the form is displayable and ready to use.
octobat.form.init.failed Fired when the form is not displayable and not ready to use.
octobat.tax.calculation.done Fired when Octobat finished to do tax calculation.
octobat.form.coupon.valid Fired when checked that coupon is valid.
octobat.form.coupon.invalid Fired when checked that coupon is invalid.

Data functions

Function Description
Octobat.getPlan()
(only for subscriptions)
Return JSON object with plan data.
Octobat.getTaxes() Return JSON object with taxes data.
Octobat.getCoupon() Return JSON object with coupon data.