Checkout for One-time Charges

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.

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

2. Integrate <checkout />

Paste the code below in your view.


                      <%= form_tag(ACTION_PATH, method: "POST") do %>
                        <script
                          src="https://s3-eu-west-1.amazonaws.com/js.octobat.com/js/octobat-checkout-0.0.0.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 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: "API keys / Webhooks".

2. Integrate <checkout />

Paste the code below to generate the button.


                      <form action="" method="POST">
                        <script
                          src="https://s3-eu-west-1.amazonaws.com/js.octobat.com/js/octobat-checkout-0.0.0.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 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.


                      <?php
                        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: "API keys / Webhooks".

2. Integrate <checkout />

Paste the code below to generate the button.


                      <form action="" method="POST">
                        <script
                          src="https://s3-eu-west-1.amazonaws.com/js.octobat.com/js/octobat-checkout-0.0.0.js" class="octobat-checkout-button"
                          data-charge="<?php echo $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 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.


                      <?php
                        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: "API keys / Webhooks".

2. Integrate <checkout />

Paste the code below to generate the button.


                      <form action="" method="POST">
                        <script
                          src="https://s3-eu-west-1.amazonaws.com/js.octobat.com/js/octobat-checkout-0.0.0.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 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.