Блог

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

Соответствующий код ниже:

С помощью Checkout (HOC):

 import React from "react"

const UpdatedComponent = (OriginalComponent) => {
    class NewComponent extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                count: 1 
            }
            this.handleChange = this.handleChange.bind(this)
        }


        increment = () => {
            this.setState(prevState => {
                return { count: prevState.count   1}
            })
        }

        decrease = () => {
            this.setState(prevState => {
                return { count: prevState.count - 1 }
            })
        }


        handleChange(event) {
            this.setState({
                count: parseInt(event.target.value)
            });
        }

        render() {
            return <OriginalComponent count={this.state.count} increment={this.increment} decrease={this.decrease} handleChange={this.handleChange} />
        }
    }
    return NewComponent
}

export default UpdatedComponent
  

Оформить покупку:

 import React, { useState } from "react"
import { loadStripe } from "@stripe/stripe-js"
import UpdatedComponent from "./withCheckout"

const buttonStyles = {
  fontSize: "13px",
  textAlign: "center",
  color: "#000",
  padding: "12px 60px",
  boxShadow: "2px 5px 10px rgba(0,0,0,.1)",
  backgroundColor: "rgb(255, 178, 56)",
  borderRadius: "6px",
  letterSpacing: "0.2ch",
  display: "block",
  margin: "1.5em auto 1.5em auto",

}

const buttonDisabledStyles = {
  opacity: "0.5",
  cursor: "not-allowed",
}

let stripePromise
const getStripe = () => {
  if (!stripePromise) {
      stripePromise = loadStripe("KEY_HERE")
  }
  return stripePromise
}

const Checkout = props => {

  const [loading, setLoading] = useState(false)

  const redirectToCheckout = async event => {
    event.preventDefault()
    setLoading(true)

    const stripe = await getStripe()
    const { error } = await stripe.redirectToCheckout({
      mode: "payment",
      lineItems: [{ price: "PRICE_ID_HERE", quantity: props.count }],
      successUrl: `http://localhost:8000/page-2/`,
      cancelUrl: `http://localhost:8000/`,
      shippingAddressCollection: {
        allowedCountries: ['PT'],
  }
    })

    if (error) {
      console.warn("Error:", error)
      setLoading(false)
    }
  }

  return (
    <button
      disabled={loading}
      style={
        loading ? { ...buttonStyles, ...buttonDisabledStyles } : buttonStyles
      }
      onClick={redirectToCheckout}
    >
          Comprar {props.count}
    </button>
  )
}

export default UpdatedComponent(Checkout)
  

Пример:
Смотрите это изображение

Когда я меняю ввод на 7, я ожидаю, что текст кнопки будет «Сопоставлять 7», и я ожидаю отправить количество: 7 в функции striperedirect. Я думаю, что проблема связана с тем, как устанавливаются реквизиты, поскольку мой счетчик работает хорошо, реквизиты были переданы как const {count} = this.props . Должен ли я добавить Counter.js тоже код?