React Checkout
Quickly create simple React checkout forms styled for Bootstrap 4. Bank cards are processed via stripe.js low level library. Redux store is used to maintain internal state. Forms are generated using the SimpleForm package.
Live Examples
Two examples are available:
- Donation Form - donation form example
- Checkout - In order to see the Checkout page you'll need to add some products to the shopping cart. To do it, press green "Add to Cart" button. Next, press blue "Checkout" button.
Introduction
react-checkout
is a package that is designed to simplify the process of making bespoke checkout pages. Alternatively, you could use Stripe's own Checkout widget to process card payments but it does have some issues:
- You will need to load the rather large Stripe Checkout library before you can even show Checkout UI. With this package you can bundle the checkout page with the rest of you code and show it immediately to the user. Low level lightweight
stripe.js
library will be asynchronously loaded only afterreact-checkout
has been mounted. - Stripe Checkout widget will redirect you to the Stripe web site on mobile devices.
- Stripe Checkout widget look and feel is not really customizable and it can look out of place on your web site. With this package you control checkout look and feel.
- REST API handling is left as an exercise to the reader.
Installation
To install the package run the following command in the command prompt:
npm install react-checkout bootstrap@4.0.0-alpha.4 redux react-redux --save
Import react-checkout
in the component where you want to use it like so:
; //import Bootstrap if you haven't done it already; // redux store utilities; // your other reducers;
Create Redux store with the supplied reducer. formReducer
must be on the simpleform
key:
const store = ;
Use order
action to specify the particulars of the order:
store;
Somewhere in your component render
method:
<Checkout store=store amountPrefix="Pay $" testStripeKey="pk_test_ry8ALrWRqEItYo3DQDAOynVH" liveStripeKey="pk_live_czjLJx8fbS6L6KvQIlItvPvY" endpoint="https://3kh1a4zr83.execute-api.eu-west-1.amazonaws.com/prod/v1/stripe/create" fields= "name=*|John Doe" "email=*email|john@example.com" "phone=tel|+44 207 123 4567" "number=*|4242 4242 4242 4242|Long number on the front of your card|Card Number" "cvc=*|123|The 3 digits to the right of the signature strip located on the back of your card|CVC" "exp=*|10/17||Expiry Date" "address=*6|1 Chapel Hill, Heswall, BOURNEMOUTH, UK, BH1 1AA|The address where your order will be shipped" />
Form fields named number
, cvc
and exp
are required and must be present for Checkout to function.
Refer to SimpleForm docs on how to create form fields.
Documentation
Checkout Properties
endpoint
string. RESTful API endpoint that should parse JSON object in thePOST
body. The JSON object sent will look like this:
mode: 'string'// either "live" or "test" depending whether application is in production or not token: 'Stripe token' // Token returned by the Stripe API data: {} // Object which will have all key/value pairs from the form and the order object. // Card details will NOT be sent.
The endpoint should set success
key to true
to indicate successful payment:
"success": true
or error message otherwise:
"message": "Payment failed"
Required.
testStripeKey
string. Public Stripe API test key. Required.liveStripeKey
string. Public Stripe API live key. Required.amountPrefix
string. Text displayed on the form submit button in front of the amount. Defaults to "Pay £". Optional.zeroAmountText
string. Text shown when Redux store order amount is zero. Defaults to "Your order is empty". Optional.stripeNotLoadedText
string. Error message shown whenstripe.js
library is not found. Defaults to "Unfortunately we are unable to process your payment". Optional.waitText
string Text displayed when form is being uploaded . Defaults to "Processing your payment. Please wait ...". Optional.errorText
string Text displayed when form has encountered errors on upload. Defaults to "Houston, we have a problem!". Optional.successText
string Text displayed when form is uploaded without any issues. Defaults to "Your payment has been made". Optional.welcomeText
string Text displayed when form is initially displayed. Defaults to "Please pay for your order". Optional.invalidFieldText
string Text displayed when field fails Stripe validation. Defaults to "This field is invalid". Optional.
Checkout Children
Children are ignored.
order
Action
Use this redux action to specify the particulars of the order. It takes one argument which is a javascript object. This object must contain key/value pairs of which amount
key is the most important one. It should be an integer number corresponding to gross amount of the transaction, in pence. Other key/value pairs will be passed along to the RESTful endpoint. For example:
; // import Redux storestore; // ordering a green widget which costs 100.00
Universal Rendering
This component is compatible with universal or server side rendering (SSR).
Step by Step Instructions
In order to start from scratch we'll use Facebook react starter kit called Create React App. In the command prompt type:
npm install -g create-react-app create-react-app my-appcd my-app/npm install react-checkout bootstrap@4.0.0-alpha.4 redux react-redux --savesubl src/App.js #open with Sublime Text. Or use any other text editor. npm start
Replace src/app.js
file contents with the following code:
;; //import Bootstrap if you haven't done it already; // redux store utilities; ;; const store = ;store; { return <div className="App"> <div className="App-header"> <img src=logo className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started edit <code>src/Appjs</code> and save to reload </p> <div className="container"> <Checkout store=store amountPrefix="Pay $" testStripeKey="pk_test_ry8ALrWRqEItYo3DQDAOynVH" liveStripeKey="pk_live_czjLJx8fbS6L6KvQIlItvPvY" endpoint="https://3kh1a4zr83.execute-api.eu-west-1.amazonaws.com/prod/v1/stripe/create" fields= "name=*|John Doe" "email=*email|john@example.com" "phone=tel|+44 207 123 4567" "number=*|4242 4242 4242 4242|Long number on the front of your card|Card Number" "cvc=*|123|The 3 digits to the right of the signature strip located on the back of your card|CVC" "exp=*|10/17||Expiry Date" "address=*6|1 Chapel Hill, Heswall, BOURNEMOUTH, UK, BH1 1AA|The address where your order will be shipped" /> </div> </div> ; } ;
Save it, then open http://localhost:3000/ to see the result.
Forking This Package
Clone the this repository using the following command:
git clone https://github.com/rnosov/react-checkout.git
In the cloned directory, you can run following commands:
npm install
Installs required node modules
npm run build
Builds the package for production to the dist
folder
npm test
Runs tests
License
Copyright © 2016 Roman Nosov. This source code is licensed under the MIT license.