[Vuejs]-Laravel vue stripe: how to pass client_secret PaymentIntent from clientside to serverside?

by

0👍

I recently had to set this up in my platform and here is how I did it. I created a controller called:

PaymentIntentController.php

Stripe::setApiKey(env('STRIPE_SECRET'));

$payment_intent = PaymentIntent::create([
  'payment_method_types' => ['card'],
  'amount' => $request->invoice['total'] * 100,
  'currency' => $this->currency($request),
  'receipt_email' => $request->invoice['clients_email']
], 
[
  'stripe_account' => $request->user['stripe_user_id']
]);

return $payment_intent;

On the client-side, you need to have an Axios request hit this controller so you can get the payment_intent.
Like this:

loadPaymentIntent () {
    axios.post('/api/stripe/connect_payment_intent', {'invoice': this.invoice, 'user': this.user}).then((response) => {
      this.paymentIntent = response.data
    })
},

I have my payment intent setup to load when a checkout form is displayed. Then when the form is submitted we have access to the payment_intent which we can use in the confirmCardPayment method like such:

submit () {
      let self = this
      self.isLoading = true
      self.stripe.confirmCardPayment(self.paymentIntent.client_secret, {
        return_url: self.returnUrl + `/clients/${self.invoice.client_id}/invoices/${self.invoice.id}`,
        receipt_email: self.invoice.clients_email,
        payment_method: {
          card: self.card,
          billing_details: {
            name: self.formData.name,
          }
        }
      }).then(function(result) {
        if (result.error) {
          self.isLoading = false
          self.cardError.status = true
          self.cardError.message = result.error.message

          setTimeout(() => {
            self.cardError = {}
          }, 3000)
        } else {
          if (result.paymentIntent.status === 'succeeded') {
            self.handleInvoice(result.paymentIntent)
            self.closeModal()

            setTimeout(() => {
              location.href = self.returnUrl + `/clients/${self.invoice.client_id}/invoices/${self.invoice.id}?success=true`
            }, 1000)
          }
        }
      });
    },

Leave a comment