Custom form for Subscriptions

Custom form is the best way if you want to develop your own checkout form. To integrate Custom form, you have to own developing skills.

Thanks to this integration you'll be able to:

  • Collect billing information about your customer.
  • Collect payments with right tax rates.
  • Make Stripe API calls.
  • Send the transaction information, with the rest of your form, to your server.
  • Handle couponing.

Example

The form below represents what you'll be able to do with this guide. Try filling in it.
Entering your email will allow you to receive a beautiful invoice.
Suppose the merchant is californian.

Guide

To get started, follow the code below.

1. Integrate your required inputs

Paste the code below in your view to generate required inputs.


                      <%= form_tag(ACTION_PATH, method: "POST", id: "octobat-payment-form", "data-octobat-pkey": 'YOUR_OCTOBAT_PUBLISHABLE_KEY', "data-plan": 'YOUR_STRIPE_PLAN_ID') do %>
                        <script src="https://js.stripe.com/v2/"></script>
                        <script src="http://js.octobat.com.s3-eu-west-1.amazonaws.com/js/octobat-form-0.0.0.js"></script>
                        <!-- Display errors -->
                        <span class="payment-errors"></span>
                        <!-- Required inputs -->
                        <input data-octobat="email" />
                        <select data-octobat="country">
                          <option value="US">United States</option>
                          <option value="GB">United Kingdom</option>
                          <option value="DE">Germany</option>
                          <option value="FR">France</option>
                          <option value="IT">Italy</option>
                          <option value="ES">Spain</option>
                          <option value="CA">Canada</option>
                          <option value="AU">Australia</option>
                        </select>
                        <input data-octobat="zip-code" />
                        <input id="cc-number" />
                        <input id="cc-exp-month" />
                        <input id="cc-exp-year" />
                        <input id="cc-cvc" />
                        <!-- Only if you want to handle couponing -->
                        <input data-octobat="coupon" />
                        <!-- Display amounts -->
                        <span class="octobat-extratax"></span>
                        <span class="octobat-discount"></span>
                        <span class="octobat-net"></span>
                        <span class="octobat-taxes"></span>
                        <span class="octobat-total"></span>
                        <!-- The submit button -->
                        <button type="submit">Subscribe</button>
                      <% end %>
                    

You can easily retrieve YOUR_OCTOBAT_PUBLISHABLE_KEY on your Octobat account within the part: "API keys / Webhooks".
You have to put your Stripe plan id instead of YOUR_STRIPE_PLAN_ID.

You can add more attributes to set up the form. Read more about them in the Custom form’s reference .

2. Submit your form with Javascript

Get the card token from Stripe, insert the token into the form, submit the form and create the subscription.


                    var stripeResponseHandler = function(status, response) {
                      var $form = $('#octobat-payment-form');
                      if (response.error) {
                        // Show the errors on the form
                        $form.find('.payment-errors').text(response.error.message);
                      } else {
                        // token contains id, last4, and card type
                        var token = response.id;
                        // Insert the token into the form so it gets submitted to the server
                        $form.append($('<input type="hidden" data-octobat="cardToken" />').val(token));
                        // create the charge in Stripe via octobat and submit
                        if (document.querySelector('#octobat-payment-form').getAttribute("data-plan") !== null) {
                          Octobat.createSubscription({
                            success: function(status, response){
                              $form.append($('<input type="hidden" name="transactionDetails" data-octobat="transactionDetails" />').val(response.transaction));
                              $form.get(0).submit();
                            },
                            error: function(status, response) {
                              $form.find('.payment-errors').text(response.message);
                            }
                          });
                        }
                      }
                    };
                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      // Submit the form
                      $('#octobat-payment-form').submit(function(e) {
                        e.preventDefault();
                        // This identifies your website in the createToken call below
                        Stripe.setPublishableKey($(this).data('gateway-pkey'));
                        // Get the card token from Stripe
                        Stripe.card.createToken({
                          number: $('#cc-number').val(),
                          cvc: $('#cc-cvc').val(),
                          exp_month: $('#cc-exp-month').val(),
                          exp_year: $('#cc-exp-year').val(),
                          address_country: document.querySelector("[data-octobat='country']").value
                        }, stripeResponseHandler);
                      });
                    });
                  

3. Retrieve transaction data in your form callback

Install the gem 'jwt'. In your Gemfile:


                    gem 'jwt'
                  

More about the gem jwt


Paste the code below in your action form method controller to decode the JWT.


                    decoded_token = JWT.decode params["transactionDetails"], "YOUR_OCTOBAT_SECRET_KEY", true, { :algorithm => 'HS256' }
                    puts decoded_token
                  

You can easily retrieve YOUR_OCTOBAT_SECRET_KEY on your Octobat account within the part: "API keys / Webhooks".


Here is the JSON data returned.


                    [
                      {
                          "transaction_id":"sub_7iBhz7kXIRpygF",
                                    "type":"subscription",
                                 "gateway":"stripe",
                                     "iat":1449507869
                      },
                      {
                          "typ":"JWT",
                          "alg":"HS256"
                      }
                    ]
                  

Feel free to store these data in your own database.

4. Enhance your user experience (optional)

Handle couponing

Insert the input into your form.


                    <input data-octobat="coupon" />
                    <!-- Display amounts -->
                    <span class="octobat-discount"></span>
                    <span class="octobat-net"></span>
                  

Link coupon events 'octobat.form.coupon.valid' and 'octobat.form.coupon.invalid' as below.


                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      if(void 0 != window.Octobat) {
                        $(Octobat.form_selector).on('octobat.form.coupon.valid', function(data) {
                          // Retrieve data coupon thanks to Octobat.getCoupon()
                          // Example
                          $('span.coupon-percentoff').html(Octobat.getCoupon().percent_off);
                        });
                        $(Octobat.form_selector).on('octobat.form.coupon.invalid', function(data) {
                          // Whatever you want
                        });
                      }
                    });
                  

Retrieve Octobat data with Javascript to display them into your form


                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      if(void 0 != window.Octobat) {
                        $(Octobat.form_selector).on('octobat.form.init.complete', function(data) {
                          // Name of your plan
                          $('span.plan-name').html(Octobat.getPlan().name);
                        });
                        $(Octobat.form_selector).on('octobat.tax.calculation.done', function(data) {
                          // Name of the tax to apply to the transaction
                          $('span.tax-name').html(Octobat.getTaxes().name);
                          // Tax amount
                          $('span.tax-rate').html(Octobat.getTaxes().total);
                        });
                      }
                    });
                  

You can find the full documentation on Custom form’s reference .

Use the library jQuery.payment for validating inputs and formatting numbers

Better payment experience with jQuery.payment

1. Integrate your required inputs

Paste the code below in your view to generate required inputs.


                      <form action="" method="POST" id="octobat-payment-form" data-octobat-pkey='YOUR_OCTOBAT_PUBLISHABLE_KEY' data-plan='YOUR_STRIPE_PLAN_ID'>
                        <script src="https://js.stripe.com/v2/"></script>
                        <script src="http://js.octobat.com.s3-eu-west-1.amazonaws.com/js/octobat-form-0.0.0.js"></script>
                        <!-- Display errors -->
                        <span class="payment-errors"></span>
                        <!-- Required inputs -->
                        <input data-octobat="email" />
                        <select data-octobat="country">
                          <option value="US">United States</option>
                          <option value="GB">United Kingdom</option>
                          <option value="DE">Germany</option>
                          <option value="FR">France</option>
                          <option value="IT">Italy</option>
                          <option value="ES">Spain</option>
                          <option value="CA">Canada</option>
                          <option value="AU">Australia</option>
                        </select>
                        <input data-octobat="zip-code" />
                        <input id="cc-number" />
                        <input id="cc-exp-month" />
                        <input id="cc-exp-year" />
                        <input id="cc-cvc" />
                        <!-- Only if you want to handle couponing -->
                        <input data-octobat="coupon" />
                        <!-- Display amounts -->
                        <span class="octobat-extratax"></span>
                        <span class="octobat-discount"></span>
                        <span class="octobat-net"></span>
                        <span class="octobat-taxes"></span>
                        <span class="octobat-total"></span>
                        <!-- The submit button -->
                        <button type="submit">Subscribe</button>
                      </form>
                    

You can easily retrieve YOUR_OCTOBAT_PUBLISHABLE_KEY on your Octobat account within the part: "API keys / Webhooks".
You have to put your Stripe plan id instead of YOUR_STRIPE_PLAN_ID.

You can add more attributes to set up the form. Read more about them in the Custom form’s reference .

2. Submit your form with Javascript

Get the card token from Stripe, insert the token into the form, submit the form and create the subscription.


                    var stripeResponseHandler = function(status, response) {
                      var $form = $('#octobat-payment-form');
                      if (response.error) {
                        // Show the errors on the form
                        $form.find('.payment-errors').text(response.error.message);
                      } else {
                        // token contains id, last4, and card type
                        var token = response.id;
                        // Insert the token into the form so it gets submitted to the server
                        $form.append($('<input type="hidden" data-octobat="cardToken" />').val(token));
                        // create the charge in Stripe via octobat and submit
                        if (document.querySelector('#octobat-payment-form').getAttribute("data-plan") !== null) {
                          Octobat.createSubscription({
                            success: function(status, response){
                              $form.append($('<input type="hidden" name="transactionDetails" data-octobat="transactionDetails" />').val(response.transaction));
                              $form.get(0).submit();
                            },
                            error: function(status, response) {
                              $form.find('.payment-errors').text(response.message);
                            }
                          });
                        }
                      }
                    };
                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      // Submit the form
                      $('#octobat-payment-form').submit(function(e) {
                        e.preventDefault();
                        // This identifies your website in the createToken call below
                        Stripe.setPublishableKey($(this).data('gateway-pkey'));
                        // Get the card token from Stripe
                        Stripe.card.createToken({
                          number: $('#cc-number').val(),
                          cvc: $('#cc-cvc').val(),
                          exp_month: $('#cc-exp-month').val(),
                          exp_year: $('#cc-exp-year').val(),
                          address_country: document.querySelector("[data-octobat='country']").value
                        }, stripeResponseHandler);
                      });
                    });
                  

3. Retrieve transaction data in your form callback

Install the gem 'jwt'. In your Gemfile:


                    gem 'jwt'
                  

More about the gem jwt


Paste the code below in your action form method to decode the JWT which contains the transaction details.


                    require 'jwt'
                    decoded_token = JWT.decode THE_JWT_ENCODED(transactionDetails), "YOUR_OCTOBAT_SECRET_KEY", true, { :algorithm => 'HS256' }
                    puts decoded_token
                  

You can easily retrieve YOUR_OCTOBAT_SECRET_KEY on your Octobat account within the part: "API keys / Webhooks".


Here is the JSON data returned.


                    [
                      {
                          "transaction_id":"sub_7iBhz7kXIRpygF",
                                    "type":"subscription",
                                 "gateway":"stripe",
                                     "iat":1449507869
                      },
                      {
                          "typ":"JWT",
                          "alg":"HS256"
                      }
                    ]
                  

Feel free to store these data in your own database.

4. Enhance your user experience (optional)

Handle couponing

Insert the input into your form.


                    <input data-octobat="coupon" />
                    <!-- Display amounts -->
                    <span class="octobat-discount"></span>
                    <span class="octobat-net"></span>
                  

Link coupon events 'octobat.form.coupon.valid' and 'octobat.form.coupon.invalid' as below.


                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      if(void 0 != window.Octobat) {
                        $(Octobat.form_selector).on('octobat.form.coupon.valid', function(data) {
                          // Retrieve data coupon thanks to Octobat.getCoupon()
                          // Example
                          $('span.coupon-percentoff').html(Octobat.getCoupon().percent_off);
                        });
                        $(Octobat.form_selector).on('octobat.form.coupon.invalid', function(data) {
                          // Whatever you want
                        });
                      }
                    });
                  

Retrieve Octobat data with Javascript to display them into your form


                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      if(void 0 != window.Octobat) {
                        $(Octobat.form_selector).on('octobat.form.init.complete', function(data) {
                          // Name of your plan
                          $('span.plan-name').html(Octobat.getPlan().name);
                        });
                        $(Octobat.form_selector).on('octobat.tax.calculation.done', function(data) {
                          // Name of the tax to apply to the transaction
                          $('span.tax-name').html(Octobat.getTaxes().name);
                          // Tax amount
                          $('span.tax-rate').html(Octobat.getTaxes().total);
                        });
                      }
                    });
                  

You can find the full documentation on Custom form’s reference .

Use the library jQuery.payment for validating inputs and formatting numbers

Better payment experience with jQuery.payment

1. Integrate your required inputs

Paste the code below in your view to generate required inputs.


                      <form action="" method="POST" id="octobat-payment-form" data-octobat-pkey='YOUR_OCTOBAT_PUBLISHABLE_KEY' data-plan='YOUR_STRIPE_PLAN_ID'>
                        <script src="https://js.stripe.com/v2/"></script>
                        <script src="http://js.octobat.com.s3-eu-west-1.amazonaws.com/js/octobat-form-0.0.0.js"></script>
                        <!-- Display errors -->
                        <span class="payment-errors"></span>
                        <!-- Required inputs -->
                        <input data-octobat="email" />
                        <select data-octobat="country">
                          <option value="US">United States</option>
                          <option value="GB">United Kingdom</option>
                          <option value="DE">Germany</option>
                          <option value="FR">France</option>
                          <option value="IT">Italy</option>
                          <option value="ES">Spain</option>
                          <option value="CA">Canada</option>
                          <option value="AU">Australia</option>
                        </select>
                        <input data-octobat="zip-code" />
                        <input id="cc-number" />
                        <input id="cc-exp-month" />
                        <input id="cc-exp-year" />
                        <input id="cc-cvc" />
                        <!-- Only if you want to handle couponing -->
                        <input data-octobat="coupon" />
                        <!-- Display amounts -->
                        <span class="octobat-extratax"></span>
                        <span class="octobat-discount"></span>
                        <span class="octobat-net"></span>
                        <span class="octobat-taxes"></span>
                        <span class="octobat-total"></span>
                        <!-- The submit button -->
                        <button type="submit">Subscribe</button>
                      </form>
                    

You can easily retrieve YOUR_OCTOBAT_PUBLISHABLE_KEY on your Octobat account within the part: "API keys / Webhooks".
You have to put your Stripe plan id instead of YOUR_STRIPE_PLAN_ID.

You can add more attributes to set up the form. Read more about them in the Custom form’s reference .

2. Submit your form with Javascript

Get the card token from Stripe, insert the token into the form, submit the form and create the subscription.


                    var stripeResponseHandler = function(status, response) {
                      var $form = $('#octobat-payment-form');
                      if (response.error) {
                        // Show the errors on the form
                        $form.find('.payment-errors').text(response.error.message);
                      } else {
                        // token contains id, last4, and card type
                        var token = response.id;
                        // Insert the token into the form so it gets submitted to the server
                        $form.append($('<input type="hidden" data-octobat="cardToken" />').val(token));
                        // create the charge in Stripe via octobat and submit
                        if (document.querySelector('#octobat-payment-form').getAttribute("data-plan") !== null) {
                          Octobat.createSubscription({
                            success: function(status, response){
                              $form.append($('<input type="hidden" name="transactionDetails" data-octobat="transactionDetails" />').val(response.transaction));
                              $form.get(0).submit();
                            },
                            error: function(status, response) {
                              $form.find('.payment-errors').text(response.message);
                            }
                          });
                        }
                      }
                    };
                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      // Submit the form
                      $('#octobat-payment-form').submit(function(e) {
                        e.preventDefault();
                        // This identifies your website in the createToken call below
                        Stripe.setPublishableKey($(this).data('gateway-pkey'));
                        // Get the card token from Stripe
                        Stripe.card.createToken({
                          number: $('#cc-number').val(),
                          cvc: $('#cc-cvc').val(),
                          exp_month: $('#cc-exp-month').val(),
                          exp_year: $('#cc-exp-year').val(),
                          address_country: document.querySelector("[data-octobat='country']").value
                        }, stripeResponseHandler);
                      });
                    });
                  

3. Retrieve transaction data in your form callback

Install JWT thanks to Composer. Paste the code below within composer.json.


                    {
                      "require": {
                          "firebase/php-jwt": "master"
                      }
                    }
                  

More about the composer jwt


Paste the code below in your action form method to decode the JWT which contains the transaction details.


                    <?php
                      use \Firebase\JWT\JWT;
                      $decoded_token = JWT::decode($_POST['transactionDetails'], "YOUR_OCTOBAT_SECRET_KEY", array('HS256'));
                      print_r($decoded_token);
                    ?>
                  

You can easily retrieve YOUR_OCTOBAT_SECRET_KEY on your Octobat account within the part: "API keys / Webhooks".


Here is the JSON data returned.


                    [
                      {
                          "transaction_id":"sub_7iBhz7kXIRpygF",
                                    "type":"subscription",
                                 "gateway":"stripe",
                                     "iat":1449507869
                      },
                      {
                          "typ":"JWT",
                          "alg":"HS256"
                      }
                    ]
                  

Feel free to store these data in your own database.

4. Enhance your user experience (optional)

Handle couponing

Insert the input into your form.


                    <input data-octobat="coupon" />
                    <!-- Display amounts -->
                    <span class="octobat-discount"></span>
                    <span class="octobat-net"></span>
                  

Link coupon events 'octobat.form.coupon.valid' and 'octobat.form.coupon.invalid' as below.


                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      if(void 0 != window.Octobat) {
                        $(Octobat.form_selector).on('octobat.form.coupon.valid', function(data) {
                          // Retrieve data coupon thanks to Octobat.getCoupon()
                          // Example
                          $('span.coupon-percentoff').html(Octobat.getCoupon().percent_off);
                        });
                        $(Octobat.form_selector).on('octobat.form.coupon.invalid', function(data) {
                          // Whatever you want
                        });
                      }
                    });
                  

Retrieve Octobat data with Javascript to display them into your form


                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      if(void 0 != window.Octobat) {
                        $(Octobat.form_selector).on('octobat.form.init.complete', function(data) {
                          // Name of your plan
                          $('span.plan-name').html(Octobat.getPlan().name);
                        });
                        $(Octobat.form_selector).on('octobat.tax.calculation.done', function(data) {
                          // Name of the tax to apply to the transaction
                          $('span.tax-name').html(Octobat.getTaxes().name);
                          // Tax amount
                          $('span.tax-rate').html(Octobat.getTaxes().total);
                        });
                      }
                    });
                  

You can find the full documentation on Custom form’s reference .

Use the library jQuery.payment for validating inputs and formatting numbers

Better payment experience with jQuery.payment

1. Integrate your required inputs

Paste the code below in your view to generate required inputs.


                      <form action="" method="POST" id="octobat-payment-form" data-octobat-pkey='YOUR_OCTOBAT_PUBLISHABLE_KEY' data-plan='YOUR_STRIPE_PLAN_ID'>
                        <script src="https://js.stripe.com/v2/"></script>
                        <script src="http://js.octobat.com.s3-eu-west-1.amazonaws.com/js/octobat-form-0.0.0.js"></script>
                        <!-- Display errors -->
                        <span class="payment-errors"></span>
                        <!-- Required inputs -->
                        <input data-octobat="email" />
                        <select data-octobat="country">
                          <option value="US">United States</option>
                          <option value="GB">United Kingdom</option>
                          <option value="DE">Germany</option>
                          <option value="FR">France</option>
                          <option value="IT">Italy</option>
                          <option value="ES">Spain</option>
                          <option value="CA">Canada</option>
                          <option value="AU">Australia</option>
                        </select>
                        <input data-octobat="zip-code" />
                        <input id="cc-number" />
                        <input id="cc-exp-month" />
                        <input id="cc-exp-year" />
                        <input id="cc-cvc" />
                        <!-- Only if you want to handle couponing -->
                        <input data-octobat="coupon" />
                        <!-- Display amounts -->
                        <span class="octobat-extratax"></span>
                        <span class="octobat-discount"></span>
                        <span class="octobat-net"></span>
                        <span class="octobat-taxes"></span>
                        <span class="octobat-total"></span>
                        <!-- The submit button -->
                        <button type="submit">Subscribe</button>
                      </form>
                    

You can easily retrieve YOUR_OCTOBAT_PUBLISHABLE_KEY on your Octobat account within the part: "API keys / Webhooks".
You have to put your Stripe plan id instead of YOUR_STRIPE_PLAN_ID.

You can add more attributes to set up the form. Read more about them in the Custom form’s reference .

2. Submit your form with Javascript

Get the card token from Stripe, insert the token into the form, submit the form and create the subscription.


                    var stripeResponseHandler = function(status, response) {
                      var $form = $('#octobat-payment-form');
                      if (response.error) {
                        // Show the errors on the form
                        $form.find('.payment-errors').text(response.error.message);
                      } else {
                        // token contains id, last4, and card type
                        var token = response.id;
                        // Insert the token into the form so it gets submitted to the server
                        $form.append($('<input type="hidden" data-octobat="cardToken" />').val(token));
                        // create the charge in Stripe via octobat and submit
                        if (document.querySelector('#octobat-payment-form').getAttribute("data-plan") !== null) {
                          Octobat.createSubscription({
                            success: function(status, response){
                              $form.append($('<input type="hidden" name="transactionDetails" data-octobat="transactionDetails" />').val(response.transaction));
                              $form.get(0).submit();
                            },
                            error: function(status, response) {
                              $form.find('.payment-errors').text(response.message);
                            }
                          });
                        }
                      }
                    };
                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      // Submit the form
                      $('#octobat-payment-form').submit(function(e) {
                        e.preventDefault();
                        // This identifies your website in the createToken call below
                        Stripe.setPublishableKey($(this).data('gateway-pkey'));
                        // Get the card token from Stripe
                        Stripe.card.createToken({
                          number: $('#cc-number').val(),
                          cvc: $('#cc-cvc').val(),
                          exp_month: $('#cc-exp-month').val(),
                          exp_year: $('#cc-exp-year').val(),
                          address_country: document.querySelector("[data-octobat='country']").value
                        }, stripeResponseHandler);
                      });
                    });
                  

3. Retrieve transaction data in your form callback

Install the JWT package 'PyJWT'.


                    pip install PyJWT
                  

More about the JSON Web Token implementation


Paste the code below in your action form method to decode the JWT which contains the transaction details.


                    import jwt
                    decoded_token = jwt.decode(THE_JWT_ENCODED(transactionDetails), 'YOUR_OCTOBAT_SECRET_KEY')
                    print(decoded_token)
                  

You can easily retrieve YOUR_OCTOBAT_SECRET_KEY on your Octobat account within the part: "API keys / Webhooks".


Here is the JSON data returned.


                    {
                      "transaction_id":"sub_7iBhz7kXIRpygF",
                                "type":"subscription",
                             "gateway":"stripe",
                                 "iat":1449507869
                    }
                  

Feel free to store these data in your own database.

4. Enhance your user experience (optional)

Handle couponing

Insert the input into your form.


                    <input data-octobat="coupon" />
                    <!-- Display amounts -->
                    <span class="octobat-discount"></span>
                    <span class="octobat-net"></span>
                  

Link coupon events 'octobat.form.coupon.valid' and 'octobat.form.coupon.invalid' as below.


                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      if(void 0 != window.Octobat) {
                        $(Octobat.form_selector).on('octobat.form.coupon.valid', function(data) {
                          // Retrieve data coupon thanks to Octobat.getCoupon()
                          // Example
                          $('span.coupon-percentoff').html(Octobat.getCoupon().percent_off);
                        });
                        $(Octobat.form_selector).on('octobat.form.coupon.invalid', function(data) {
                          // Whatever you want
                        });
                      }
                    });
                  

Retrieve Octobat data with Javascript to display them into your form


                    // When the DOM is ready
                    jQuery(document).ready(function($) {
                      if(void 0 != window.Octobat) {
                        $(Octobat.form_selector).on('octobat.form.init.complete', function(data) {
                          // Name of your plan
                          $('span.plan-name').html(Octobat.getPlan().name);
                        });
                        $(Octobat.form_selector).on('octobat.tax.calculation.done', function(data) {
                          // Name of the tax to apply to the transaction
                          $('span.tax-name').html(Octobat.getTaxes().name);
                          // Tax amount
                          $('span.tax-rate').html(Octobat.getTaxes().total);
                        });
                      }
                    });
                  

You can find the full documentation on Custom form’s reference .

Use the library jQuery.payment for validating inputs and formatting numbers

Better payment experience with jQuery.payment