在Reactjs中删除Stripe Checkout按钮

时间:2019-03-17 10:31:54

标签: reactjs stripe-payments

我已经在React Js中成功实现了checkout按钮。 enter image description here

我想将此按钮更改为图片enter image description here

请问我周围是否有任何漏洞,因为此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 个答案:

答案 0 :(得分:0)

您可以像这样向按钮添加样式:

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>
    );
  }
}