stripe-checkout-test.plugin.ts 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. /* eslint-disable */
  2. import { Controller, Res, Get } from '@nestjs/common';
  3. import { PluginCommonModule, VendurePlugin } from '@vendure/core';
  4. import { Response } from 'express';
  5. import { clientSecret } from './stripe-dev-server';
  6. /**
  7. * This test controller returns the Stripe intent checkout page
  8. * with the client secret generated by the dev-server
  9. */
  10. @Controller()
  11. export class StripeTestCheckoutController {
  12. @Get('checkout')
  13. async webhook(@Res() res: Response): Promise<void> {
  14. res.send(`
  15. <head>
  16. <title>Checkout</title>
  17. <script src="https://js.stripe.com/v3/"></script>
  18. </head>
  19. <html>
  20. <form id="payment-form">
  21. <div id="payment-element">
  22. <!-- Elements will create form elements here -->
  23. </div>
  24. <button id="submit">Submit</button>
  25. <div id="error-message">
  26. <!-- Display error message to your customers here -->
  27. </div>
  28. </form>
  29. <script>
  30. // Set your publishable key: remember to change this to your live publishable key in production
  31. // See your keys here: https://dashboard.stripe.com/apikeys
  32. const stripe = Stripe('${process.env.STRIPE_PUBLISHABLE_KEY}');
  33. const options = {
  34. clientSecret: '${clientSecret}',
  35. // Fully customizable with appearance API.
  36. appearance: {/*...*/},
  37. };
  38. // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3
  39. const elements = stripe.elements(options);
  40. // Create and mount the Payment Element
  41. const paymentElement = elements.create('payment');
  42. paymentElement.mount('#payment-element');
  43. const form = document.getElementById('payment-form');
  44. form.addEventListener('submit', async (event) => {
  45. event.preventDefault();
  46. // const {error} = await stripe.confirmSetup({
  47. const {error} = await stripe.confirmPayment({
  48. //\`Elements\` instance that was used to create the Payment Element
  49. elements,
  50. confirmParams: {
  51. return_url: 'http://localhost:3050/checkout?success=true',
  52. }
  53. });
  54. if (error) {
  55. // This point will only be reached if there is an immediate error when
  56. // confirming the payment. Show error to your customer (for example, payment
  57. // details incomplete)
  58. const messageContainer = document.querySelector('#error-message');
  59. messageContainer.textContent = error.message;
  60. } else {
  61. // Your customer will be redirected to your \`return_url\`. For some payment
  62. // methods like iDEAL, your customer will be redirected to an intermediate
  63. // site first to authorize the payment, then redirected to the \`return_url\`.
  64. }
  65. });
  66. </script>
  67. </html>
  68. `);
  69. }
  70. }
  71. /**
  72. * Test plugin for serving the Stripe intent checkout page
  73. */
  74. @VendurePlugin({
  75. imports: [PluginCommonModule],
  76. controllers: [StripeTestCheckoutController],
  77. })
  78. export class StripeCheckoutTestPlugin {}