Checkout guide

The easiest way to integrate Octobat is via Checkout which allows you to calculate taxes automatically, collect payments and make Stripe API calls.

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.

In this guide:

Checkout for Subscriptions

Example

The button below is what you'll success to generate with this guide. Try clicking on it, filling in with one of Stripe’s test card numbers (the most common is: 4242 4242 4242 4242).
Entering your email will allow you to receive a beautiful invoice.

Guide

To get started, follow the code below in your own language to generate one button.

1. Integrate <checkout />

Paste the code below in your view.

<%= form_tag(ACTION_PATH, method: "POST") do %>
  <script src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-plan="YOUR_STRIPE_PLAN_ID"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL"
    data-taxes="excluded"
    data-detailed-panel="true">
  </script>
<% end %>
<%= form_tag(ACTION_PATH, method: "POST") do %>
  <script src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-plan="YOUR_STRIPE_PLAN_ID"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL"
    data-taxes="excluded"
    data-moss-compliance="true"
    data-validate-tax-number="true"
    data-detailed-panel="true">
  </script>
<% 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

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

1. Integrate <checkout />

Paste the code below to generate the button.

<form action="" method="POST">
  <script src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-plan="YOUR_STRIPE_PLAN_ID"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL"
    data-taxes="excluded"
    data-detailed-panel="true">
  </script>
</form>
<form action="" method="POST">
  <script src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-plan="YOUR_STRIPE_PLAN_ID"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL"
    data-taxes="excluded"
    data-moss-compliance="true"
    data-validate-tax-number="true"
    data-detailed-panel="true">
  </script>
</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

2. Retrieve transaction data in your form callback

Install the gem 'jwt'.

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

1. Integrate <checkout />

Paste the code below to generate the button.

<form action="" method="POST">
  <script src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-plan="YOUR_STRIPE_PLAN_ID"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL"
    data-taxes="excluded"
    data-detailed-panel="true">
  </script>
</form>
<form action="" method="POST">
  <script src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-plan="YOUR_STRIPE_PLAN_ID"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL"
    data-taxes="excluded"
    data-moss-compliance="true"
    data-validate-tax-number="true"
    data-detailed-panel="true">
  </script>
</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

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

1. Integrate <checkout />

Paste the code below to generate the button.

<form action="" method="POST">
  <script src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-plan="YOUR_STRIPE_PLAN_ID"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL"
    data-taxes="excluded"
    data-detailed-panel="true">
  </script>
</form>
<form action="" method="POST">
  <script src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-plan="YOUR_STRIPE_PLAN_ID"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL"
    data-taxes="excluded"
    data-moss-compliance="true"
    data-validate-tax-number="true"
    data-detailed-panel="true">
  </script>
</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

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

Checkout for One-time charges

Example

The button below is what you'll success to generate with this guide. Try clicking on it, filling in with one of Stripe’s test card numbers (the most common is: 4242 4242 4242 4242).
Entering your email will allow you to receive a beautiful invoice.

Guide

To get started, follow the code below in your own language to generate one button.

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 <checkout />

Paste the code below in your view.

<%= form_tag(ACTION_PATH, method: "POST") do %>
  <script
    src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-charge="<%=@jwt%>"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL">
  </script>
<% 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. 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.

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 <checkout />

Paste the code below to generate the button.

<form action="" method="POST">
  <script
    src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-charge="<%=@jwt%>"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL">
  </script>
</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. 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.

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 <checkout />

Paste the code below to generate the button.

<form action="" method="POST">
  <script
    src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-charge=""
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL">
  </script>
</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. 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.

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 <checkout />

Paste the code below to generate the button.

<form action="" method="POST">
  <script
    src="https://cdn.jsdelivr.net/octobat-checkout.js/latest/octobat-checkout.min.js" class="octobat-checkout-button"
    data-charge="<%= jwt %>"
    data-octobat-pkey="YOUR_OCTOBAT_PUBLISHABLE_KEY"
    data-supplier-name="YOUR BUSINESS NAME"
    data-billing-address="true"
    data-description="YOUR DESCRIPTION"
    data-image="YOUR_URL_LINK"
    data-label="BUTTON LABEL">
  </script>
</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. 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.