Billing.js
  • Introduction
  • Features
  • Getting started
    • Installation
    • Add to your app
      • Wrap your app
      • Setup Pricing page
      • Setup Customer Portal
    • Configure Webhooks and Triggers
      • Subscription webhook
      • Customer Webhook
      • New user trigger
  • Guides
    • Single Sign-On
    • Shared subscriptions
    • Local currency support
    • Automatic Dispute Response
  • Components
    • <BillingProvider />
    • Pricing Page
      • <PaymentField />
      • <PaymentSummary />
      • <PromotionCode />
      • <PaymentModal />
    • Customer Portal
      • <CustomerProfile />
      • <Subcriptions />
      • <ManageSharedSubscriptionModal />
      • <PaymentMethods />
      • <Invoices />
  • Hooks
    • useAuth
    • useProducts
  • Methods
    • Product
      • getProducts
    • Customer
      • getCustomerSubscriptions
      • getCustomerPaymentMethods
      • getCustomerInvoices
    • Subscription
      • addSubscription
      • cancelSubscription
      • updateSubscription
    • Payment Method
      • attachPaymentMethodToCustomer
      • detachPaymentMethodFromCustomer
      • setPaymentMethodAsDefault
    • Shared Subscription
      • getSharedSubscription
      • getSharedSubscriptionUsers
      • updateSharedSubscriptionUsers
Powered by GitBook
On this page
  • Install the package from NPM
  • Connect your Stripe Account to BillingJS
  • Import styles

Was this helpful?

  1. Getting started

Installation

PreviousFeaturesNextAdd to your app

Last updated 1 year ago

Was this helpful?

Install the package from NPM

We only support React for now.

yarn add @billing-js/react-billing-js
npm install --save @billing-js/react-billing-js

Connect your Stripe Account to BillingJS

In order to make payment through our servers you need to connect your Stripe Account to our Stripe Connect Plateform

Click here to connect your Stripe to BillingJS

Then copy your connected Stripe Account ID for later use

Import styles

CDN

insert the stylesheet directly in your 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.

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

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

Tailwindcss config

if you are using Tailwind in your project please make sure to add the billing.js sources to your tailwind.config.cjs config to tell jit to not purge the classes used by billing.js and prevent collision with your own class names

// tailwind.config.js

module.exports = {
  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'),
  ],
}