php - 使用 React 进行条带支付

Question

我正在为前端使用反应，我想制作一个简单的付款表格，打印在控制台上的是我点击付款按钮时得到的响应

这是我使用条形元素构建的表格，我给了我付款方法的实例，这是我第一次使用条形

这是负责处理此表单的功能

const stripe = useStripe()
  const elements = useElements()
  const [, setToast] = useToasts()
  const { logged, currentUser } = useAuth()

  const handleCardDetailsChange = (event) => {
    event.error ? setCheckoutError(event.error.message) : setCheckoutError()
  }

  const handleFormSubmit = async (e) => {
    e.preventDefault()
    setProcessingTo(true)

    if (!stripe || !elements) {
      setProcessingTo(false)
      return
    }
    const billingDetails = {
      name: e.target.name.value,
      email: e.target.email.value,
      phone: numberStart,
      address: {
        city: e.target.city.value,
        line1: e.target.line1.value,
        line2: e.target.line2.value,
        country: country,
        postal_code: e.target.postal_code.value,
      },
    }
    const cardElement = elements.getElement(CardElement)
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: billingDetails,
    })
    if (error) {
      setCheckoutError(error.message)
      console.log('[error]', error)
      setProcessingTo(false)
    } else {
      console.log('[PaymentMethod]', paymentMethod)
      try {
        const { id } = paymentMethod

        logged
          ? await useApi
              .post('api/payment', {
                amount: price,
                id,
              })
              .then((response) => {
                console.log(response)
              })
              .then(() => setProcessingTo(false))
          : setToast({
              text: 'you need to be logged into your account',
              type: 'error',
            })
      } catch (err) {
        console.log('err')
        setProcessingTo(false)
      }
      setProcessingTo(false)
    }
  }

我看过一些关于在服务器端修复端点的文章，但我不太明白，有人可以向我解释下一步我应该做什么吗？

我正在将 laravel 与 cachier 包一起使用，但似乎我在文档中重复了相同的内容，它没有谈论如何使用 api

标签： phpreactjslaravelapistripe-payments