Слушатель событий для window.stripe - PullRequest
Новая
       6

Слушатель событий для window.stripe

0 голосов
/ 27 ноября 2018

У меня есть интеграция Stripe в веб-интерфейсе React.Мой платежный компонент пытается запустить… 

componentDidLoad() {
  if ( window.hasOwnProperty('Stripe') ) {
    this.setState({stripe: window.stripe(config.stripeKey)})
  }
}

Этот случайный сбой, так как иногда приложение React загружается и загружает компонент до появления window.stripe.В настоящее время я решаю эту проблему с помощью ... 

componentDidLoad() {
  this.watchStripe = setInterval( () => {
    if (!props.stripe && isBrowser && window.Stripe) {
      this.setState({stripe: window.stripe(config.stripeKey)})
      clearInterval(this.watchStripe)
    }
  }, 100)
}

Есть ли более элегантное решение, которое не требует интервального таймера?

1 Ответ

0 голосов
/ 27 ноября 2018

Если вы читаете раздел Расширенные интеграции , они предлагают сделать 

componentDidMount() {
    if (window.Stripe) {
      this.setState({stripe: window.Stripe('pk_test_12345')});
    } else {
      document.querySelector('#stripe-js').addEventListener('load', () => {
        // Create Stripe instance once Stripe.js loads
        this.setState({stripe: window.Stripe('pk_test_12345')});
      });
    }
  }

. Это добавляет прослушиватель событий для события load в элементе script, который загружает Stripe и устанавливаетсостояние, когда оно доступно (, поэтому не требуется непрерывный опрос с setInterval, setTimeout )

...