Custom form

Integration

Configuration HTML Tag Options

Required

<form />AttributesDescription
data-octobat-pkeyYour 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>AttributesDescription
<select data-octobat="country"></select>Values of <options> tag must be two letter codes (ISO alpha-2).
<input />Attributes
<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 />AttributesDescriptionDefault value
data-taxes'included' or 'excluded' tax.excluded
data-moss-compliance
(you need it if you have EU clients)
Determine your customer country thanks to his card credit and his IP address.true
data-validate-tax-number
(only if you put into your form the tax-number input)
(you need it if you have EU clients)
Accepted values: 'true', 'false', 'format'.
If 'true', check your customer tax number thanks to the service. If no response within the first 7 seconds, check the format.
Else if 'format', check only the tax number format.
true
<input />AttributesDescriptionDefault value
<input data-octobat="tax-number"/>Tax number input. Just available for European Union. 

Optional

<input />AttributesDescriptionDefault 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>AttributesDescriptionDefault value
<select data-octobat="transaction-type"></select>Specify the transaction type (eservice, ebook or standard).eservice

JavaScript helpers

Form management

FunctionDescription
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

EventDescription
octobat.form.init.completeFired when the form is displayable and ready to use.
octobat.form.init.failedFired when the form is not displayable and not ready to use.
octobat.tax.calculation.doneFired when Octobat finished to do tax calculation.
octobat.form.coupon.validFired when checked that coupon is valid.
octobat.form.coupon.invalidFired when checked that coupon is invalid.

Data functions

FunctionDescription
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.