Запросы диапазонов стран полосы в элементах полосы реакции - PullRequest
Новая
       14

Запросы диапазонов стран полосы в элементах полосы реакции

0 голосов
/ 27 июня 2019

Я вижу запрос к https://js.stripe.com/v3/fingerprinted/data/countryRanges-4321some11hash1234.json в элементах stripe-реагировать.

Я нигде не могу найти данные, но компонент <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>
    )
  );
};

1 Ответ

0 голосов
/ 27 июня 2019

Благодаря @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>
  );
};
...