feat(payment): INT-2049 added changes to charge correct styles on Str…

…ipeV3
bigcommerce · Feb 25, 2020 · aeb8675 · aeb8675
1 parent 309772c
commit aeb8675
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 47 deletions.
diff --git a/src/app/payment/paymentMethod/StripePaymentMethod.spec.tsx b/src/app/payment/paymentMethod/StripePaymentMethod.spec.tsx
@@ -7,11 +7,21 @@ import React, { FunctionComponent } from 'react';
 import { CheckoutProvider } from '../../checkout';
 import { getStoreConfig } from '../../config/config.mock';
 import { createLocaleContext, LocaleContext, LocaleContextType } from '../../locale';
+import { getCreditCardInputStyles } from '../creditCard';
 import { getPaymentMethod } from '../payment-methods.mock';
 
 import HostedWidgetPaymentMethod, { HostedWidgetPaymentMethodProps } from './HostedWidgetPaymentMethod';
 import { default as PaymentMethodComponent, PaymentMethodProps } from './PaymentMethod';
 
+jest.mock('../creditCard', () => ({
+    ...jest.requireActual('../creditCard'),
+    getCreditCardInputStyles: jest.fn<ReturnType<typeof getCreditCardInputStyles>, Parameters<typeof getCreditCardInputStyles>>(
+        (_containerId, _fieldType) => {
+            return Promise.resolve({ color: 'rgb(255, 0, 0)', fontWeight: '500', fontFamily: 'Montserrat, Arial, Helvetica, sans-serif', fontSize: '14px', fontSmoothing: 'auto'});
+        }
+    ),
+}));
+
 describe('when using Stripe payment', () => {
     let method: PaymentMethod;
     let checkoutService: CheckoutService;
@@ -67,7 +77,7 @@ describe('when using Stripe payment', () => {
             }));
     });
 
-    it('initializes method with required config', () => {
+    it('initializes method with required config', async () => {
         const container = mount(<PaymentMethodTest { ...defaultProps } method={ method } />);
         const component: ReactWrapper<HostedWidgetPaymentMethodProps> = container.find(HostedWidgetPaymentMethod);
 
@@ -76,6 +86,11 @@ describe('when using Stripe payment', () => {
             gatewayId: method.gateway,
         });
 
+        expect(getCreditCardInputStyles)
+            .toHaveBeenCalledWith('stripe-card-field', ['color', 'fontFamily', 'fontWeight', 'fontSmoothing']);
+
+        await new Promise(resolve => process.nextTick(resolve));
+
         expect(checkoutService.initializePayment)
             .toHaveBeenCalledWith(expect.objectContaining({
                 methodId: method.id,
@@ -84,18 +99,22 @@ describe('when using Stripe payment', () => {
                     containerId: 'stripe-card-field',
                     style: {
                         base: {
-                            color: '#32325d',
-                            fontWeight: 500,
-                            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
-                            fontSize: '16px',
-                            fontSmoothing: 'antialiased',
+                            color: 'rgb(255, 0, 0)',
+                            fontWeight: '500',
+                            fontFamily: 'Montserrat, Arial, Helvetica, sans-serif',
+                            fontSize: '14px',
+                            fontSmoothing: 'auto',
                             '::placeholder': {
-                                color: '#aab7c4',
-                            },
+                                color: '#E1E1E1',
+                           },
                         },
                         invalid: {
-                            color: '#fa755a',
-                            iconColor: '#fa755a',
+                            color: 'rgb(255, 0, 0)',
+                            fontWeight: '500',
+                            fontFamily: 'Montserrat, Arial, Helvetica, sans-serif',
+                            fontSize: '14px',
+                            fontSmoothing: 'auto',
+                            iconColor: 'rgb(255, 0, 0)',
                         },
                     },
                 },

diff --git a/src/app/payment/paymentMethod/StripePaymentMethod.tsx b/src/app/payment/paymentMethod/StripePaymentMethod.tsx
@@ -2,6 +2,8 @@ import { PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
 import React, { useCallback, FunctionComponent } from 'react';
 import { Omit } from 'utility-types';
 
+import { getCreditCardInputStyles, CreditCardInputStylesType } from '../creditCard';
+
 import HostedWidgetPaymentMethod, { HostedWidgetPaymentMethodProps } from './HostedWidgetPaymentMethod';
 
 export type SquarePaymentMethodProps = Omit<HostedWidgetPaymentMethodProps, 'containerId' | 'hideContentWhenSignedOut'>;
@@ -10,28 +12,29 @@ const StripePaymentMethod: FunctionComponent<SquarePaymentMethodProps> = ({
     initializePayment,
     ...rest
 }) => {
-    const initializeStripePayment = useCallback((options: PaymentInitializeOptions) => initializePayment({
-        ...options,
-        stripev3: {
-            containerId: 'stripe-card-field',
-            style: {
-                base: {
-                    color: '#32325d',
-                    fontWeight: 500,
-                    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
-                    fontSize: '16px',
-                    fontSmoothing: 'antialiased',
-                    '::placeholder': {
-                        color: '#aab7c4',
+    const initializeStripePayment = useCallback(async (options: PaymentInitializeOptions) => {
+        const creditCardInputStyles =  await getCreditCardInputStyles('stripe-card-field', ['color', 'fontFamily', 'fontWeight', 'fontSmoothing']);
+        const creditCardInputErrorStyles = await getCreditCardInputStyles('stripe-card-field', ['color'], CreditCardInputStylesType.Error);
+
+        return initializePayment({
+            ...options,
+            stripev3: {
+                containerId: 'stripe-card-field',
+                style: {
+                    base: {
+                        ...creditCardInputStyles,
+                        '::placeholder': {
+                            color: '#E1E1E1',
+                        },
+                    },
+                    invalid: {
+                        ...creditCardInputErrorStyles,
+                        iconColor: creditCardInputErrorStyles.color,
                     },
-                },
-                invalid: {
-                    color: '#fa755a',
-                    iconColor: '#fa755a',
                 },
             },
-        },
-    }), [initializePayment]);
+        });
+    }, [initializePayment]);
 
     return <HostedWidgetPaymentMethod
         { ...rest }

diff --git a/src/scss/components/checkout/paymentProvider/_paymentProvider.scss b/src/scss/components/checkout/paymentProvider/_paymentProvider.scss
@@ -67,24 +67,6 @@ body.klarna-payments-fso-open {
     scroll-behavior: auto;
 }
 
-#stripe-card-field {
-    background-color: white;
-    border: remCalc(1px) solid transparent;
-    border-radius: remCalc(4px);
-    box-shadow: 0 remCalc(1px) remCalc(3px) 0 #e6ebf1;
-    box-sizing: border-box;
-    height: remCalc(40px);
-    margin-bottom: remCalc(20px);
-    margin-top: remCalc(20px);
-    padding: remCalc(10px) remCalc(12px);
-    -webkit-transition: box-shadow 150ms ease;
-    transition: box-shadow 150ms ease;
-}
-
-#stripe-card-field--focus {
-    box-shadow: 0 1px (3px) 0 #cfd7df;
-}
-
 #stripe-card-field--invalid {
     border-color: #fa755a;
 }

diff --git a/src/scss/components/checkout/widget/_widget.scss b/src/scss/components/checkout/widget/_widget.scss
@@ -53,3 +53,15 @@
 .widget-header-googlepay {
     text-align: center;
 }
+
+.widget--stripev3 {
+    @extend .form-input;
+
+    margin-bottom: remCalc(20px);
+    margin-top: remCalc(20px);
+}
+
+.StripeElement--focus {
+    border-color: $input-focus-border-color;
+    box-shadow: $input-focus-boxShadow;
+}