Custom form guide

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.

In this guide:

Custom form for subscriptions

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.Suppose the merchant is french.

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="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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 %>

<%= 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="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.js"></script>
  <!-- Display errors -->
  <span class="payment-errors"></span>
  <!-- Required inputs -->
  <input data-octobat="email" />
  <select data-octobat="country">
    <!-- This is a list of two letter codes (ISO alpha-2) -->
    <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 id="cc-number" />
  <input id="cc-exp-month" />
  <input id="cc-exp-year" />
  <input id="cc-cvc" />
  <!-- Display amounts -->
  <span class="octobat-extratax"></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: "Developers / API keys" .

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: "Developers / API keys" .


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.getTaxEvidence().tax);
      // Tax amount
      $('span.tax-rate').html(Octobat.getTaxRate());
    });
  }
});

You can add more attributes to set up the form. Read more about them in the 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="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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>

<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="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.js"></script>
  <!-- Display errors -->
  <span class="payment-errors"></span>
  <!-- Required inputs -->
  <input data-octobat="email" />
  <select data-octobat="country">
    <!-- This is a list of two letter codes (ISO alpha-2) -->
    <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 id="cc-number" />
  <input id="cc-exp-month" />
  <input id="cc-exp-year" />
  <input id="cc-cvc" />
  <!-- Display amounts -->
  <span class="octobat-extratax"></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: "Developers / API keys" .

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: "Developers / API keys" .


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.getTaxEvidence().tax);
      // Tax amount
      $('span.tax-rate').html(Octobat.getTaxRate());
    });
  }
});

You can add more attributes to set up the form. Read more about them in the 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="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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>

<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="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.js"></script>
  <!-- Display errors -->
  <span class="payment-errors"></span>
  <!-- Required inputs -->
  <input data-octobat="email" />
  <select data-octobat="country">
    <!-- This is a list of two letter codes (ISO alpha-2) -->
    <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 id="cc-number" />
  <input id="cc-exp-month" />
  <input id="cc-exp-year" />
  <input id="cc-cvc" />
  <!-- Display amounts -->
  <span class="octobat-extratax"></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: "Developers / API keys" .

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.

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: "Developers / API keys" .


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.getTaxEvidence().tax);
      // Tax amount
      $('span.tax-rate').html(Octobat.getTaxRate());
    });
  }
});

You can add more attributes to set up the form. Read more about them in the 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="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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>

<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="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.js"></script>
  <!-- Display errors -->
  <span class="payment-errors"></span>
  <!-- Required inputs -->
  <input data-octobat="email" />
  <select data-octobat="country">
    <!-- This is a list of two letter codes (ISO alpha-2) -->
    <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 id="cc-number" />
  <input id="cc-exp-month" />
  <input id="cc-exp-year" />
  <input id="cc-cvc" />
  <!-- Display amounts -->
  <span class="octobat-extratax"></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: "Developers / API keys" .

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: "Developers / API keys" .


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.getTaxEvidence().tax);
      // Tax amount
      $('span.tax-rate').html(Octobat.getTaxRate());
    });
  }
});

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

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

Better payment experience with jQuery.payment

Custom form for one-time charges

Guide

To get started, follow the code below.

1. Generate JWT

Install the gem 'jwt'. In your Gemfile:

gem 'jwt'

More about the gem jwt


Paste the code below in your controller.

encoding_key = "YOUR_OCTOBAT_SECRET_KEY"
@jwt = JWT.encode({
  iat: Time.now.to_i,
  amount: 1999,
  currency: 'USD',
  description: 'YOUR_DESCRIPTION'
}, encoding_key, 'HS256')

More about JWT

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

2. 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-charge": @jwt) do %>
  <script src="https://js.stripe.com/v2/"></script>
  <script src="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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 %>
<%= form_tag(ACTION_PATH, method: "POST", id: "octobat-payment-form", "data-octobat-pkey": 'YOUR_OCTOBAT_PUBLISHABLE_KEY', "data-charge": @jwt) do %>
  <script src="https://js.stripe.com/v2/"></script>
  <script src="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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 id="cc-number" />
  <input id="cc-exp-month" />
  <input id="cc-exp-year" />
  <input id="cc-cvc" />
  <!-- Display amounts -->
  <span class="octobat-extratax"></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: "Developers / API keys" .

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

3. Submit your form with Javascript

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

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
    Octobat.createCharge({
      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);
  });
});

4. Retrieve transaction data in your form callback

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

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

Here is the JSON data returned.

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

Feel free to store these data in your own database.

5. Enhance your user experience (optional)

Handle couponing

Add coupons into your Octobat coupons section.

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 coupon data 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.tax.calculation.done', function(data) {
      // Name of the tax to apply to the transaction
      $('span.tax-name').html(Octobat.getTaxEvidence().tax);
      // Tax amount
      $('span.tax-rate').html(Octobat.getTaxRate());
    });
  }
});

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

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

Better payment experience with jQuery.payment

1. Generate JWT

Install the gem 'jwt'.

gem install jwt

More about the gem jwt


Paste the code below.

require 'jwt'
encoding_key = "YOUR_OCTOBAT_SECRET_KEY"
@jwt = JWT.encode({
  iat: Time.now.to_i,
  amount: 1999,
  currency: 'USD',
  description: 'YOUR_DESCRIPTION'
}, encoding_key, 'HS256')

More about JWT

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

2. 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-charge='<%=@jwt%>'>
  <script src="https://js.stripe.com/v2/"></script>
  <script src="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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>
<form action="" method="POST" id="octobat-payment-form" data-octobat-pkey='YOUR_OCTOBAT_PUBLISHABLE_KEY' data-charge='<%=@jwt%>'>
  <script src="https://js.stripe.com/v2/"></script>
  <script src="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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 id="cc-number" />
  <input id="cc-exp-month" />
  <input id="cc-exp-year" />
  <input id="cc-cvc" />
  <!-- Display amounts -->
  <span class="octobat-extratax"></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: "Developers / API keys" .

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

3. Submit your form with Javascript

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

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
    Octobat.createCharge({
      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);
  });
});

4. Retrieve transaction data in your form callback

Paste the code below in your action form method controller 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

Here is the JSON data returned.

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

Feel free to store these data in your own database.

5. Enhance your user experience (optional)

Handle couponing

Add coupons into your Octobat coupons section.

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 coupon data 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.tax.calculation.done', function(data) {
      // Name of the tax to apply to the transaction
      $('span.tax-name').html(Octobat.getTaxEvidence().tax);
      // Tax amount
      $('span.tax-rate').html(Octobat.getTaxRate());
    });
  }
});

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

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

Better payment experience with jQuery.payment

1. Generate JWT

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 to encode the transaction details.

use \Firebase\JWT\JWT;
$encoding_key = "YOUR_OCTOBAT_SECRET_KEY";
$jwt = JWT::encode(array(
  "iat" => Time.now.to_i,
  "amount" => 1999,
  "currency" => 'USD',
  "description" => 'YOUR_DESCRIPTION'
), $encoding_key, 'HS256');

More about JWT

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

2. 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-charge='<%=@jwt%>'>
  <script src="https://js.stripe.com/v2/"></script>
  <script src="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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>
<form action="" method="POST" id="octobat-payment-form" data-octobat-pkey='YOUR_OCTOBAT_PUBLISHABLE_KEY' data-charge='<%=@jwt%>'>
  <script src="https://js.stripe.com/v2/"></script>
  <script src="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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 id="cc-number" />
  <input id="cc-exp-month" />
  <input id="cc-exp-year" />
  <input id="cc-cvc" />
  <!-- Display amounts -->
  <span class="octobat-extratax"></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: "Developers / API keys" .

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

3. Submit your form with Javascript

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

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
    Octobat.createCharge({
      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);
  });
});

4. Retrieve transaction data in your form callback

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

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

Here is the JSON data returned.

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

Feel free to store these data in your own database.

5. Enhance your user experience (optional)

Handle couponing

Add coupons into your Octobat coupons section.

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 coupon data 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.tax.calculation.done', function(data) {
      // Name of the tax to apply to the transaction
      $('span.tax-name').html(Octobat.getTaxEvidence().tax);
      // Tax amount
      $('span.tax-rate').html(Octobat.getTaxRate());
    });
  }
});

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

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

Better payment experience with jQuery.payment

1. Generate JWT

Install the JWT package 'PyJWT'.

pip install PyJWT

More about the JSON Web Token implementation


Paste the code below to encode the transaction details.

import jwt
jwt = jwt.encode({"iat" => Time.now.to_i, "amount" => 1999, "currency" => 'USD', "description" => 'YOUR_DESCRIPTION'}, 'YOUR_OCTOBAT_SECRET_KEY', algorithm='HS256')

More about JWT

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

2. 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-charge='<%=@jwt%>'>
  <script src="https://js.stripe.com/v2/"></script>
  <script src="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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>
<form action="" method="POST" id="octobat-payment-form" data-octobat-pkey='YOUR_OCTOBAT_PUBLISHABLE_KEY' data-charge='<%=@jwt%>'>
  <script src="https://js.stripe.com/v2/"></script>
  <script src="https://cdn.jsdelivr.net/octobat.js/latest/octobat-form.min.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 id="cc-number" />
  <input id="cc-exp-month" />
  <input id="cc-exp-year" />
  <input id="cc-cvc" />
  <!-- Display amounts -->
  <span class="octobat-extratax"></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: "Developers / API keys" .

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

3. Submit your form with Javascript

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

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
    Octobat.createCharge({
      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);
  });
});

4. Retrieve transaction data in your form callback

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)

Here is the JSON data returned.

{
  "transaction_id":"ch_17FSPZ2Pmv0nOG11ut8J68Yc",
            "type":"charge",
         "gateway":"stripe",
             "iat":1449507869
}

Feel free to store these data in your own database.

5. Enhance your user experience (optional)

Handle couponing

Add coupons into your Octobat coupons section.

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 coupon data 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.tax.calculation.done', function(data) {
      // Name of the tax to apply to the transaction
      $('span.tax-name').html(Octobat.getTaxEvidence().tax);
      // Tax amount
      $('span.tax-rate').html(Octobat.getTaxRate());
    });
  }
});

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

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

Better payment experience with jQuery.payment