0

我正在为我的应用程序集成 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>
  );
 }

 }
4

3 回答 3

1

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

于 2019-10-20T14:37:17.373 回答
0

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

class _PaymentRequestForm extends React.Component{
...
}

至

class PaymentRequestForm extends React.Component{
...
}

希望这能为下一个人解决它，如果有帮助，也请将此标记为有用。

于 2020-02-20T21:17:36.700 回答
0

您需要将其保留在amount其他地方，并将其提供给 PaymentRequest 对象，并将其与 Token 一起发送到将创建 Charge 的服务器端代码。

就未出现“付款请求”按钮而言，如果没有更多信息，这很难回答，但如果您使用已保存（测试）卡在 Chrome 中访问该页面，您应该会看到它。

于 2018-05-02T23:01:32.293 回答