Billing

 Billing is the simplest way to give your customers access to all their receipts & billing history. They can easily download past receipts and update their billing data by themselves. Improve your billing support with a single line of code.

Integration

You can integrate Billing in as little as a single line of client-side code. As we release new features, we’ll automatically roll them out to your existing Billing integration, so that you will a be using our latest technology without needing to change a thing.

Just add this  <script> tag in your HTML page to render the billing button. When users click the button we’ll show them their past receipts.

<script
  src="https://billing.quaderno.io/billing.js" class="quaderno-billing-button"
  data-key="YOUR_QUADERNO_PUBLISHABLE_KEY"
  data-customer-id="YOUR_QUADERNO_CUSTOMER_ID"
  data-label="View billing">
</script>

Configuration Options

Required

Option Description
data-key Your publishable key.
data-customer-id The customer ID. You can also use their Stripe, Braintree, Paymill, or PayPal IDs if the customer was created via those gateways.
Optional
Option Description
data-label The text to be shown on the default green button.
data-editable Allow your users to edit their billing data. The default is  true.

Custom Integration

The custom integration lets you create a custom button and bind it to Quaderno Billing. This permits any HTML element or JavaScript event to start launch the modal.
When your page loads, you should create a handler object using  QuadernoBilling.configure(). You can call open() on the handler in response to any event.
If you need to reload the modal-for example, when navigation occurs in a single-page application—you can call  close() on the handler.
The  key and customer_id parameter must be passed to configure(). Any other options can be passed to either configure() or open().
<button id="billing">Check your invoices</button>

<script>
  var handler = QuadernoBilling.configure({
    key: 'QUADERNO_PUBLIC_KEY',
    customer_id: 'CUSTOMER_SECURE_ID_OR_PAYMENT_GATEWAY_ID',
    editable: true
  })

  $('#billing').on('click', function(e) {
    e.preventDefault()
    handler.open()
  });
</script>
The parameters supported by the  open() method are the following:

Still need help? Contact Us Contact Us