Измените кнопку оплаты Stripe на изображение в Reactjs

Question

Я внедряю Платеж с полосой в свое приложение и хочу использовать изображение, чтобы вызвать полосу «Оплатить картой».Я пытался скрыть, но я не знаю, чтобы вызвать его в реакции, используя изображение.Любые руководители на этом будут благодарны

Answer 1

Это выглядит очень похоже на вопрос: Форма для вставки в полоску: Изменить текст местозаполнения Zipcode?

Для меня это звучит так, как будто вы используете проверку полосы.Stripe checkout - встраиваемая кнопка оплаты.Из-за этого очень ограничено то, что вы можете изменить.

Пожалуйста, смотрите документацию в полосе, чтобы увидеть, какие параметры можно изменить: https://stripe.com/docs/checkout#integration-custom

Answer 2

В React нам нужно использовать обработчики событий для обработки таких вещей, как события щелчка.Например, вам нужно установить обработчик onClick для вашего изображения.

...

handleClick = event => {
  this.setState({
    hideButton: !hideButton
  })
}

render() {
  return (
    <div>

      <img 
        src="example.com"
        alt="example of an example"
        onClick={this.handleClick}
      />

      <StripeButton 
        style={ hideButton ? {visibility:'hidden'} : {visibility:'visible'} }
      />

    </div>
  )
}

...

с использованием this.setState({hideButton: !hideButton}) кнопка будет переключаться при каждом нажатии пользователем на изображение.Если вы не хотите этого, замените его на: this.setState({hideButton: false}).