Modulo personalizzato strisce con Reactjs

Question

Durante la creazione del modulo personalizzato, al momento dell'invio è necessario inviare il modulo al server. Questo è abbastanza semplice con i selettori DOM. Qui:

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

Tuttavia, non si dovrebbe provare direttamente a modificare o accedere a DOM quando si utilizza React. Per superare questo, ho usato ref. Qui:

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

e poi

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

Tuttavia, questo ha provocato l'errore:

Uncaught TypeError: Converting circular structure to JSON

Qual è il modo corretto di fare questo in Reagire?

Answer 1

Ci sono diversi modi come è possibile utilizzare Stripe.js, è possibile passare modulo DOMElement (e che non è necessario l'uso ref, perché è possibile ottenere elemento del form da e.target in onSubmit manifestazione) in cui ci sono dati attributi per 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

o è possibile creare dati personalizzati oggetto come questo

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

Nota-Per testare esempi è necessario impostare la chiave pubblica