Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/azmenak/react-stripe-checkout

Load stripe's checkout.js as a react component. Easiest way to use checkout with React.
https://github.com/azmenak/react-stripe-checkout

react stripe-checkout

Last synced: about 2 months ago
JSON representation

Load stripe's checkout.js as a react component. Easiest way to use checkout with React.

Awesome Lists containing this project

README 

        
[![npm version](https://badge.fury.io/js/react-stripe-checkout.svg)](http://badge.fury.io/js/react-stripe-checkout)

[![Dependencies Status](https://david-dm.org/azmenak/react-stripe-checkout.svg)](https://david-dm.org/react-stripe-checkout)

[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/azmenak/react-stripe-checkout)



# React Stripe Checkout Component

Stripe's Checkout makes it almost too easy to take people's money.

This should make it even easier if you're building a react

application.



### Installation



Get started by installing with npm



    npm install react-stripe-checkout



Requires babel for compiling. If anyone is having issues with that,

open an issue and I'll do my best to better document the build process.



#### Changes in version 2.0



There used to be a separate `.styl` file and respective `.css` output. These have been removed and are now written directly in js.



### Requirements



`token` and `stripeKey` are the only *required* props,

everything else is optional as per the stripe docs. See [Checkout

Docs](https://stripe.com/docs/legacy-checkout). All props

go through simple validation and are passed to stripe checkout, they're

also documented in `StripeCheckout.js`.



```jsx

import React from 'react'

import StripeCheckout from 'react-stripe-checkout';



export default class TakeMoney extends React.Component {

  onToken = (token) => {

    fetch('/save-stripe-token', {

      method: 'POST',

      body: JSON.stringify(token),

    }).then(response => {

      response.json().then(data => {

        alert(`We are in business, ${data.email}`);

      });

    });

  }



  // ...



  render() {

    return (

      // ...

      

    )

  }

}

```



This will give you a default *Stripe-style* button which looks like this:



![stripe checkout button](example.png)



### Send all the props!



```jsx



  

    Use your own child component, which gets wrapped in whatever

    component you pass into as "ComponentClass" (defaults to span)

  



```



### Other info

This was probably terribly written, I'll look at any PR coming my way.



### Resources 



* Non SCA Compliant: [Client-side Stripe Checkout with React and Express](https://www.robinwieruch.de/react-express-stripe-payment/)

* SCA Compliant: [Server-side Stripe Checkout with React and Express](https://github.com/rwieruch/react-express-stripe)



### Contributors

- [@orhan-swe](https://github.com/orhan-swe) added updates to checkout after instantiation and fixed a loading error

- [@ekalvi](https://github.com/ekalvi) added multiple checkout buttons per page

- [@jstaffans](https://github.com/jstaffans) adding support for locale

- [@gabestein](https://github.com/gabestein) added billing and shipping options

- [@samcorcos](https://github.com/samcorcos) added testing