stripe payment using React

  api, laravel, php, reactjs, stripe-payments

i am using react for front end and i want make a simple payment form
what printed on console is the response I get when clicking on the pay button

enter image description here

this is the form i build using strip element and i give me the instance for the payment methode, this is my first time working with stripe

and this is the function responsable for handling this form

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

i’ve seen some articles talking about fixing an endpoint in server side for this but I did not understand very well can someone explain to me what i should do next ?

I am using laravel with the cachier package but it seems i am repeating the same stuff in the docs it does not talk on how to work with api

Source: Laravel

Leave a Reply