Stripe integration with React using custom form

Stripe is the best platform to collection payment online. In this tutorial, we’ll learn Stripe integration with React with the example. We will create custom form to collect the credit or debit card information and create token from the information. Let’s see Stripe integration with React with the example

Before start learning React Stripe element integration integration . We need a React Project. If you don’t know how to create a new project. Follow this tutorial.

Stripe.js makes it easy to collect credit card—and other similarly sensitive—details without having the information touch your server.

Set up Stripe Elements

First of all, we need to add a stripe script.

We have two ways to load this JS.

In the first method we need to add the script tag to the index.html file

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

The second way to include it via component.

I will prefer second method becuase in this method the stripe will load when we really need it.

Open the App.js file and add the below method on it

loadStripe = () => {
    
    if(!window.document.getElementById('stripe-script')) {
      var s = window.document.createElement("script");
      s.id = "stripe-script";
      s.type = "text/javascript";
      s.src = "https://js.stripe.com/v2/";
      s.onload = () => {
        window['Stripe'].setPublishableKey('your_public_key');
      }
      window.document.body.appendChild(s);
    }
}

Here key is your stripe public key, You can get this key from the stripe dashboard. Login or register on stripe then go to the Developer then Api Keys . Here you can see the Publishable key copy this key and replace with the above your_public_key

The loadStripe method will add the script dynamically when the component will load

Next, Call the above method on componentDidMount method like below

componentDidMount() {
    this.loadStripe();    
}

Create your payment form

Next, We need to create beautiful html form. We am using bootstrap in our project.

open theApp.js file and put the below html

render() {
  return (
    <div className="container">    
      <div className="row">
          <div className="col-xs-12 col-md-8 mr-auto ml-auto">            
              <div className="panel panel-default">
                  <form onSubmit={this.pay}>
                    <div className="panel-body mt-5">
                        <h4>Stripe - Custom form demo</h4>    
                        <p><b>{this.state.message}</b></p>
                        <div className="row">
                            <div className="col-xs-12 col-md-12">
                                <div className="form-group">
                                    <label>CARD NUMBER</label>
                                    <div className="input-group">
                                        <input type="text" className="form-control" placeholder="Valid Card Number" name="cardNumber" maxLength="18" onChange={this.handleChange} />
                                        <span className="input-group-addon"><span className="fa fa-credit-card"></span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-xs-7 col-md-7">
                                <div className="form-group">
                                    <label><span className="hidden-xs">EXPIRATION</span> Date</label>
                                    <div className="row">
                                        <div className="col-md-6">
                                            <div className="form-group">
                                                <select name="expMonth" className="form-control"  onChange={this.handleChange}>
                                                    <option value="">Select Month</option>
                                                    <option value="1">01</option>
                                                    <option value="2">02</option>
                                                    <option value="3">03</option>
                                                    <option value="4">04</option>
                                                    <option value="5">05</option>
                                                    <option value="6">06</option>
                                                    <option value="7">07</option>
                                                    <option value="8">08</option>
                                                    <option value="9">09</option>
                                                    <option value="10">10</option>
                                                    <option value="11">11</option>
                                                    <option value="12">12</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div className="col-md-6 pull-right">
                                            <div className="form-group">
                                                <select name="expYear" className="form-control" onChange={this.handleChange}>
                                                    <option value="">Select Year</option>
                                                    <option value="20">2020</option>
                                                    <option value="21">2021</option>
                                                    <option value="22">2022</option>
                                                    <option value="23">2023</option>
                                                    <option value="24">2024</option>
                                                    <option value="25">2025</option>
                                                    <option value="26">2026</option>
                                                    <option value="27">2027</option>
                                                    <option value="28">2028</option>
                                                    <option value="29">2029</option>
                                                    <option value="30">2030</option>                                                
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>                            
                            </div>
                            <div className="col-xs-5 col-md-5 pull-right">
                                <div className="form-group">
                                    <label>CVV CODE</label>
                                    <input type="text" name="cvv" className="form-control" placeholder="CVC" maxLength="4" onChange={this.handleChange} />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="panel-footer">
                        <div className="row">
                            <div className="col-xs-12 col-md-12">
                                { (this.state.formProcess)? (
                                    <span className="btn btn-warning btn-lg btn-block">Please wait...</span>
                                  ) : (
                                    <button className="btn btn-warning btn-lg btn-block">Process payment</button>
                                  )}
                            </div>
                        </div>
                    </div>
                </form>
                <p className="mt-2">Try it out using the test card number 4242 4242 4242 4242, a random three-digit CVC number and any expiration date in the future.</p>
              </div>
          </div>
      </div>
    </div>
  );
}

Next, We will create a new method which will validate the form and get the form data and sent it to the stripe server to generate the token

Add the below method on App.js file

pay = (e) => {

    e.preventDefault();

    this.setState({
      formProcess: true
    });

    window.Stripe.card.createToken({
      number: this.state.cardNumber,
      exp_month: this.state.expMonth,
      exp_year: this.state.expYear,
      cvc: this.state.cvc
    }, (status, response) => {
            
      if (status === 200) {
        this.setState({
          message: `Success! Card token ${response.card.id}.`,
          formProcess: false
        });

      } else {
        this.setState({
          message: response.error.message,
          formProcess: false
        });
      }
    });
  } 

After the above changes our component will look like below

import React, { Component } from 'react';

class App extends Component {
  state =  {
    cvc: '',
    message: '',
    expYear: '',
    expMonth: '',
    cardNumber: '',
    formProcess: false
  };

  componentDidMount() {
    this.loadStripe();    
  }

  handleChange = (evt) => {
    this.setState({
      [evt.target.name] : evt.target.value
    });
  }

  pay = (e) => {

    e.preventDefault();

    this.setState({
      formProcess: true
    });

    window.Stripe.card.createToken({
      number: this.state.cardNumber,
      exp_month: this.state.expMonth,
      exp_year: this.state.expYear,
      cvc: this.state.cvc
    }, (status, response) => {
      
      
      if (status === 200) {
        this.setState({
          message: `Success! Card token ${response.card.id}.`,
          formProcess: false
        });

      } else {
        this.setState({
          message: response.error.message,
          formProcess: false
        });
      }
    });
  }


  loadStripe = () => {
    
    if(!window.document.getElementById('stripe-script')) {
      var s = window.document.createElement("script");
      s.id = "stripe-script";
      s.type = "text/javascript";
      s.src = "https://js.stripe.com/v2/";
      s.onload = () => {
        window['Stripe'].setPublishableKey('your_public_key');
      }
      window.document.body.appendChild(s);
    }
  }

  render() {
    return (
      <div className="container">    
        <div className="row">
            <div className="col-xs-12 col-md-8 mr-auto ml-auto">            
                <div className="panel panel-default">
                    <form onSubmit={this.pay}>
                      <div className="panel-body mt-5">
                          <h4>Stripe - Custom form demo</h4>    
                          <p><b>{this.state.message}</b></p>
                          <div className="row">
                              <div className="col-xs-12 col-md-12">
                                  <div className="form-group">
                                      <label>CARD NUMBER</label>
                                      <div className="input-group">
                                          <input type="text" className="form-control" placeholder="Valid Card Number" name="cardNumber" maxLength="18" onChange={this.handleChange} />
                                          <span className="input-group-addon"><span className="fa fa-credit-card"></span></span>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div className="row">
                              <div className="col-xs-7 col-md-7">
                                  <div className="form-group">
                                      <label><span className="hidden-xs">EXPIRATION</span> Date</label>
                                      <div className="row">
                                          <div className="col-md-6">
                                              <div className="form-group">
                                                  <select name="expMonth" className="form-control"  onChange={this.handleChange}>
                                                      <option value="">Select Month</option>
                                                      <option value="1">01</option>
                                                      <option value="2">02</option>
                                                      <option value="3">03</option>
                                                      <option value="4">04</option>
                                                      <option value="5">05</option>
                                                      <option value="6">06</option>
                                                      <option value="7">07</option>
                                                      <option value="8">08</option>
                                                      <option value="9">09</option>
                                                      <option value="10">10</option>
                                                      <option value="11">11</option>
                                                      <option value="12">12</option>
                                                  </select>
                                              </div>
                                          </div>
                                          <div className="col-md-6 pull-right">
                                              <div className="form-group">
                                                  <select name="expYear" className="form-control" onChange={this.handleChange}>
                                                      <option value="">Select Year</option>
                                                      <option value="20">2020</option>
                                                      <option value="21">2021</option>
                                                      <option value="22">2022</option>
                                                      <option value="23">2023</option>
                                                      <option value="24">2024</option>
                                                      <option value="25">2025</option>
                                                      <option value="26">2026</option>
                                                      <option value="27">2027</option>
                                                      <option value="28">2028</option>
                                                      <option value="29">2029</option>
                                                      <option value="30">2030</option>                                                
                                                  </select>
                                              </div>
                                          </div>
                                      </div>
                                  </div>                            
                              </div>
                              <div className="col-xs-5 col-md-5 pull-right">
                                  <div className="form-group">
                                      <label>CVV CODE</label>
                                      <input type="text" name="cvv" className="form-control" placeholder="CVC" maxLength="4" onChange={this.handleChange} />
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div className="panel-footer">
                          <div className="row">
                              <div className="col-xs-12 col-md-12">
                                  { (this.state.formProcess)? (
                                      <span className="btn btn-warning btn-lg btn-block">Please wait...</span>
                                    ) : (
                                      <button className="btn btn-warning btn-lg btn-block">Process payment</button>
                                    )}
                              </div>
                          </div>
                      </div>
                  </form>
                  <p className="mt-2">Try it out using the test card number 4242 4242 4242 4242, a random three-digit CVC number and any expiration date in the future.</p>
                </div>
            </div>
        </div>
      </div>
    );
  }
}

export default App;

You have successfully integrated the stripe with React. With the above integration you will be able to generate tokens. Now you need to code some server side code to catch this payment.

For server side payment capture, visit this (https://stripe.com/docs/api/charges/create) url

Here is how our application will looks like

13 Comments

  1. cialis cheap said:

    I am just writing to make you understand what a notable experience my wife’s girl had using your web site. She mastered so many pieces, which included what it is like to possess an excellent helping nature to let other people with ease learn some problematic things. You truly surpassed people’s expected results. Thank you for producing these precious, trusted, informative and in addition fun tips about this topic to Lizeth. https://azzaroelectric.com/

    January 7, 2021
    Reply
  2. quetiapine cost said:

    I happen to be writing to make you understand what a wonderful experience our princess went through visiting yuor web blog. She realized too many things, with the inclusion of what it is like to possess an incredible teaching style to make the rest without problems understand various very confusing topics. You undoubtedly surpassed visitors’ expected results. Thanks for supplying those warm and helpful, trustworthy, revealing not to mention unique tips on your topic to Tanya. https://seroquelquetiapine.com/#

    January 9, 2021
    Reply
  3. Huey said:

    Hi there, this weekend is fastidious in support of me, as this point in time i am reading this enormous informative piece of writing here at
    my house.

    Also visit my webpage cheap flights

    January 31, 2021
    Reply
  4. Allen said:

    Your way of describing everything in this piece of writing is actually pleasant, all be capable of without difficulty understand it, Thanks a lot.

    My blog – cheap flights

    January 31, 2021
    Reply
  5. Timothy said:

    We’re a group of volunteers and starting a new scheme in our community.
    Your website offered us with valuable information to work on. You have done
    a formidable job and our entire community will be grateful to you.

    Look into my page :: cheap flights

    January 31, 2021
    Reply
  6. Brittny said:

    Amazing things here. I’m very glad to peer your article.
    Thanks a lot and I am having a look forward to contact you.
    Will you please drop me a mail?

    Take a look at my homepage – cheap flights

    February 1, 2021
    Reply
  7. Paul said:

    I absolutely love your blog and find almost all of your
    post’s to be what precisely I’m looking for. Does one offer guest writers to write content for yourself?
    I wouldn’t mind composing a post or elaborating on a few
    of the subjects you write about here. Again, awesome blog!

    Here is my web page; cheap flights

    February 1, 2021
    Reply
  8. Shayne said:

    Oh my goodness! Amazing article dude! Many thanks, However I am going through problems with your RSS.
    I don’t know why I am unable to join it. Is there anyone else having similar RSS problems?
    Anyone that knows the answer will you kindly respond? Thanks!!

    Take a look at my page :: cheap flights

    February 1, 2021
    Reply
  9. Eva said:

    I have been surfing on-line more than 3 hours these days, but I by no
    means found any interesting article like yours.
    It is pretty value enough for me. Personally, if all web owners and bloggers made good content material as you did, the
    internet will probably be a lot more helpful than ever before.

    my page … cheap flights; tinyurl.com,

    February 2, 2021
    Reply
  10. Laura said:

    Have you ever thought about including a little bit more than just your articles?
    I mean, what you say is valuable and everything. Nevertheless
    think of if you added some great visuals or videos to give
    your posts more, “pop”! Your content is excellent but with images and video clips, this site could certainly be
    one of the best in its field. Excellent blog!

    My web site :: cheap flights

    February 2, 2021
    Reply
  11. Josefa said:

    Asking questions are in fact good thing if you are not understanding anything
    fully, but this piece of writing offers pleasant understanding
    even.

    my web page cheap flights (tinyurl.com)

    February 3, 2021
    Reply
  12. Rosaria said:

    I loved as much as you’ll receive carried out
    right here. The sketch is attractive, your authored material stylish.
    nonetheless, you command get got an nervousness over
    that you wish be delivering the following. unwell unquestionably come further formerly again as exactly the same
    nearly very often inside case you shield this increase.

    My page :: cheap flights (http://tinyurl.com/yy8nhdmg)

    February 12, 2021
    Reply
  13. Arturo Aleyandrez said:

    How do you start building a WordPress site for an already existing website?

    February 19, 2021
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *