Can you provide a full example code with Payment Elements with create a payment intent first (client secret ..)

[Dante690]

No description provided.

[softbeehive]

Hi,
Alright, let's take a look. Do you mean the type "payment" element with payment intent, right?

As a start point you can add type='payment' to:

vue-stripe-js/examples/CardOnly.vue

Line 10 in 92bb1c9

<StripeElement ref="card" :elements="elements" :options="cardOptions" />

[Dante690]

Also we need a full payment element guide for this.. like card example...thnks

[tanha1998]

await elms.value.instance.confirmCardPayment(clientSecret, { payment_method: { card: cardNumber } })

[softbeehive]

https://stripe.com/docs/payments/accept-a-payment?ui=elements

I'm gonna provide a full example, which requires stripe account and payment intent (server-side), but really tight on time right now

Basically, you need client_secret, it then passed as property of options to StripeElements. Then you'll be able to call confirmPayment on stripe instance.

[yashBhosale]

@softbeehive If you wanna assign this to me I can probably submit a PR with an example for using Payment Elements this weekend.

[softbeehive]

@yashBhosale you are welcome to submit a PR at any time

Here is some guidance:

1. Create PaymentType.vue in examples folder
2. Use Vue Composition API (preferably)
3. Test payment type element
4. Add Payment Type section to README.md before "Types"

[mattvb91]

does anyone have a working example with payment intent??

[nickbewley]

Folks this is a cool package but also really confusing. Can anyone help provide a full example of how one can submit a payment to stripe and redirect to another page afterwards?

@mattvb91 did you figure it out?

Thanks so much. Best, Newb

[softbeehive]

Payment intent requires server-side code that depends on the language of your choice. I can totally see the value of having comprehensive guide on how to do that. And I can see why people struggle with its complexity.

But I realize this is outside of scope of this package, which has a single goal: integrate stripe.js with vue component lifecycle. The reason I didn't make type="payment" the default is that it requires extra work. I suggest asking Stripe for the vue guide, they have resources and capacity to offer it.

Community projects like this receive little to no support and I'm not first to say this but this is an uncomfortable truth about open-source. If someone is willing to invest time + energy and make the guide centered around vue integration of the payment element, I'm happy to link it in readme. I hope it explains the situation.

[softbeehive]

Quick guide

To start with payment element

1. Grab clientSecret from the payment intent
2. Pass it to elements-options

<template>
<StripeElements
  ...
  :elements-options="elementsOptions"
>
  <StripeElement
    type="payment"
    ...
  />
</StripeElements>
<template />

const elementsOptions = ref({
  clientSecret: 'grab_it_from_payment_intent',
  // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
})

Screenshot