# 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](https://abowire.dev/docs/web-sdk).

---

## Documentation

See the full [JS SDK docs](https://abowire.dev/docs/js-sdk).

---

## Node.js SDK

### Installation

Install the SDK via our NPM package:

```bash
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.

```typescript
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:

```bash
npm install abowire
# or
yarn add abowire
```

or by adding this script tag:

```html
<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:

```html
<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:

```typescript
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:

```typescript
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:

```html
<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:

```html
<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:

```html
<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:

```typescript
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:

```typescript
// 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](https://abowire.dev/docs/js-sdk).

---

## Support

If you need assistance or have any issues, reach out to us at support@abowire.com.