Skip to main content

Subscribe Button 💰

Our Subscribe Button you can onboard a customer fast and collect all the required billing and payment information required to bill them. After successful registration, a subscription will be created and the user can be then forwarded back to you.

The Subscribe Button directly connected with our Checkout. When you click it, the checkout opens automatically on your Website (modal window).

Getting started​

To install the button on your page, you will need to first load the SDK with your preferred method. You can find more information about this in the SDK Installation page. Note: You only need to add this code once on your page.

For example:

<script
  src="https://cdn.abowire.com/sdk/latest/abowire.js?clientId=<your-client-id>&accountId=<your-account-id>&callback=initAbowire"
  async
></script>

To then display the button, you just have to add this HTML tag where you want it to appear (here adjust product ID and texts as needed):

<abowire-button product="product_1" redirect-url="/success">
  Subscribe to Scale
</abowire-button>

You can have multiple buttons, each with a different product ID.

You can also style the button with CSS. For example:

abowire-button {
    --abowire-button-width: 300px;
    --abowire-button-height: 50px;
    --abowire-button-border-radius: 0px;
    --abowire-button-padding: 0px 0px;
}

Pre-authenticate a user with a Customer Session​

If you have already created a Customer Session in the backend (see Customer Sessions), you can use it to prefill the checkout. This is useful if you want to create a checkout for an existing customer.

<abowire-button
  session="customerSession_1"
  product="product_1"
  redirect-url="/success"
/>

Available parameters​

  • product: The product ID of the product you want to subscribe to.
  • redirect-url: The URL to which the user will be redirected after successful subscription.
  • locale: The locale to use for the button and checkout. Currently supported: en, de , es.
  • session: The ID of a customer session created in the backend. This is useful if you want to create a checkout for an existing customer.
  • step: The checkout step to show. Currently supported: contact, billing, payment, review.
  • steps: The checkout steps you want to show (separated by comma). Currently supported: contact, billing, payment, review.