Using Quaderno Checkout for One-Off Charges
This guide helps you use Quaderno Checkout to create one-off charges 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 one-off charge.
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:
- Collect billing information with the Checkout.
- 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-charge="JWT_STRING"
data-description="My Product"
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.
The data-charge attribute MUST contain the following data in a JWT string, encoded with your Quaderno private key:
| Attribute | Type | Mandatory | Description |
|---|---|---|---|
iat |
Integer | Yes | Current UNIX timestamp. We use it to prevent the reuse of the generated JWT after 10 minutes. |
amount |
Integer | Yes | Total amount of the transaction in cents. |
currency |
String | No | Currency of the amount (3-letter ISO code). The default is USD. |
description |
String | No | Description of the transaction. |
item_number |
String | No | Only for PayPal. Pass-through variable for you to track product or service purchased. |
quantity |
Integer | No | Only for PayPal. The quantity of item included in the transaction. The default is 1. |
transaction-type |
String | No | Specify the transaction type ( eservice, ebook or standard). The default is eservice |
Here’s an example in Ruby for a €5.90 charge:
JWT.encode({
iat: Time.now.to_i,
amount: 590,
currency: 'EUR' },
YOUR_QUADERNO_SECRET_KEY)
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 charge, 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: 'charge',
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.