README

stripe-checkout-lite

A Minimal(2kb) React Stripe Checkout library. Easily import Stripe Checkout in your React Apps

Motivation

There are libs that add 10KB to 15KB of unnecessary code just so you can write it in markup attribute style i.e. . So, stripe-checkout-lite was created. It instead takes attributes as a JS object format, loads Stripe's checkout.js file and creates a button.

npm install stripe-checkout-lite --save

Usage:

import Checkout from 'stripe-checkout-lite'

// In the below code, 
// @config is Stripe checkout's config
// @style is style for the button
// @label label for the button

<Checkout 
    config={ this.config } 
    style={ { color: 'blue' } }  
    label="Subscribe" 
/>

1. Checkout Options

This is simply a Javascript literal that contains options mentioned in Stripe's docs.

    this.config = {
      key: 'pk_test_5qV78InO5XtnYvFRZ2VKnIjy', //Test/Live Token (Required)
      locale: 'auto',
      description: 'Gold Plan',
      amount: 999,
      allowRememberMe: false,
      name: 'Subscribe - $9.99/month',
      token: this.handleToken   //This is a callback function (Required)
    }

2. Style Options

This is style JS object that needs to be applied to the button.

3. label

This is the button's label

Complete Example

import Checkout from 'stripe-checkout-lite'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.config = {
      key: 'pk_test_5qV78InO5XtnYvFRZ2VKnIjy',
      locale: 'auto',
      description: 'Gold Plan',
      amount: 999,
      allowRememberMe: false,
      name: 'Subscribe - $9.99/month',
      token: this.handleToken
    }
  }

  handleToken(token) {
    fetch('/post-to-server', {
      method: 'POST',
      body: JSON.stringify(token),
    })
      .then(response => response.json())
      .then(data => {
        alert(`Got money!, ${data.email}`);
      })
  }


  render() {
    return (
      <div>
        <h1>Example</h1>
        <Checkout
          config={ this.config }
          style={ { color: 'blue' } }
          label="Subscribe" 
        />
      </div>
    )
  }
}

Building

git clone https://github.com/rajaraodv/stripe-checkout-lite.git
cd stripe-checkout-lite
npm install 
npm run build  //build new StripeReactCheckout.min.js

Running Example

npm install webpack-dev-server -g

//In the stripe-checkout-lite folder run:
webpack //Bundle latest StripeReactCheckout.min.js
webpack-dev-server

License

MIT

Usage no npm install needed!