tf-checkout-react 1.7.32-beta.0 → 1.7.32-beta.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.32-beta.0",
+  "version": "1.7.32-beta.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/billing-info-container/hooks/useStripePayment.ts

@@ -1,8 +1,16 @@
 import { FormikHelpers } from 'formik'
+import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 
 import { handlePaymentMiddleWare } from '../../paymentContainer/handlePayment'
 
+const SUCCESSFUL_INTENT_STATUSES = ['succeeded', 'processing', 'requires_capture']
+const PAYMENT_FAILED_MESSAGE =
+  'Your payment was not completed. Please try again or use another payment method.'
+const PAYMENT_RECEIVED_MESSAGE =
+  'Your payment was received and we are confirming your order. ' +
+  'Please check your email for your tickets before trying again.'
+
 interface PaymentData {
   attributes: any
   isFreeTickets: boolean
@@ -74,43 +82,70 @@ export const useStripePayment = ({
           billing_details: { phone: e164Phone },
         }
       }
-      const { error: confirmError } = await stripeRef.current.confirmPayment({
-        clientSecret:
-          paymentDataResponse.data.attributes.payment_method.stripe_client_secret,
-        elements: elementsRef.current,
-        confirmParams,
-        redirect: 'if_required',
-      })
+      let confirmResult
+      try {
+        confirmResult = await stripeRef.current.confirmPayment({
+          clientSecret:
+            paymentDataResponse.data.attributes.payment_method.stripe_client_secret,
+          elements: elementsRef.current,
+          confirmParams,
+          redirect: 'if_required',
+        })
+      } catch (e) {
+        // Stripe.js throws (instead of returning { error }) on integration errors
+        setError(_get(e, 'message') || PAYMENT_FAILED_MESSAGE)
+        return null
+      }
 
+      const { error: confirmError, paymentIntent } = confirmResult
       if (confirmError) {
         setError('' + confirmError?.message)
         return null
       }
+
+      // Asynchronous failures (e.g. MB WAY declined, expired or number not registered)
+      // resolve without `error`, so the PaymentIntent status must be checked
+      if (paymentIntent && !SUCCESSFUL_INTENT_STATUSES.includes(paymentIntent.status)) {
+        setError(
+          _get(paymentIntent, 'last_payment_error.message') || PAYMENT_FAILED_MESSAGE
+        )
+        return null
+      }
     }
 
     // Handle payment middleware for non-redirect payments
     let paymentResponse = null
-    await handlePaymentMiddleWare(
-      null,
-      {},
-      {
-        reviewData: attributes,
-        isFreeTickets,
-        paymentPlanIsAvailable: false,
-        showPaymentPlanSection: false,
-        handlePayment: (data: any) => {
-          paymentResponse = data
-        },
-        setPaymentIsLoading: _identity,
-        setError: _identity,
-        orderData: updatedOrderData,
-        eventId,
-        isBrowser,
-        onPaymentError: (error: any) => {
-          throw error
-        },
-      }
-    )
+    try {
+      await handlePaymentMiddleWare(
+        null,
+        {},
+        {
+          reviewData: attributes,
+          isFreeTickets,
+          paymentPlanIsAvailable: false,
+          showPaymentPlanSection: false,
+          handlePayment: (data: any) => {
+            paymentResponse = data
+          },
+          setPaymentIsLoading: _identity,
+          setError: (message: string | null) => {
+            if (message && isFreeTickets) setError(message)
+          },
+          orderData: updatedOrderData,
+          eventId,
+          isBrowser,
+          onPaymentError: (error: any) => {
+            throw error
+          },
+        }
+      )
+    } catch (e) {
+      if (isFreeTickets) throw e
+      // Stripe has already taken the payment and the webhook will still settle the order,
+      // so never invite a retry (double charge) whatever the backend error looks like
+      setError(PAYMENT_RECEIVED_MESSAGE)
+      return null
+    }
 
     return paymentResponse
   }

package/src/components/billing-info-container/index.tsx

@@ -796,6 +796,13 @@ const BillingInfoContainer = React.memo(
           if (!_isEmpty(holderDataCapture)) {
             holder.ticket_data_capture = holderDataCapture
           }
+
+          // on-checkout only skips required fields scoped to other ticket types when the
+          // holder carries its ticket type; without it every ticket field is required.
+          const holderTicketTypeId = holderTicketTypeIds[+holderIndex]
+          if (holderTicketTypeId) {
+            holder.ticket_type_id = holderTicketTypeId
+          }
         })
 
         // Collect add_on_data_capture for Add-on Custom Fields