如何在React Webpack中使用Stripe Checkout？

Question

I hope you can help. I'll try and provide everything you to help.
I am running my build locally on Xampp. My Code:

import React from "react";
import ReactDOM from "react-dom";

export default class Front extends React.Component {

  constructor(){
    super();
    this.state = {
      account : []
    };
  };

  render(){

    return(
      <div className="shopFront">
      --Content--
      </div>
    );
  }
};

I tried to simply include(in the --Content-- placeholder):

<form action="/your-server-side-code" method="POST">
  <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">
  </script>
</form>

But this does not display an actual "Pay Now" button. No errors in the console. Just no button renders at all.

I've tried to use the react-stripe-checkout package.
https://www.npmjs.com/package/react-stripe-checkout

I added import StripeCheckout from 'react-stripe-checkout'; and amended my build to:

  onToken(token){
    fetch('components/charge.php', {
      method: 'POST',
      body: JSON.stringify(token),
    }).then(token => {
      // alert(`We are in business, ${token.email}`);
      console.log(token);
    });
  }

  render(){
    return(
      <div className="shopFront">
      Hello World

      <StripeCheckout
        token={this.onToken}
        stripeKey="pk_test_GwbZ42OeC9M7KRxd49t21LHC"
      />

      </div>
    );
  }

I've added the charge and config.php files. Composer is implemented with the stripe.php files.
charge.php

<?php
  require_once('./config.php');

  $token  = $_POST['stripeToken'];

  $customer = \Stripe\Customer::create(array(
      'email' => '[e-mail]',
      'source'  => $token
  ));

  $charge = \Stripe\Charge::create(array(
      'customer' => $customer -> id,
      'amount'   => 5000,
      'currency' => 'aud'
  ));

  echo '<h1>Successfully charged $50.00!</h1>';
?>

config.php

<?php
require_once('vendor/autoload.php');

$stripe = array(
  "secret_key"      => "sk_test_r8KuCcmiuJfnFo58UnbV3fG0",
  "publishable_key" => "pk_test_GwbZ42OeC9M7KRxd49t21LHC"
);

\Stripe\Stripe::setApiKey($stripe['secret_key']);
?>

It almost works. Displays the "pay now" button but when the checkout form processed I get this error log in the dashboard of Stripe.

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?
I've uploaded the build to
http://stickermata.com/stripe/
if you would like to run the test.

Any help is much appreciated.
Thanks All,

Moe