Stripe-react-elements 中的条纹国家范围请求答案

【问题标题】：Stripe country ranges request in stripe-react-elementsStripe-react-elements 中的条纹国家范围请求
【发布时间】：2019-06-27 22:36:49
【问题描述】：

我看到一个请求 https://js.stripe.com/v3/fingerprinted/data/countryRanges-4321some11hash1234.json 在条带反应元素中。

我无法在任何地方找到数据，但 <CardElement /> 组件在显示任何内容之前等待调用加载。

为了让用户体验更好，我想在等待加载时显示加载微调器；所以我需要追踪数据。

有人能指出数据在哪里吗？

我的组件看起来像

const PaymentDetails = () => {
  const stripe = window.Stripe("pk_test_123abc");
  return (
    <StripeProvider stripe={stripe}>
      <Elements>
        <InjectedCardDetail stripe={stripe} />
      </Elements>
    </StripeProvider>
  );
};

const CardDetail = ({ stripe }) => {
  const [{ token }, setState] = React.useState({ token: null });
  const submit = () => {
    stripe.createToken({ name: "Name" }).then(({ token }) => {
      setState({ token });
    });
  };
  return (
    !token && (
      <div>
        <label htmlFor="cardnumber">
          <div>
            <p>Please provide your card details.</p>

            {/* This is where I'd like to optionally render
            countryRanges ? <MyLoadingSpinner /> : ...
            assuming that's the thing to do here */}

            <CardElement style={{ base: { fontSize: "20px" } }} />
          </div>
        </label>
        <button onClick={submit}>Save Card</button>
      </div>
    )
  );
};

【问题讨论】：

您可能想研究使用element.on('ready') 函数：stripe.com/docs/stripe-js/reference#element-on 您可以先显示您的微调器，然后在“就绪”回调发生时将其隐藏。
做到了，你就是救命稻草。

标签： javascript reactjs stripe-payments

【解决方案1】：

感谢@PaulAsjes，我设法拼凑出一个不错的解决方案。

最终版本如下所示：适合任何好奇的人。

const CardDetail = ({ stripe }) => {
  /* new state, ready */
  const [{ ready, token }, setState] = React.useState({
    ready: false,
  });

  const submit = () => {
    stripe.createToken({ name: "Name" }).then(({ token }) => {
      setState({ token });
    });
  };
  /* I added this */
  const onReady = () => setState({ error, ready: true });

  return (
    <div>
      <label>
        <p>Please provide your card details.</p>
        {/* this shows/hides my spinner */}
        {!ready && <MyLoadingSpinner size="small" />}
        {/* and listen here ↓ */}
        <CardElement onReady={onReady} style={{ base: { fontSize: "20px" } }} />
      </label>
      <button onClick={submit}>
        Save Card
      </button>
    </div>
  );
};

【讨论】：