# Installation

### Install the package from NPM

{% hint style="info" %}
We only support React for now.
{% endhint %}

{% tabs %}
{% tab title="Yarn" %}

```bash
yarn add @billing-js/react-billing-js
```

{% endtab %}

{% tab title="NPM" %}

```
npm install --save @billing-js/react-billing-js
```

{% endtab %}
{% endtabs %}

### Connect your Stripe Account to BillingJS

In order to make payment through our servers you need to connect your [Stripe Account](https://dashboard.stripe.com/register) to our [Stripe Connect Plateform](https://stripe.com/connect)&#x20;

#### [Click here to connect your Stripe to BillingJS](https://billingjs.com/stripeConnect)

Then copy your connected Stripe Account ID for later use

<figure><img src="/files/xQSdQBlrB5939cOTP8ce" alt=""><figcaption></figcaption></figure>

### Import styles

#### CDN

insert the stylesheet directly in your html

```html
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@billing-js/react-billing-js/styles.css">
  </head>
  
  <body>
    <!-- content -->
  </body>
</html>
```

#### PostCSS config

In your root file, import the css sheet used by billing to get the styles.

```jsx
// project root file ex: ./index.js

import "@billing-js/react-billing-js/styles.css"
```

#### Tailwindcss config&#x20;

if you are using [Tailwind](https://tailwindcss.com/) in your project please make sure to add the billing.js sources to your `tailwind.config.cjs` config to tell [jit](https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css) to not purge the classes used by billing.js and prevent collision with your own class names

<pre class="language-javascript"><code class="lang-javascript">// tailwind.config.js

<strong>module.exports = {
</strong>  content: [
    // ...
    
    // INCLUDE THIS LINE TO NOT HAVE MISSING TAILWIND CLASSES
    "./node_modules/@billing-js/react-billing-js/index.js"
    
    // ...
  ],
  // ...
  plugins: [
    // ...
    
    // INCLUDE TAILWIND FORM CLASSES
    require('@tailwindcss/forms'),
  ],
}
</code></pre>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.billingjs.com/getting-started/installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
