Question

我正在集成react-stripe-elements来为我的应用程序整理条带。我使用了SplitForm组件。整合后，我有所有的表格细节和付款按钮。当我点击付款按钮时，我会获得卡片详细信息的令牌。但是我的浏览器中看不到付款申请表。如何从paymentrequest发送金额？

我已经阅读了文档，但我没有找到任何适当的信息。我的代码如下：

 <StripeProvider apiKey="pk_live_29VEENvMXTK8wZCb8xI6EO0B">                   
    <Checkout />                
 </StripeProvider>



class _PaymentRequestForm extends React.Component{
 constructor(props) {
 super(props);
const paymentRequest = props.stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1000,
  },
});

paymentRequest.on('token', ({complete, token, ...data}) => {
  console.log('Received Stripe token: ', token);
  console.log('Received customer information: ', data);
  complete('success');
});

paymentRequest.canMakePayment().then(result => {
  this.setState({canMakePayment: !!result});
});

this.state = {
  canMakePayment: false,
  paymentRequest,
};
}
  render() {
 return this.state.canMakePayment ? (
  <PaymentRequestButtonElement
    className="PaymentRequestButton"
    paymentRequest={this.state.paymentRequest}

  />
) : null;
  }
  }
const PaymentRequestForm = injectStripe(_PaymentRequestForm);
class Checkout extends React.Component {
constructor() {
super();
this.state = {
  elementFontSize: window.innerWidth < 450 ? '14px' : '18px',
};
 }
render() {
const {elementFontSize} = this.state;
return (
  <div className="Checkout">
    <Elements>
    <PaymentRequestForm />
    </Elements>
  </div>
  );
 }

 }

Answer 1

您需要将amount保留在其他位置，并将其提供给PaymentRequest对象，并将其与令牌一起发送到将创建Charge的服务器端代码。< / p>

就未显示的“付款申请”按钮而言，如果没有更多信息，则很难回答，但如果您使用已保存的（测试）卡访问Chrome中的页面，则会看到它。

Answer 2

您是否通过https访问页面？我遇到过同样的问题。事实证明，您需要使用https连接才能显示付款表格。本地React开发服务器不提供SSL加密访问。对我来说，解决方案是使用ngrok并将其指向运行我的本地React应用程序的端口3000。

Answer 3

我知道这很旧，但是最近我遇到了同样的问题，并且发现问题出在我的React组件的命名上。 React组件应该以大写字母开头，否则不会呈现。在您的特定情况下，您需要更改以下代码块；

class _PaymentRequestForm extends React.Component{
...
}

收件人

class PaymentRequestForm extends React.Component{
...
}

希望这可以解决下一个问题，如果有帮助，请将其标记为有用。

用于条带集成的PaymentRequestForm在浏览器中不可见

3 个答案: