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