React Stripe 元素没有显示？

Question

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

\n

import React from \'react\';\n\n// stripe\nimport { loadStripe } from \'@stripe/stripe-js\';\nimport { Elements } from \'@stripe/react-stripe-js\';\n\n// components\nimport CheckoutForm from \'./CheckoutForm\';\n\n// stripe load\nconst stripePromise = loadStripe(...);\n\nconst StripeWrapper = () => {\n    return (  \n        <Elements stripe={ stripePromise } >\n            <CheckoutForm /> \n        </Elements>\n    );\n};\n \nexport default StripeWrapper;\n

\n

这只是一个 HOC，用于用 Elements 组件包装实际的 CheckoutForm，再次如 Stripe 文档中所述。以及实际的表单组件：

\n

const CheckoutForm = () => {\n\n  const stripe = useStripe();\n  const elements = useElements();\n\n  // dispatch\n  const dispatch = useDispatch();\n\n  const setStep = useCallback(\n    step => dispatch( setStepperAction(step) ),\n    [ dispatch ],\n  );\n\n  const handleSubmitPayment = async e => {\n    e.preventDefault();\n\n    if (!stripe || !elements) return;\n    \n    ...\n  };\n\n  return (  \n      <Col xs={12} className="bg-light px-1 my-2">\n        <Form inline className="mx-0 w-100 h-100"\n          onSubmit={ handleSubmitPayment }\n        >  \n          <label>\n            N\xc3\xbamero de tarjeta\n            <CardNumberElement />\n          </label>\n          <label>\n            Fecha de caducidad\n            <CardExpiryElement />\n          </label>\n          <label>\n            CVC\n            <CardCvcElement />\n          </label>\n          <Button type="submit" disabled={ !stripe } > Pagar </Button>\n        </Form>\n      </Col>\n  );\n}\n \nexport default CheckoutForm;\n

\n

但这些元素根本不显示，只显示标签和按钮。我在这里缺少什么？它完全按照 Stripe 文档中所示进行复制。我在这里需要一些帮助，谢谢。

\n

Answer 1

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

对我有用的解决方案：应用于width:100%;CSS.StripeElement类（该类带有卡片字段）。在这个例子中，他们这样做了。