search

vuestorefront-community / vendure

Vue Storefront 2 integration for Vendure
https://docs.vuestorefront.io/vendure/
MIT License
72 stars 51 forks source link

[Docs]: Payment gateway with Stripe #116

Closed Baroshem closed 2 years ago

Baroshem commented 2 years ago

How the project can be improved?

Similarly to CMS example with Storyblok, it would be beneficial to have an example of Payment Gateway usage with Vue Storefront & Vendure based on Stripe implementation

What are the acceptance criteria?

Additional information

No response

Code of Conduct

Baroshem commented 2 years ago

In this case an Adyen integration can also be used to show how it could be done

michaelbromley commented 2 years ago

Would this not need a corresponding integration on the back end in Vendure? In the next Vendure minor (1.4) I am planning to publish some official payment integrations. First will be Braintree and Mollie and possibly Stripe and Paypal.

Baroshem commented 2 years ago

@michaelbromley

Yes, for full integration a plugin in Vendure will be needed as well, but the aim of this task is to have the integration on the frontend (Vue Storefront) part. Similarly to how it was done with Storyblok integration. For now, for real case scenarios users would have to develop a full solution on their own, but we provide them tools that will help with a certain part of the payment integration.

rjdmacedo commented 2 years ago

Hey team. I can probably help on this ticket :)

Baroshem commented 2 years ago

@rjdmacedo Assigned.

How I see this is to make it something similar to how I have implemented Storyblok CMS support for Vendure. Instead of providing it as a part of VSF&Vendure integration, I have added a new branch in the generated Vendure template called storyblok integration where I have implemented the support for that. I would see something similar here as it will also be another integration.

https://github.com/vuestorefront-community/template-vendure/tree/feat/storyblok-integration

Maybe this would help:

If you have any questions, do not hesitate to contact me :)

michaelbromley commented 2 years ago

If you need any details about the upcoming Stripe API on the Vendure side, let me know. Hopefully it will be public soon in the Vendure repo anyway, but in the mean time just ask.

rjdmacedo commented 2 years ago

@michaelbromley can you attach the Stripe API coming from Vendure?

michaelbromley commented 2 years ago

@rjdmacedo I've pinged @vrosa who is working on the Vendure side and can provide some details. He's in Australia so communication is very async ;)

vrosa commented 2 years ago

Hey guys, hopefully the plugin will be ready by the weekend but here is an overview of how it will work:

macrozone commented 2 years ago

Hey guys, hopefully the plugin will be ready by the weekend but here is an overview of how it will work:

  • It follows the custom payment flow, where the payment intent is created on the server and confirmation is done on the client-side.
  • The Storefront has to make an additional call to the Vendure Shop API once the user lands on the payment page (very last step of the checkout process): createStripePaymentIntent, which takes no parameters and returns the client secret that is used to instantiate the Payment Element.
  • Stripe then eventually sends a payment_intent.succeeded event to a configured webhook, which takes care of transitioning the order state to ArrangingPayment and calling addPaymentToOrder. That is, the Storefront doesn't need to worry about those operations.

hey @vrosa we try to add stripe payment to vue-storefront with vendure as backend.

In the second step, you have to call createStripePaymentIntent, but this always returns null if i call this through graphql. Do you have any idea why?

vrosa commented 2 years ago

@macrozone You need to have an active order in the current session. Do you get a non-null response if you call the activeOrder API endpoint in the same step?

macrozone commented 2 years ago

@macrozone You need to have an active order in the current session. Do you get a non-null response if you call the activeOrder API endpoint in the same step?

hey, we got this solved in the meantime. the vue storefront routes api calls through its own api/middleware layer and you have to extend it to include createStripePaymentIntent. First attemp was to modify the vendure integration: https://github.com/vuestorefront-community/vendure/pull/192 because i did initially not find the right documentation.

vrosa commented 2 years ago

@macrozone You need to have an active order in the current session. Do you get a non-null response if you call the activeOrder API endpoint in the same step?

hey, we got this solved in the meantime. the vue storefront routes api calls through its own api/middleware layer and you have to extend it to include createStripePaymentIntent. First attemp was to modify the vendure integration: #192 because i did initially not find the right documentation.

Cool, good to know you get it sorted.

Baroshem commented 2 years ago

@macrozone

Could you please create similar PR but in the template repository?

If you need any help, please let me know. I will do my best to help make this functionality into the template :)

Baroshem commented 2 years ago

Will be released in 1.3.0