CODEWITHSUNDEEP
jqueryreactjswebpackstripe-payments
Moe-Joe
Moe-Joe

Reputation: 1030

How do I fire a function with Stripe JS in React?

I'm working to integrate Stripe into my React build. I have followed the syntax for what I understand to be best practices for a form submit / tokenisation and as soon as the browser gets to the self.stripeHandler() I get an error in my console.

When not building in React and instead using jQuery, the stripeResponseHandler function is included as a parameter in the Stripe.card.createToken function and fires the stripeResponseHandler function with no issues.

Now, I am having trouble adapting the Stripe documentation to React. Any ideas?

I'm using using webpack to componetise the build. That would be the issue would it?

import React from 'react';
import jQuery from 'jquery';

export default class PurchaseForm extends React.Component {

    submitFormHandler(e) {

      e.preventDefault();

      var $form = $('#payment-form');

      const self = this;

      $form.submit(function(event, self) {

        // Request a token from Stripe:
        Stripe.card.createToken({
          number: $('.card-number').val(),
          cvc: $('.card-cvc').val(),
          exp_month: $('.card-expiry-month').val(),
          exp_year: $('.card-expiry-year').val()
        }, self.stripeResponseHandler()); // Uncaught TypeError: Cannot read property 'stripeResponseHandler' of undefined

        return false;
      });

    };

    stripeResponseHandler(){

      console.log("stripeResponseHandler fired");

    };

  render(){
    return(
      <div>
        <form onSubmit={this.submitFormHandler.bind(this}>.....</form>
      </div>
    );  
  }
};

Thank you for any help you can provide. Moe

Upvotes: 1

Views: 241

Answers (1)

Moonjsit
Moonjsit

Reputation: 636

You should avoid using old school self, it's messy. React is all about functional approach, playing with context like that is a bad idea.

What I recommend is binding your functions in constructor. Check:

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

Additionally I am quite sure that you should pass a reference to stripeResponseHandler function, not invoke it.

Upvotes: 1

Related Questions