Using Quaderno Checkout for Subscriptions

This guide helps you use Quaderno Checkout to create subscriptions on Stripe. If you need help, please email us to  support@quaderno.io.

Note: Quaderno Checkout also works for Braintree and PayPal. Take a look at the specification page for more info.

The easiest way to integrate Quaderno is via the Checkout, which will take care of calculating taxes on-the-fly, processing the payments, and create a Stripe subscription.

Try clicking on the example below, filling in the form with one of  Stripe’s test card numbers, any three digit CVC code, and a valid expiry date.

Here’s an overview of what you’ll accomplish in this guide:

  1. Collect billing information with the Checkout.
  2. Send the transaction info, with the rest of your form, to your server.

Step 1: Embedding the Checkout

To get started, add the following code to your page.

<form action="" method="POST">
  <script
    src="https://checkout.quaderno.io/checkout.js" class="quaderno-button"
    data-key="YOUR_QUADERNO_PUBLISHABLE_KEY"
    data-plan="awesome"
    data-description="Awesome Plan"
    data-amount="1000">
  </script>
</form>

The key thing to notice is the  data-key attribute we added on the script tag which identifies your website when communicating with Quaderno. You have to use your Quaderno publishable key, that you can get under Settings > API in your account page.

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

Step 2: Sending tokens to your server

Checkout calculates taxes on-the-fly (for EU customers), creates the Stripe subscription, and automatically sends a beautiful receipt to your customer.

By placing the script tag inside a  <form>, a hidden input called transactionsDetails will be appended to the form after creating the subscription, and then the form will be automatically submitted to your server.

The content of this hidden input is a  JSON Web Token (JWT), encoded with your Quaderno private key (not your publishable key). It contains the following data:

{
  customer: 'STRIPE_CUSTOMER_ID',
  transaction: 'STRIPE_SUBSCRIPTION_ID',
  type: 'subscription',   
  gateway: 'stripe',
  iat: UNIX timestamp
}

You can use this data to sync the transaction in your back-end. The enclosing form can, of course, contain other inputs you need.

Still need help? Contact Us Contact Us