Блог

Главная - Вопросы по программированию - Удаление кнопки Stripe Checkout в Reactjs

Удаление кнопки Stripe Checkout в Reactjs

#reactjs #stripe-payments

#reactjs #stripe-платежи

Вопрос:

Я успешно реализовал кнопку оформления заказа в React Js. введите описание изображения здесь

Я хотел бы изменить эту кнопку на изображение введите описание изображения здесь

Пожалуйста, я хотел бы спросить, есть ли какой-либо способ обойти это, потому что эту кнопку Stripe checkout нелегко удалить.

Моя форма оформления заказа выглядит следующим образом 

 render() {
    const {amount, description} = this.props;

    return (
        <div>

            <StripeCheckout
              // name={name}
               description={description}
               amount={amount*100}
               token={this.onToken}
               stripeKey={STRIPE_PUBLISHABLE}
               name={'stripe-test'}
               image={apiConstants.API_IMAGES 'logos/logo.jpg'}
               label={"Cash In $" amount  ' using Cards' }
            />
            <div className="music-text-center">
                     <span className="ml-1 site-second-color">   
                         <Trans><h6> <b>{this.state.message}</b></h6></Trans>
                     </span>
             </div>
        </div>
    )
}

Комментарии:

1. Привет, @Nges Брайан, что вы хотите сделать для настройки Stripe Checkout, так это использовать пользовательскую интеграцию stripe.com/docs/checkout#integration-custom где кнопка управляется вами, и вы можете оформить ее так, как хотите, в том числе сделать ее кнопкой изображения.

Ответ №1:

вы можете добавить стиль к кнопке следующим образом:

 import StripeCheckout from "react-stripe-checkout";

class Payments extends Component {
  render() {
    return (
      <div>
        <StripeCheckout
          name="survey"
          description="survey credits"
          amount={500}
          token={token => this.props.handleToken(token)}
          stripeKey={process.env.REACT_APP_STRIPE_KEY}
        >
          <button className="btn">Add Credits</button>
        </StripeCheckout>
      </div>
    );
  }
}