Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 24x 24x 24x 24x 24x 24x 24x | import React, { useCallback, useContext, FunctionComponent } from 'react';
import { connectFormik, ConnectFormikProps } from '../../common/form';
import { FormContext } from '../../ui/form';
import PaymentContext from '../PaymentContext';
import { PaymentFormValues } from '../PaymentForm';
import HostedWidgetPaymentMethod, { HostedWidgetPaymentMethodProps } from './HostedWidgetPaymentMethod';
interface AdditionalProps {
uniqueId: string;
isAPM: boolean;
}
export type PaypalCommercePaymentMethodProps = Omit<HostedWidgetPaymentMethodProps, 'containerId'> & ConnectFormikProps<PaymentFormValues> & AdditionalProps;
const PaypalCommercePaymentMethod: FunctionComponent<PaypalCommercePaymentMethodProps> = ({
initializePayment,
onUnhandledError,
formik: { submitForm, validateForm, setFieldTouched },
uniqueId,
isAPM,
...rest
}) => {
const paymentContext = useContext(PaymentContext);
const { setSubmitted } = useContext(FormContext);
const paymentUniqueId = `${uniqueId}-paymentWidget`;
const initializePayPalCommercePayment = useCallback(options => initializePayment({
...options,
paypalcommerce: {
container: '#checkout-payment-continue',
apmFieldsContainer: `#${paymentUniqueId}`,
apmFieldsStyles: {
base: {
backgroundColor: 'transparent',
color: 'black',
fontSize: '16px',
fontFamily: 'Open Sans, Helvetica Neue, Arial, sans-serif',
lineHeight: '1.5',
letterSpacing: '0.3',
},
input: {
backgroundColor: 'white',
fontSize: '1rem',
color: '#333',
borderColor: '#d9d9d9',
borderRadius: '4px',
borderWidth: '1px',
padding: '1rem',
},
invalid: {
color: '#ed6a6a',
},
active: {
color: '#4496f6',
},
},
onRenderButton: () => {
paymentContext?.hidePaymentSubmitButton?.(rest.method, true);
},
submitForm: () => {
setSubmitted(true);
submitForm();
},
onError: (error: Error) => {
onUnhandledError?.(error);
},
onValidate: async (resolve: () => void, reject: () => void): Promise<void> => {
const keysValidation = Object.keys(await validateForm());
if (keysValidation.length) {
setSubmitted(true);
keysValidation.forEach(key => setFieldTouched(key));
return reject();
}
return resolve();
},
},
}), [initializePayment, submitForm, paymentContext, rest.method, validateForm, setSubmitted, setFieldTouched, onUnhandledError, paymentUniqueId]);
const onError = (error: Error) => {
paymentContext?.disableSubmit(rest.method, true);
onUnhandledError?.(error);
};
return <HostedWidgetPaymentMethod
{ ...rest }
containerId={ paymentUniqueId }
initializePayment={ initializePayPalCommercePayment }
onUnhandledError={ onError }
shouldShow={ isAPM }
/>;
};
export default connectFormik(PaypalCommercePaymentMethod);
|