Niestandardowy formularz w paski z Reactjs

Question

Podczas tworzenia niestandardowego formularza, po przesłaniu formularza należy przesłać formularz na serwer. Jest to dość proste w przypadku selektorów DOM. Tutaj:

var $form = $('#payment-form'); 
Stripe.createToken($form, this.stripe_response_handler); 

Jednak nie należy bezpośrednio próbować modyfikować lub uzyskiwać dostęp do DOM podczas korzystania z React. Aby temu zaradzić, użyłem ref. Tutaj:

<Form onSubmit={this.select_plan} ref={(ref) => this.paymentForm = ref} > 
... 
</Form> 

a następnie

Stripe.createToken(this.paymentForm, this.stripe_response_handler); 

Jednak to spowodowało błędu:

Uncaught TypeError: Converting circular structure to JSON

Co to jest poprawny sposób to zrobić w zareagować?

Answer 1

Istnieje kilka sposobów, w jaki sposób można wykorzystać Stripe.js, można przekazać formularz DOMElement (i nie wymagają użycia ref, ponieważ można uzyskać element formularza z e.target w onSubmit imprezy) Jeżeli istnieją dane atrybuty Stripe

var StripeComponent = React.createClass({ 
    componentDidMount: function() { 
    Stripe.setPublishableKey(); // set your test public key 
    }, 

    handleSubmit: function (e) { 
    e.preventDefault(); 
    Stripe.card.createToken(e.currentTarget, function (status, response) { 
     console.log(status, response);  
    }); 
    }, 

    render: function() { 
    return <form method="post" onSubmit={ this.handleSubmit }> 
     <input size="20" data-stripe="number" placeholder="number"/> 
     <input size="4" data-stripe="cvc" placeholder="cvc" /> 
     <input size="2" data-stripe="exp-month" placeholder="exp-month" /> 
     <input size="4" data-stripe="exp-year" placeholder="exp-year" /> 
     <button type="submit">Pay</button> 
    </form>; 
    } 
}); 

Example

lub można tworzyć niestandardowe dane obiektów jak ten

var StripeComponent = React.createClass({ 
    getInitialState: function() { 
    return { 
     card: { 
     number: '', 
     cvc: '', 
     exp_month: '', 
     exp_year: '' 
     } 
    } 
    }, 

    componentDidMount: function() { 
    Stripe.setPublishableKey(); // set your test public key 
    }, 

    handleSubmit: function (e) { 
    e.preventDefault(); 
    Stripe.createToken(this.state.card, function (status, response) { 
     console.log(status, response); 
    }); 
    }, 

    handleChange: function (e) { 
    let card = this.state.card; 
    card[e.target.name] = e.target.value 
    this.setState(card); 
    }, 

    render: function() { 
    return <form onSubmit={ this.handleSubmit }> 
     <input size="20" name="number" onChange={this.handleChange} /> 
     <input size="4" name="cvc" onChange={this.handleChange} /> 
     <input size="2" name="exp_month" onChange={this.handleChange} /> 
     <input size="4" name="exp_year" onChange={this.handleChange} /> 
     <button type="submit">Pay</button> 
    </form> 
    } 
}); 

Example

Uwaga - Aby przetestować przykłady, czego potrzebujesz ustawić klucz publiczny