Merge pull request #345 from ultimate-tester/stripe-paymentelement-mi…

…gration Stripe paymentelement migration
evershopcommerce · Feb 29, 2024 · bf105fc · bf105fc
2 parents 0680206 + 3dc6153
commit bf105fc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/packages/evershop/src/components/frontStore/stripe/checkout/CheckoutForm.jsx b/packages/evershop/src/components/frontStore/stripe/checkout/CheckoutForm.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
+import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
 import React, { useState, useEffect } from 'react';
-import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
 import { useQuery } from 'urql';
 import { useCheckout } from '@components/common/context/checkout';
 import './CheckoutForm.scss';
@@ -76,7 +76,7 @@ export default function CheckoutForm({ stripePublishableKey }) {
   const [clientSecret, setClientSecret] = useState('');
   const [showTestCard, setShowTestCard] = useState('success');
   const stripe = useStripe();
-  const elements = useElements();
+  const elms = useElements();
   const { cartId, orderId, orderPlaced, paymentMethods, checkoutSuccessUrl } =
     useCheckout();
 
@@ -88,9 +88,14 @@ export default function CheckoutForm({ stripePublishableKey }) {
     pause: orderPlaced === true
   });
 
-  useEffect(() => {
+  useEffect(async () => {
     // Create PaymentIntent as soon as the order is placed
     if (orderId) {
+      const {error: submitError} = await elms.submit();
+      if (submitError) {
+        return;
+      }
+
       window
         .fetch('/api/stripe/paymentIntents', {
           method: 'POST',
@@ -110,9 +115,10 @@ export default function CheckoutForm({ stripePublishableKey }) {
     const pay = async () => {
       const billingAddress =
         result.data.cart.billingAddress || result.data.cart.shippingAddress;
-      const payload = await stripe.confirmCardPayment(clientSecret, {
-        payment_method: {
-          card: elements.getElement(CardElement),
+      const {error} = await stripe.confirmPayment({
+        elements: elms,
+		clientSecret,
+        payment_method_data: {
           billing_details: {
             name: billingAddress.fullName,
             email: result.data.cart.customerEmail,
@@ -125,16 +131,14 @@ export default function CheckoutForm({ stripePublishableKey }) {
               city: billingAddress.city
             }
           }
-        }
+        },
+		confirmParams: {
+		  return_url: `${checkoutSuccessUrl}/${orderId}`,
+		},
       });
 
-      if (payload.error) {
+      if (error) {
         setError(`Payment failed ${payload.error.message}`);
-      } else {
-        setError(null);
-        setSucceeded(true);
-        // Redirect to checkout success page
-        window.location.href = `${checkoutSuccessUrl}/${orderId}`;
       }
     };
 
@@ -144,7 +148,7 @@ export default function CheckoutForm({ stripePublishableKey }) {
   }, [orderPlaced, clientSecret, result]);
 
   const handleChange = (event) => {
-    // Listen for changes in the CardElement
+    // Listen for changes in the PaymentElement
     // and display any errors as the customer types their card details
     setDisabled(event.empty);
     if (event.complete === true && !event.error) {
@@ -185,7 +189,7 @@ export default function CheckoutForm({ stripePublishableKey }) {
             testFailure={testFailure}
           />
         )}
-        <CardElement
+        <PaymentElement
           id="card-element"
           options={cardStyle}
           onChange={handleChange}

diff --git a/packages/evershop/src/modules/stripe/api/createPaymentIntent/createPaymentIntent.js b/packages/evershop/src/modules/stripe/api/createPaymentIntent/createPaymentIntent.js
@@ -44,6 +44,9 @@ module.exports = async (request, response, delegate, next) => {
       metadata: {
         // eslint-disable-next-line camelcase
         orderId: order_id
+      },
+      automatic_payment_methods: {
+        enabled: true,
       }
     });
 

diff --git a/packages/evershop/src/modules/stripe/pages/frontStore/checkout/Stripe.jsx b/packages/evershop/src/modules/stripe/pages/frontStore/checkout/Stripe.jsx
@@ -18,10 +18,19 @@ const stripeLoader = (publishKey) => {
 };
 
 function StripeApp({ stripePublishableKey }) {
+  const options = {
+    mode: 'payment',
+    currency: 'eur',
+    amount: 1337,
+	fields: {
+		billingDetails: 'never',
+	}
+  };
+
   return (
     // eslint-disable-next-line react/jsx-filename-extension
     <div className="App">
-      <Elements stripe={stripeLoader(stripePublishableKey)}>
+      <Elements stripe={stripeLoader(stripePublishableKey)} options={options}>
         <CheckoutForm stripePublishableKey={stripePublishableKey} />
       </Elements>
     </div>