Как я могу вызвать кнопку Paypal в форме веб-сайта? - PullRequest
Новая
       28

Как я могу вызвать кнопку Paypal в форме веб-сайта?

0 голосов
/ 21 мая 2019

Я делаю условие успешного выполнения, чтобы сохранить данные в базе данных, но проверка формы не работает или, другими словами, я могу произвести оплату, даже оставив форму пустой.

Я использую ReactJS и создаю форму для подписки пользователя, и я использую компонент React Button Paypal response-paypal-express-checkout для платежного шлюза. Я хочу, чтобы эта кнопка PayPal также была нажата после того, как я нажму кнопку "Отправить" в форме и проверка прошла успешно. 

...
<Form onSubmit={this.onSubmit}>
{
  (error) ? (
    <Alert color="danger" isOpen={visible}>{error}</Alert>
  ): (success) ? (
    <Alert color="success" isOpen={visible}>{success}</Alert>
  ): null
}
<FormGroup>
 <Input type="email" name="email" id="email" placeholder="Email Address" onChange={this.onChange} />
</FormGroup>
<FormGroup>
 <Input type="text" name="firstName" id="firstName" placeholder="Your First Name" onChange={this.onChange} />
</FormGroup>
<FormGroup>
 <Input type="text" name="lastName" id="lastName" placeholder="Your Last Name" onChange={this.onChange} />
</FormGroup>
<FormGroup>
 <Input type="text" name="companyName" id="companyName" placeholder="Company Name" onChange={this.onChange} />
</FormGroup>

<Button color="primary" type="submit" value="Submit">Subscribe</Button>

<PaypalExpressBtn env="sandbox" client={client} currency={'USD'} total={1.00} onError={this.onError.bind(this)} onSuccess={this.onSuccess.bind(this)} onCancel={this.onCancel.bind(this)} />
</Form>
...

send() {
    const { email, firstName, lastName, companyName, role } = this.state
      const data = { email, firstName, lastName, companyName, role }

      this.User.register(data).then(res => {
        if(res.success === false) {
          this.setState({
            visible: true,
            error: res.message
          }, () => {
            window.setTimeout(() => {
              this.setState({ visible: false })
            }, 2000)
          })
        } else {
          this.setState({
            visible: true,
            success: res.message
          }, () => {
            window.setTimeout(() => {
              this.setState({ visible: false })
              this.toggleAll()
            }, 4000)
          })
        }
      })
  }

  onSuccess = (payment) => {
    console.log("The payment was succeeded!", payment);
    if(payment.paid) {
      this.send()
    }
  }
...