diff --git a/src/payment/checkout/Checkout.jsx b/src/payment/checkout/Checkout.jsx index e2a32163d..03c3ceec6 100644 --- a/src/payment/checkout/Checkout.jsx +++ b/src/payment/checkout/Checkout.jsx @@ -93,13 +93,13 @@ class Checkout extends React.Component { this.props.submitPayment({ method: 'stripe', ...formData }); }; - handleSubmitStripeButtonClick = () => { + handleSubmitStripeButtonClick = (stripeSelectedPaymentMethod) => { sendTrackEvent( 'edx.bi.ecommerce.basket.payment_selected', { type: 'click', category: 'checkout', - paymentMethod: 'Credit Card - Stripe', + paymentMethod: stripeSelectedPaymentMethod === 'affirm' ? 'Affirm - Stripe' : 'Credit Card - Stripe', checkoutType: 'client_side', stripeEnabled: this.props.enableStripePaymentProcessor, }, diff --git a/src/payment/checkout/payment-form/PlaceOrderButton.jsx b/src/payment/checkout/payment-form/PlaceOrderButton.jsx index fec4a883d..22215bac9 100644 --- a/src/payment/checkout/payment-form/PlaceOrderButton.jsx +++ b/src/payment/checkout/payment-form/PlaceOrderButton.jsx @@ -4,7 +4,7 @@ import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; import { StatefulButton } from '@openedx/paragon'; const PlaceOrderButton = ({ - showLoadingButton, onSubmitButtonClick, disabled, isProcessing, + showLoadingButton, onSubmitButtonClick, stripeSelectedPaymentMethod, disabled, isProcessing, }) => { let submitButtonState = 'default'; // istanbul ignore if @@ -26,7 +26,7 @@ const PlaceOrderButton = ({ size="lg" block state={submitButtonState} - onClick={onSubmitButtonClick} + onClick={() => onSubmitButtonClick(stripeSelectedPaymentMethod)} labels={{ default: ( { + // Check payment type before submitting since BNPL requires state/zip code and Afterpay requires a shipping address. + // This is also used for analytics on "Place Order" click event. + const [stripeSelectedPaymentMethod, setStripeSelectedPaymentMethod] = useState(null); const stripe = useStripe(); const elements = useElements(); const context = useContext(AppContext); @@ -54,9 +57,6 @@ const StripePaymentForm = ({ const [firstErrorId, setfirstErrorId] = useState(false); const [shouldFocusFirstError, setshouldFocusFirstError] = useState(false); - // Check payment type before submitting since BNPL requires state/zip code and Afterpay requires a shipping address - let stripePaymentMethodType; - const checkoutDetails = useSelector(paymentDataSelector); const { enableStripePaymentProcessor, @@ -148,13 +148,13 @@ const StripePaymentForm = ({ } onSubmitPayment({ - skus, elements, stripe, context, values, stripePaymentMethodType, + skus, elements, stripe, context, values, stripeSelectedPaymentMethod, }); }; const handleStripeElementOnChange = (event) => { if (event.value) { - stripePaymentMethodType = event.value.type; + setStripeSelectedPaymentMethod(event.value.type); } }; @@ -227,6 +227,7 @@ const StripePaymentForm = ({ ) : ( { global.location.href = href; }, // HACK: allow tests to mock setting location ) { @@ -36,7 +36,7 @@ export default async function checkout( } = values; let shippingAddress; - if (stripePaymentMethodType === 'afterpay_clearpay') { + if (stripeSelectedPaymentMethod === 'afterpay_clearpay') { shippingAddress = { address: { city,