# stripe-checkout-lite

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

Latest version **0.0.1** (published 2017-01-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install stripe-checkout-lite
pnpm add stripe-checkout-lite
yarn add stripe-checkout-lite
bun add stripe-checkout-lite
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2017-01-27 |
| First published | 2017-01-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Raja Rao DV |
| Maintainers | rajaraodv |
| Keywords | react, stripe, checkout, inject, loaded, easy, minimal, tiny, JSX |

## Links

- npm: https://www.npmjs.com/package/stripe-checkout-lite
- Repository: https://github.com/rajaraodv/stripe-checkout-lite
- Homepage: https://github.com/rajaraodv/stripe-checkout-lite#readme
- Issues: https://github.com/rajaraodv/stripe-checkout-lite/issues
- npm.io page: https://npm.io/package/stripe-checkout-lite

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^15.4.2
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2017-01-27

## 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. <Checkout price="999" />. 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
<a href="https://stripe.com/docs/checkout#integration-custom" target="_blank">Stripe's docs.</a>

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

---
_Source: https://npm.io/package/stripe-checkout-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._