Update to Stripe V3

Question

Update to Stripe V3

jofftiquez opened this issue 5 years ago · 58 comments

Update to Stripe V3

Answer 1 · 2019-07-25T01:13:29.000Z

Seems like using V3 will completely do away with this component loading as a modal.

An alternative would be to rebuild the same functionality using Stripe Elements instead.

It's unclear as to how long Stripe will support Checkout API V2 but it would probably make sense to create a new development branch called v2.x of vue-stripe-checkout if Stripe Elements is going to be used. Until then the existing component can still be used with Checkout API V2.

Answer 2 · 2019-07-25T07:09:45.000Z

@buildscientist thank you for your input.

Answer 3 · 2019-08-15T04:26:46.000Z

Might be nice to put a note on the README for the time being saying that it is based on V2 which is legacy.

I'm super grateful that you created this. I wish it could have worked for me. That said, I just spent like 6 hours implementing this into my flow only to find out it is legacy and should not be used.

But in the meantime, the stripe docu page you reference for the variables has a huge LEGACY warning at the top. Funny that since you make life easier by linking to the section of the page with the options, we actually miss the huge warning at the top of their page.

Anyway, just trying to save time for future developers arriving here.

Answer 4 · 2019-08-15T08:55:37.000Z

@zeusstl I'm so sorry about that. Thank you for your feedback. I will definitely add that in the docs. The plan to migrate this to V3 is still on going. Sorry for the inconvenience.

Answer 5 · 2019-08-16T19:25:33.000Z

Dev branch for V3 now available here. I just haven't pushed anything yet, I'm still experimenting on the best approach.

Answer 6 · 2019-08-21T19:50:09.000Z

Hello all! If you don't mind, please try version 3 here.

All kinds of feedback would be very much appreciated and it will also help me improve the plugin faster.

Answer 7 · 2019-08-22T01:58:46.000Z

Hi the test version works but only triggers v3 checkout without feeding any data such as description, currency or amount like the previous version? It loads the data from stripe dashboard by the sku?

i think for getting back the features it will need to be based on stripe elements + payment intents

are you planning to go on this direction or how will the project proceed?

Answer 8 · 2019-08-22T02:43:03.000Z

@rootext32 thank you for your feedback. You are right, this version only triggers the checkout version, the data for checkout should be first created in the Stripe dashboard.

To be honest I haven't check what Stripe Checkout V3 has to offer yet. This feature is by far the quickest to implement. So far it will serve it's purpose.

Regarding with the direction of this version, I want to make whatever is best for the users. For the next release, maybe I will add more options for the checkout.

Answer 9 · 2019-08-22T02:44:08.000Z

It loads the data from stripe dashboard by the sku?

You are correct @rootext32 it's based here.

Answer 10 · 2019-08-22T02:59:55.000Z

thanks got it. as i expected. i am working since several days on a solution to pass currency+description+amount to checkout but not an easy task. the migration guide on stripe gives some hints that passing those details without using sku from dashboard might be possible.

I'm not an expert coder so I was thinking to give this task to upwork. if you plan to realize a solution until the SCA deadline (sept 14) in europe I'm highly motivated to send you a good bounty reward :-))

Answer 11 · 2019-08-22T03:01:10.000Z

@rootext32 Just checked this https://stripe.com/docs/stripe-js/reference#stripejs-reference

I think I will eventually do every available features of Stripe.js. I just have to figure out what to prioritize. If you have anything in mind you can tell me.

Answer 12 · 2019-08-22T03:01:52.000Z

I'm not an expert coder so I was thinking to give this task to upwork. if you plan to realize a solution until the SCA deadline (sept 14) in europe I'm highly motivated to send you a good bounty reward :-))

I will not say to that. 😸 I'll see what I can do.

Answer 13 · 2019-08-22T03:12:09.000Z

that's somekind of good news :-) i think main selling point of your code was that amount + description was flexible to enter. I saw a lot of "professional coders" from india using this code on websites to realize an invoice payment terminal. looking up their codes is how i got here lol.

I think biggest issue is that SCA required payment intents api. I tried to modify my existing terminal which uses stripe-php but no luck so far: https://github.com/wlrs/stripe-terminal

Answer 14 · 2019-08-22T03:25:28.000Z

@rootext32 Noted.

What exactly do SCA requires? Can you point me to an example if possible?

Answer 15 · 2019-08-22T04:34:59.000Z

Migration Guide. Step 3 mentions requirements: https://stripe.com/docs/strong-customer-authentication/migration
Migration from eg. Legacy...some interesting details if you press on "...follow this guide": https://stripe.com/docs/payments/payment-intents/migration#legacy-checkout

Test sample from stripe: https://stripe-payments-demo.appspot.com/
Card # triggers SCA: 4000002760003184

Answer 16 · 2019-08-22T04:46:09.000Z

Thanks @rootext32 will check on these.

Answer 17 · 2019-08-27T09:00:12.000Z

Hi @jofftiquez in line with what @rootext32, I would also love to have this done before the SCA deadline, the 14th of September, and would gladly participate in that reward :)

Cheers!

Answer 18 · 2019-08-28T03:44:52.000Z

@gadutime Sweet! A new house and card would be nice. Kidding. I'm planning to work on this coming weekend, I'm positive that I can delver the required features.

Just to confirm, can you guys give me a list of what you need for the SCA deadline? I will expedite the development. Thanks.

Answer 19 · 2019-08-28T10:27:29.000Z

@jofftiquez new house sounds just about right :)

As for what is needed, as far as I can see on Stripe's documentation, either by updating to their new checkout (https://stripe.com/docs/payments/checkout) or by migrating to to their Payment Intents API (https://stripe.com/docs/payments/payment-intents/migration) we should be covered since they already implement the SCA requirements.

Cheers!

Answer 20 · 2019-08-28T10:42:59.000Z

Thanks @gadutime! I will try to release a full working checkout based on these information. Will keep you guys updated here. :)

Answer 21 · 2019-08-29T17:36:14.000Z

Hello after checking the references you sent it seems 3D secure is now enabled in this current version. You can test by using this 4000002760003184 card. Try here.

Will now move on to migrating other stuff.

Answer 22 · 2019-08-29T18:48:32.000Z

Update the component, added the following:

new options
rollup build
start with payment intents integration

Answer 23 · 2019-08-29T18:54:44.000Z

@rootext32 @gadutime As per checking the SCA sections in Stripe docs, I already covered the 1 thing, using 3D secure. And if im not mistaken, the payment intents API adjustments should be done in the server side and is out of scope of this plugin.

The beta.8 update now also supports these flows (both client only and client & server).

Please let me know if these solves your problems

Answer 24 · 2019-08-31T16:33:19.000Z

yes, by using checkout itself there is no way to pass the previous options such as description and amount to stripe. it's now handled by stripe SKU. due to this payment intents api is required

Answer 25 · 2019-08-31T17:14:55.000Z

Hello @rootext32 @rootext32 Kindly check this new version

I added the functionality to add these options to the stripe elements.

You can now create token and charge object and send it to the server.

Demo available here. Please let me know what you think.

Answer 26 · 2019-09-02T16:07:26.000Z

May I hear your feedback guys? Otherwise I will merge this to master soon.

@rootext32 @gadutime @zeusstl @buildscientist

Answer 27 · 2019-09-02T23:40:09.000Z

will look into this...any idea how to insert an amount and description field to stripe elements?

Answer 28 · 2019-09-02T23:57:30.000Z

@jofftiquez
Thank you for your efforts.

Looks good but I will not be using this as Checkout v2 is only being deprecated. Stripe has not published a date for when Checkout v2 will no longer be supported. I don't need SCA support either.

That said I still think the same functionality (payment via modal popup) should be rebuilt using Stripe Elements.

Answer 29 · 2019-09-03T12:47:34.000Z

will look into this...any idea how to insert an amount and description field to stripe elements?

You will have to create a separate field for the amount and description, after creating the token using card-elements, you will send the amount, description, and token to you server to create a charge.

Based on my research, I don't see any way to add amount or description using Stripe Elements.

Thank you @rootext32 any feedback will be useful.

Answer 30 · 2019-09-03T12:50:19.000Z

@buildscientist

Looks good but I will not be using this as Checkout v2 is only being deprecated. Stripe has not published a date for when Checkout v2 will no longer be supported. I don't need SCA support either.

Noted on this.

That said I still think the same functionality (payment via modal popup) should be rebuilt using Stripe Elements.

I don't see any reason to support this feature anymore since v2 will be deprecated anyways. But if a considerable amount of users should request for it, let's see what we can do.

Thanks for the feedback.

Answer 31 · 2019-09-04T06:44:26.000Z

@buildscientist

Looks good but I will not be using this as Checkout v2 is only being deprecated. Stripe has not published a date for when Checkout v2 will no longer be supported. I don't need SCA support either.

Noted on this.

That said I still think the same functionality (payment via modal popup) should be rebuilt using Stripe Elements.

I don't see any reason to support this feature anymore since v2 will be deprecated anyways. But if a considerable amount of users should request for it, let's see what we can do.

Thanks for the feedback.

Hi, for me the payment via modal popup was one of the reasons I was using this module. If you need help with the styling I could lend a hand in that.

Answer 32 · 2019-09-04T07:18:01.000Z

Thanks @Jesus82. Appreciated.

Answer 33 · 2019-09-04T07:19:08.000Z

FYI all. I will be closing this once I added the capability to pass style props to the Stripe Elements components.

Answer 34 · 2019-09-12T18:11:21.000Z

Hi @jofftiquez! Thanks for working on this and sorry, I've been travelling a lot lately and have not been able to follow up much on this.

I'd say merge it, as far as I can see it looks good on the dev branch and your public demo now that you included the possibility to add the amount and description, then I will put it on my integration environment to complete the final checks and let you know.

Thanks a mil!

Answer 35 · 2019-09-12T19:31:45.000Z

@jofftiquez I have a question, will vue-stripe-checkout drop the modal in V3? or will just change the logic beind? Because, one of the main reasons, and most important, was because of the modal, and now, with the SCA, I need to update it. And I would just prefer to have it in the modal and not as in the demo if possible.

Answer 36 · 2019-09-13T03:18:29.000Z

@gadutime thanks for the feedback! Will merge this soon.

Answer 37 · 2019-09-13T03:19:47.000Z

@SrPatinhas If the modal is still available in v3 I will implement it for you. If not, you will have to use the old version. But if you're concerned with SCA, I will try to make a workaround. Please let me know.

Answer 38 · 2019-09-13T09:43:13.000Z

@jofftiquez thank you. Yes, as the website that I have this package implemented is based in Europe, I need to have the SCA. I saw this demo Modal and I think it would be a nice start if you start from scratch. But this implementation uses the stripe elements. If you need any help, or if it's already possible to implement V3 for production, then I will give it a try and try to encapsulate it in a modal myself.

But any help or feedback that I can give your, I'm glad to do it

Answer 39 · 2019-09-13T12:12:19.000Z

I will give it a try and try to encapsulate it in a modal myself

@SrPatinhas - since the deadline for SCA is already near, maybe you can just do that for now. I will do the implementation on my side as soon as possible so come the release of v3, you should be able to use it by then.

Answer 40 · 2019-09-13T17:12:18.000Z

Thanks for the effort you're putting into this. I'm getting a Can't resolve 'vue-runtime-helpers/dist/normalize-component.js in .../node_modules/vue-stripe-checkout/dist error when I try to compile my js. Any ideas?

Answer 41 · 2019-09-13T18:05:00.000Z

Ok, I fixed this by installing vue-runtume-helpers manually. I'm trying to get the elements checkout working but I'm now getting a Unknown custom element: <vue-stripe-elements> - did you register the component correctly?. I've registered the component with the following. Am I missing something?

// Vue Checkout
import VueStripeCheckout from 'vue-stripe-checkout';

Vue.use(VueStripeCheckout, {
    publishableKey: stripeKey
});

Answer 42 · 2019-09-14T03:17:13.000Z

Hello @AlexGodbehere are there any more errors other than this:

Unknown custom element: - did you register the component correctly?

Answer 43 · 2019-09-16T14:11:48.000Z

Unfortunately not. Do I need any other 3rd party packages?

Answer 44 · 2019-09-16T14:16:01.000Z

Hi @jofftiquez, I was checking something when testing this solution, perhaps you might know. With your previous code (using Stripe Charges), I could return from the modal to my vue component... But now it requires the "success_url" parameter, which doesn't work really well with vue, since to load any component we should be using router.push(COMPONENT).... Any idea how to get this sorted out?

Thanks a lot!

Answer 45 · 2019-09-16T14:29:45.000Z

If I try to use the <vue-stripe-checkout> code below, I get a Missing required prop: "publisableKey" error:

<vue-stripe-checkout
                ref="checkoutRef"
                :items="items"
                :successUrl="successUrl"
                :cancelUrl="cancelUrl"
        >
            <template slot="checkout-button">
                <button @click="checkout">Shutup and take my money!</button>
            </template>
        </vue-stripe-checkout>

Answer 46 · 2019-09-30T11:30:34.000Z

I am getting the same error as above. Any news on that?

Answer 47 · 2019-10-11T09:58:20.000Z

...I'm getting the same "Missing prop" issue! Any suggestion on how to solve this is much appreciated.

Answer 48 · 2019-10-11T10:10:15.000Z

You need to set publishableKey in your component either by using props or with the register in Vue.use.
Anyhow by now I stopped using this component and just added stripe as their tutorial says. I hope this component becomes more stable for this version so I can consider using it again.

Answer 49 · 2019-10-11T10:18:10.000Z

Thanks for the tip @fsc7 ...I have the Key in the Vue.use! However which tutorial are you referring to? ...could you please share the link so I can take a look at it.

Answer 50 · 2019-10-11T10:21:46.000Z

https://stripe.com/docs/payments/checkout/server

Answer 51 · 2019-10-12T04:49:44.000Z

Hello all, I'm really sorry I am really busy right now. Please understand. I will give time on this soon. Thanks.

Answer 52 · 2019-10-12T08:09:31.000Z

No need to apologize, you have already done a great job putting this together and making it available. It is very hard to keep up with everything. Unfortunately, I could not take a look too and I went to the easiest path. Thanks to you.

Answer 53 · 2019-10-18T10:54:11.000Z

Thanks for the tip @fsc7 ...I have the Key in the Vue.use! However which tutorial are you referring to? ...could you please share the link so I can take a look at it.

I also had that "Missing required prop: "publisableKey" error"

This is the correct code(atleast for me). It works.

<vue-stripe-checkout
                publishableKey="YOUR_PUBLISHABLE_KEY_HERE"
                ref="checkoutRef"
                :items="items"
                :successUrl="successUrl"
                :cancelUrl="cancelUrl"
        >
            <template slot="checkout-button">
                <button @click="checkout">Shutup and take my money!</button>
            </template>
        </vue-stripe-checkout>

Answer 54 · 2019-10-18T10:59:28.000Z

Thanks for the effort you're putting into this. I'm getting a Can't resolve 'vue-runtime-helpers/dist/normalize-component.js in .../node_modules/vue-stripe-checkout/dist error when I try to compile my js. Any ideas?

Edit package.json file ->

add these into devDependencies

"devDependencies": {
    ...
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-vue": "^5.0.1",
    ...
}

Then save it and do a npm install. This fixes it for me.

Answer 55 · 2019-10-18T19:00:30.000Z

Thanks for the effort you're putting into this. I'm getting a Can't resolve 'vue-runtime-helpers/dist/normalize-component.js in .../node_modules/vue-stripe-checkout/dist error when I try to compile my js. Any ideas?

Edit package.json file ->

add these into devDependencies
"devDependencies": {
    ...
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-vue": "^5.0.1",
    ...
}
Then save it and do a npm install. This fixes it for me.

Can anyone confirm that this is working? If so, I will add this. Thanks.

Answer 56 · 2019-10-18T19:01:44.000Z

@rootext32 @gadutime any updates? Did this help you with the SCA deadline? I wanna know. Thanks :).

Answer 57 · 2019-11-09T21:54:27.000Z

Thanks for the effort you're putting into this. I'm getting a Can't resolve 'vue-runtime-helpers/dist/normalize-component.js in .../node_modules/vue-stripe-checkout/dist error when I try to compile my js. Any ideas?

Edit package.json file ->
add these into devDependencies
"devDependencies": {
    ...
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-vue": "^5.0.1",
    ...
}
Then save it and do a npm install. This fixes it for me.
Can anyone confirm that this is working? If so, I will add this. Thanks.

I had this issue and the suggested fix (adding the devDependencies) worked for me.

Answer 58 · 2019-12-15T14:11:47.000Z

Hello all, refactor/v3 has been merged. Kindly check try and check if your issues still persist. If so, please create a new issue. Thanks.