feat(payment): INT-2051 added class for dinamic style formating on ch…

…eckout page
bigcommerce · Feb 26, 2020 · 01a6ed8 · 01a6ed8
1 parent d416c9f
commit 01a6ed8
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx b/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx
@@ -16,6 +16,7 @@ import { PaymentFormValues } from '../PaymentForm';
 import SignOutLink from './SignOutLink';
 
 export interface HostedWidgetPaymentMethodProps {
+    additionalContainerClassName?: string;
     containerId: string;
     hideContentWhenSignedOut?: boolean;
     hideVerificationFields?: boolean;
@@ -142,6 +143,7 @@ class HostedWidgetPaymentMethod extends Component<
             method,
             isInstrumentFeatureAvailable: isInstrumentFeatureAvailableProp,
             isLoadingInstruments,
+            additionalContainerClassName,
         } = this.props;
 
         const {
@@ -170,7 +172,8 @@ class HostedWidgetPaymentMethod extends Component<
                     className={ classNames(
                         'widget',
                         `widget--${method.id}`,
-                        'payment-widget'
+                        'payment-widget',
+                        additionalContainerClassName
                     ) }
                     id={ containerId }
                     style={ {

diff --git a/src/app/payment/paymentMethod/StripePaymentMethod.spec.tsx b/src/app/payment/paymentMethod/StripePaymentMethod.spec.tsx
@@ -73,6 +73,7 @@ describe('when using Stripe payment', () => {
                 containerId: 'stripe-card-field',
                 deinitializePayment: expect.any(Function),
                 initializePayment: expect.any(Function),
+                additionalContainerClassName: 'optimizedCheckout-form-input',
                 method,
             }));
     });

diff --git a/src/app/payment/paymentMethod/StripePaymentMethod.tsx b/src/app/payment/paymentMethod/StripePaymentMethod.tsx
@@ -38,6 +38,7 @@ const StripePaymentMethod: FunctionComponent<SquarePaymentMethodProps> = ({
 
     return <HostedWidgetPaymentMethod
         { ...rest }
+        additionalContainerClassName="optimizedCheckout-form-input"
         containerId="stripe-card-field"
         hideContentWhenSignedOut
         initializePayment={ initializeStripePayment }