如何在React Webpack中使用Stripe Checkout？

Question

我希望你能提供帮助。我会尽力为你提供帮助。
我在Xampp本地运行我的构建。 我的代码：

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>
    );
  }
};

我试图简单地包含（在--Content--占位符中）：

<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>

但这并不显示实际的“立即付款”按钮。控制台中没有错误。根本没有按钮呈现。

我尝试过使用react-stripe-checkout软件包 https://www.npmjs.com/package/react-stripe-checkout

我添加了import StripeCheckout from 'react-stripe-checkout'; 并将我的构建修改为：

  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>
    );
  }

我添加了charge和config.php文件。 Composer是使用stripe.php文件实现的。
charge.php

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

  $token  = $_POST['stripeToken'];

  $customer = \Stripe\Customer::create(array(
      'email' => 'moe12@example.com',
      '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']);
?>

它几乎可以工作。显示“立即付款”按钮，但是当处理结帐表单时，我会在条带的仪表板中显示此错误日志。

客户创建正常但收费却引发错误。有没有人对这个或更好的方法有任何了解将条纹结帐包含在React中？ 我已将构建内容上传到
http://stickermata.com/stripe/
如果你想参加考试。

非常感谢任何帮助 谢谢大家，

萌