React Stripe 元素没有出现？答案

【问题标题】：React Stripe Elements not showing up?React Stripe 元素没有出现？
【发布时间】：2020-11-16 17:04:32
【问题描述】：

您好，我是在 React 中使用 Stripe 和 Stripe Elements 的新手。我正在使用包 react-stripe-js 和 stripe-js，如 https://stripe.com/docs/stripe-js/react 中所述。我有两个组件，一个叫做 StripeWrapper：

import React from 'react';

// stripe
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';

// components
import CheckoutForm from './CheckoutForm';

// stripe load
const stripePromise = loadStripe(...);

const StripeWrapper = () => {
    return (  
        <Elements stripe={ stripePromise } >
            <CheckoutForm /> 
        </Elements>
    );
};
 
export default StripeWrapper;

这只是将实际 CheckoutForm 与 Elements 组件包装起来的 HOC，同样，如 Stripe 文档中所述。以及实际的表单组件：

const CheckoutForm = () => {

  const stripe = useStripe();
  const elements = useElements();

  // dispatch
  const dispatch = useDispatch();

  const setStep = useCallback(
    step => dispatch( setStepperAction(step) ),
    [ dispatch ],
  );

  const handleSubmitPayment = async e => {
    e.preventDefault();

    if (!stripe || !elements) return;
    
    ...
  };

  return (  
      <Col xs={12} className="bg-light px-1 my-2">
        <Form inline className="mx-0 w-100 h-100"
          onSubmit={ handleSubmitPayment }
        >  
          <label>
            Número de tarjeta
            <CardNumberElement />
          </label>
          <label>
            Fecha de caducidad
            <CardExpiryElement />
          </label>
          <label>
            CVC
            <CardCvcElement />
          </label>
          <Button type="submit" disabled={ !stripe } > Pagar </Button>
        </Form>
      </Col>
  );
}
 
export default CheckoutForm;

但是这些元素根本不显示，只有标签和按钮。我在这里想念什么？如 Stripe 文档中所示，它完全被复制。我可以在这里使用一些帮助，谢谢。

【问题讨论】：

标签： reactjs stripe-payments

【解决方案1】：

我遇到了同样的问题。我发现当我们在封闭标签上应用display:flex CSS 规则时，卡片字段会消失。

适合我的解决方案：将width:100%; 应用于.StripeElement CSS 类（该类带有卡片字段）。在example 他们这样做了。

【讨论】：

【解决方案2】：

我也遇到了这个问题。我通过将可发布密钥直接放入加载条带函数中解决了这个问题。像这样：

const stripePromise = loadStripe('你的可发布密钥')

【讨论】：

您之前使用过哪种方法（那一种不起作用）？ OP 声称密切关注Stripe documentation。在那里你可以看到这个 sn-p const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx' );，我猜这也是 OP 所做的。