title: How can I use Stripe Checkout with React Webpack?
body: <p><br>
  I hope you can help. I'll try and provide everything you to help. <br>
  I am running my build locally on Xampp.
  My Code:</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  
  export default class Front extends React.Component {
  
    constructor(){
      super();
      this.state = {
        account : []
      };
    };
  
    render(){
  
      return(
        &lt;div className="shopFront"&gt;
        --Content--
        &lt;/div&gt;
      );
    }
  };
  </code></pre>
  
  <p>I tried to simply include(in the --Content-- placeholder):</p>
  
  <pre><code>&lt;form action="/your-server-side-code" method="POST"&gt;
    &lt;script
      src="https://checkout.stripe.com/checkout.js" className="stripe-button"
      data-key="TEST--KEY--"
      data-amount="999"
      data-name="Product"
      data-description="Widget"
      data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
      data-locale="auto"
      data-currency="aud"&gt;
    &lt;/script&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>But this does not display an actual "Pay Now" button. No errors in the console. Just no button renders at all.</p>
  
  <p>I've tried to use the react-stripe-checkout package.<br>
  <a href="https://www.npmjs.com/package/react-stripe-checkout" rel="nofollow noreferrer">https://www.npmjs.com/package/react-stripe-checkout</a></p>
  
  <p>I added <code>import StripeCheckout from 'react-stripe-checkout';</code>
  and amended my build to:</p>
  
  <pre><code>  onToken(token){
      fetch('components/charge.php', {
        method: 'POST',
        body: JSON.stringify(token),
      }).then(token =&gt; {
        // alert(`We are in business, ${token.email}`);
        console.log(token);
      });
    }
  
    render(){
      return(
        &lt;div className="shopFront"&gt;
        Hello World
  
        &lt;StripeCheckout
          token={this.onToken}
          stripeKey="pk_test_GwbZ42OeC9M7KRxd49t21LHC"
        /&gt;
  
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>I've added the charge and config.php files. Composer is implemented with the stripe.php files. <br>
  charge.php<br></p>
  
  <pre><code>&lt;?php
    require_once('./config.php');
  
    $token  = $_POST['stripeToken'];
  
    $customer = \Stripe\Customer::create(array(
        'email' =&gt; 'moe12@example.com',
        'source'  =&gt; $token
    ));
  
    $charge = \Stripe\Charge::create(array(
        'customer' =&gt; $customer -&gt; id,
        'amount'   =&gt; 5000,
        'currency' =&gt; 'aud'
    ));
  
    echo '&lt;h1&gt;Successfully charged $50.00!&lt;/h1&gt;';
  ?&gt;
  </code></pre>
  
  <p>config.php</p>
  
  <pre><code>&lt;?php
  require_once('vendor/autoload.php');
  
  $stripe = array(
    "secret_key"      =&gt; "sk_test_r8KuCcmiuJfnFo58UnbV3fG0",
    "publishable_key" =&gt; "pk_test_GwbZ42OeC9M7KRxd49t21LHC"
  );
  
  \Stripe\Stripe::setApiKey($stripe['secret_key']);
  ?&gt;
  </code></pre>
  
  <p>It almost works. Displays the "pay now" button but when the checkout form processed I get this error log in the dashboard of Stripe.</p>
  
  <p><a href="https://i.stack.imgur.com/Ntpa3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ntpa3.jpg" alt="enter image description here"></a></p>
  
  <p>The customer gets created ok but the charge fires an error. Does anyone have any insight into this or a better method to including Stripe Checkout into React?<Br>
  I've uploaded the build to<br>
  <a href="http://stickermata.com/stripe/" rel="nofollow noreferrer">http://stickermata.com/stripe/</a>
  <br>if you would like to run the test.</p>
  
  <p>Any help is much appreciated.<br>
  Thanks All,</p>
  
  <p>Moe</p>