Abowire Javascript SDK

This is the official Abowire Javascript SDK, which makes it easy to connect to the Abowire GraphQL API and includes all the required dependencies you need.

This library provides Typescript support and works both browser and NodeJS environments.

For rendering Web components in the browser to collect customer and payment information in the browser, use the Abowire Web SDK.

Documentation

See the full JS SDK docs.

Node.js SDK

Installation

Install the SDK via our NPM package:

npm install abowire
# or
yarn add abowire

Authentication

The SDK comes with an integrated OAuth2 client that handles authentication for you.

For backend applications we use the Client Credentials Grant, for which you will need to provide a Client ID and a secret.

import Abowire from 'abowire';

const abowire = new Abowire({
  clientId: '<your-client-id>',
  secret: '<your-secret>',
  accountId: '<your-account-id>',
});

If authentication is successful, the generated access token will be automatically used in all following requests to our APIs.

If authentication fails, the SDK throws an exception.

You can also provide a scopes parameter to specify your own authentication scopes.

Browser SDK

Installation

You can either install the SDK via our NPM package:

npm install abowire
# or
yarn add abowire

or by adding this script tag:

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

The SDK will make a global Abowire object available once loaded.

Since the SDK loads asynchronously, we provide a callback function you can use to perform any action after it has been loaded.

By default, this function needs to be called initAbowire, but you can rename it to something else by changing the callback name in the snippet above.

Eg:

<script>
  function initAbowire() {
    // The SDK has been loaded and the Abowire object is globally available now
  }
</script>

Authentication

The SDK comes with an integrated OAuth2 client that handles authentication for you.

For frontend applications we use the Authorization Code Grant, for which you will need to provide a public Client ID.

If you use the NPM package, you can provide the Client ID like this:

import Abowire from 'abowire';

const abowire = new Abowire({
  clientId: '<your-client-id>',
});

You can also provide a scopes parameter to specify your own authentication scopes.

If you used the script tag, you must edit <your-client-id> with your own Client ID in the script above.

You can then ask the user to log into Abowire with the login() function:

import Abowire from 'abowire';

const abowire = new Abowire({
  clientId: '<client-id>',
});

await abowire.login();

If authentication is successful, the generated access token will be automatically used in all following requests to our APIs.

Abowire Web Components

The Abowire SDK comes with built-in frontend components that you can easily integrate to your Website or apps.

In order to use these components, you will need to load the SDK as shown above.

Subscribe button

The Abowire Subscribe Button is a component that lets your customers easily subscribe to your products.

When a user clicks the Abowire Subscribe button, a Checkout is opened within your Website.

To make this work, you only need to add the <abowire-button> tag and specify the SKU of the plan and a text for your button:

<abowire-button product="free">Get started for free</abowire-button>
<abowire-button product="premium">Subscribe</abowire-button>

You can even style your button to fit your design using CSS:

<style>
  #my-styled-button {
    --abowire-button-width: 300px;
    --abowire-button-height: 50px;
    --abowire-button-border-radius: 0px;
    --abowire-button-padding: 0px 0px;
  }
</style>

<abowire-button id="my-styled-button" product="premium">Subscribe</abowire-button>

Embedded Checkout

In some cases you might want to embed the Abowire Checkout directly into your Website. You can use the <abowire-checkout> tag to do this:

<abowire-checkout product="premium"/></abowire-checkout>

Making requests

To help you get started faster, the SDK comes with a GraphQL client and many useful pre-made queries built-in:

const customer = await abowire.customer.create({ name: 'My Customer' });
console.log(customer);

const response = await abowire.customer.list();

console.log(response.items);

Making custom GraphQL queries

Of course, you can also make any custom queries as well:

// Define your own GraphQL query
const LIST_CUSTOMERS_QUERY = gql`
  query {
    customers {
      items {
        id
        name
      }
    }
  }
`;

const response = await abowire.graphql.query(LIST_CUSTOMERS_QUERY);

console.log(response.items);

See more examples in our JS SDK docs.

Support

If you need assistance or have any issues, reach out to us at [email protected].