fix: Add country compatibility with BNPL Affirm at the form level

src/payment/PaymentPage.jsx

@@ -118,7 +118,7 @@ class PaymentPage extends React.Component {
     }
 
     // If this is a redirect from Stripe Dynamic Payment Methods, show loading icon until getPaymentStatus is done.
-    if (isPaymentRedirect && (paymentStatus !== 'requires_payment_method' || paymentStatus !== 'canceled')) {
+    if (isPaymentRedirect && paymentStatus === null) {
       return (
         <PageLoading
           srMessage={this.props.intl.formatMessage(messages['payment.loading.payment'])}

src/payment/checkout/payment-form/PaymentForm.messages.jsx

@@ -31,6 +31,11 @@ const messages = defineMessages({
     defaultMessage: 'We apologize for the inconvenience but for the time being we require ASCII characters in the name field. We are working on addressing this and appreciate your patience.',
     description: 'The form field feedback text for name format issue.',
   },
+  'payment.form.errors.dynamic_payment_methods_not_compatible.country': {
+    id: 'payment.form.errors.dynamic_payment_methods_not_compatible.country',
+    defaultMessage: 'Country not available with selected payment method',
+    description: 'Notifies the user their billing country is not compatible with the Dynamic Payment Method selected.',
+  },
 });
 
 export default messages;

src/payment/checkout/payment-form/StripePaymentForm.jsx

@@ -24,7 +24,10 @@ import MonthlyBillingNotification from '../../../subscription/checkout/monthly-b
 import { Secure3DModal } from '../../../subscription/secure-3d/secure-3d-modal/Secure3dModal';
 
 import {
-  getRequiredFields, validateRequiredFields, validateAsciiNames,
+  getRequiredFields,
+  validateRequiredFields,
+  validateAsciiNames,
+  validateCountryPaymentMethodCompatibility,
 } from './utils/form-validators';
 
 import { getPerformanceProperties, markPerformanceIfAble } from '../../performanceEventing';
@@ -117,6 +120,7 @@ const StripePaymentForm = ({
     const {
       firstName,
       lastName,
+      country,
     } = values;
 
     let stripeElementErrors = null;
@@ -134,6 +138,11 @@ const StripePaymentForm = ({
         firstName,
         lastName,
       ),
+      ...validateCountryPaymentMethodCompatibility(
+        isDynamicPaymentMethodsEnabled,
+        stripeSelectedPaymentMethod,
+        country,
+      ),
     };
 
     if (Object.keys(errors).length > 0 || stripeElementErrors) {

src/payment/checkout/payment-form/StripePaymentForm.test.jsx

@@ -23,7 +23,7 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
 jest.useFakeTimers('modern');
 
 const validateRequiredFieldsMock = jest.spyOn(formValidators, 'validateRequiredFields');
-
+const validateCountryPaymentMethodCompatibilityMock = jest.spyOn(formValidators, 'validateCountryPaymentMethodCompatibility');
 const mockStore = configureMockStore();
 
 configureI18n({
@@ -260,8 +260,10 @@ describe('<StripePaymentForm />', () => {
       const testData = [
         [
           { firstName: 'This field is required' },
+          { country: 'Country not available with selected payment method' },
           new SubmissionError({
             firstName: 'This field is required',
+            country: 'Country not available with selected payment method',
           }),
         ],
         [
@@ -272,6 +274,7 @@ describe('<StripePaymentForm />', () => {
 
       testData.forEach((testCaseData) => {
         validateRequiredFieldsMock.mockReturnValueOnce(testCaseData[0]);
+        validateCountryPaymentMethodCompatibilityMock.mockReturnValueOnce(testCaseData[0]);
         if (testCaseData[1]) {
           expect(() => fireEvent.click(screen.getByText('Place Order')));
           expect(submitStripePayment).not.toHaveBeenCalled();
@@ -294,4 +297,22 @@ describe('<StripePaymentForm />', () => {
       expect(formValidators.validateRequiredFields(values)).toEqual(expectedErrors);
     });
   });
+
+  describe('validateCountryPaymentMethodCompatibility', () => {
+    it('returns errors if country is not compatible with Dynamic Payment Method (BNPL Affirm)', () => {
+      const values = {
+        country: 'BR',
+      };
+      const expectedErrors = {
+        country: 'payment.form.errors.dynamic_payment_methods_not_compatible.country',
+      };
+      const isDynamicPaymentMethodsEnabled = true;
+      const stripeSelectedPaymentMethod = 'affirm';
+      expect(formValidators.validateCountryPaymentMethodCompatibility(
+        isDynamicPaymentMethodsEnabled,
+        stripeSelectedPaymentMethod,
+        values.country,
+      )).toEqual(expectedErrors);
+    });
+  });
 });

src/payment/checkout/payment-form/utils/form-validators.js

@@ -126,6 +126,26 @@ export function validateRequiredFields(values) {
   return errors;
 }
 
+export function validateCountryPaymentMethodCompatibility(
+  isDynamicPaymentMethodsEnabled,
+  stripeSelectedPaymentMethod,
+  selectedCountry,
+) {
+  const errors = {};
+
+  // Only adding country validation on the form level for BNPL Affirm.
+  // For Klarna, there is validation on the Stripe API level,
+  // which is handled with error code 'dynamic-payment-methods-country-not-compatible'
+  if (isDynamicPaymentMethodsEnabled && stripeSelectedPaymentMethod === 'affirm') {
+    const countryListCompatibleAffirm = ['CA', 'US'];
+    if (!countryListCompatibleAffirm.includes(selectedCountry)) {
+      errors.country = 'payment.form.errors.dynamic_payment_methods_not_compatible.country';
+    }
+  }
+
+  return errors;
+}
+
 export function validateCardDetails(cardExpirationMonth, cardExpirationYear) {
   const errors = {};