Payment Element and Stripe Connect

[sebaqe]

I appologize in advance if this is a stupid question or it shouldn't be asked here,

but is this package able to create the "new" Payment Element that has all of the payment modes that are enable in the dashboard?

furthermore, does this work with Stripe Connect?

Thanks for your time and effort.

[softbeehive]

Hi @sebaqe 👋 No worries, before answering your questions, I'd like to explain why vue-stripe-elements was created in the first place.

stripe.js - is a javascript library from stripe to handle payments in browser, which is not designed with reactivity in mind. Let's say, if you need to update options of the card element, you need to call that update method manually.

vue-stripe-elements - it's an adapter, it takes stripe.js and makes it work with Vue Component Lifecycle. In plain language, when your vue component mount, unmount, update, etc. For example: when element options change, it will call necessary method of stripe.js automatically. It also allows you to use events like focus attached to vue component instance.

Now answering your questions:

• there is no universal payment element, the most common is card, which is a kind of lego made of card number, card cvv and other.
• I recommend NOT to use model on StripeElement component, because it's not just a plain input and v-model is essentially a syntax sugar:

  <ChildComponent v-model="pageTitle" />
  <!-- would be shorthand for: -->
  <ChildComponent :value="pageTitle" @input="pageTitle = $event" />

• Stripe Connect: I can't tell you for sure, because I haven't used it. According to stripe docs it can be used alongside with Stripe Payments, it's better to ask Stripe if there is place for stripe.js in your use-case

[sebaqe]

Thanks so much for your answer. I am still wrapping my head around vue, so your answer helped a lot.

I do have a disagreement, or maybe something i still don't understand. Stripe says it created this new payment element , which i don't know when it appeared as I haven't looked at their docs in 2 months, and i had never seen it before yesterday. https://stripe.com/docs/payments/payment-element . There is even a section that compares payment element with card element (if you look in the left side menu). In your documentation it says that your component will create all of the elements that are available in stripejs. Will it create this new one as well without you modifying anything?

Please let me know what you think about this payment element. If it were to work, i'd prefer to use your library vs the "official" one which seems to be lagging. I will then follow up with what i find in testing this with a connect implementation.

On Tue, Dec 14, 2021, 6:21 AM Oleksandr Bystrikov @.*** wrote:

Hi @sebaqe https://github.com/sebaqe 👋 No worries, before answering your questions, I'd like to explain why vue-stripe-elements was created in the first place.

stripe.js - is a javascript library from stripe to handle payments in browser, which is not designed with reactivity in mind. Let's say, if you need to update options of the card element, you need to call that update method manually.

vue-stripe-elements - it's an adapter, it takes stripe.js and makes it work with Vue Component Lifecycle. In plain language, when your vue component mount, unmount, update, etc. For example: when element options change, it will call necessary method of stripe.js automatically. It also allows you to use events like focus attached to vue component instance.

Now answering your questions:

• there is no universal payment element, the most common is card, which is a kind of lego made of card number, card cvv and other.
• I recommend NOT to use model on StripeElement component, because it's not just a plain input and v-model is essentially a syntax sugar:

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

• Stripe Connect: I can't tell you for sure, because I haven't used it. According to stripe docs it can be used alongside with Stripe Payments, it's better to ask Stripe if there is place for stripe.js in your use-case

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ectoflow/vue-stripe-elements/issues/128#issuecomment-993486592, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKAS7A37V56H24GZ4ENEAVLUQ4ZERANCNFSM5J72XLIA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[softbeehive]

Stripe.js is pretty stable, there is no magic in vue-stripe-elements, it just makes it easier to use stripe.js with vue. Stripe API docs is the source of truth. All I can recommend: try to figure out design of your payment flow, what's on frontend and what's on backend.

Stripe Elements, aka Stripe.js is the tool to build advanced UI forms for Stripe. That's it. There is a simpler alternative if you just need a checkout form: Stripe Checkout. Unfortunately, I can't provide any further support

[Tragio]

Hello @softbeehive 👋

Thank you for the wonderful work for the past 5 years.

This is my first time working with Stripe and therefore with your plugin. I have it working, but from what I understood the example on your documentation is for Card Element.

I need Payment Element so I can accept other Payment Methods. On Stripe documentation, I found this migration from Card Element to Payment Element: https://stripe.com/docs/payments/payment-element/migration how can we do this with your plugin?

Could you give us some indication or even better to update your documentation with it? 😄

Thank you very much and have a wonderful 🎄

[softbeehive]

Hi @Tragio, Payment Element is a new type, but good news is that you can pass any element type:

<StripeElements
  :stripe-key="stripeKey"
  :elements-options="elementsOptions"
  #default="{ elements }"
  ref="elms"
>
  <StripeElement
    type="payment"
    // ... other props
  />
</StripeElements>

According to Stripe docs, clientSecret has to be passed to elements as options:

elementsOptions: {
  clientSecret: your_secret // you get it by creating Payment Intent, important ON SERVER
},

I briefly tested type: "payment" it using test keys, it works.

So the idea of Payment Intent is to define payment methods you want to accept in Stripe Dashboard or on your server. On the client you drop a single element. It simplifies frontend integration, which is pretty cool in my opinion.

I'll consider updating docs and publishing some examples

[Tragio]

@softbeehive thank you very much. I successfully have done it but now I'm stuck at this part https://stripe.com/docs/payments/payment-element/migration#one-time-update-method

Upper code is before, and below is after

What is the best way to do the bottom way? 🤔

Thank you very much once again. 🙏

[tarishekola]

Hello Tragio,

first of all I would like to thank you for opening this thread as it helped me progress with my porting from card elements to payment element.

Can you post a snipped of your code here and I can guide you on what to do. Have you been able to get your client_id form the back end?