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 | 24x 24x 24x 3x 3x 3x 3x 5x 3x 3x 24x | import { PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
import React, { useCallback, useMemo, FunctionComponent } from 'react';
import { Omit } from 'utility-types';
import HostedFieldPaymentMethod, { HostedFieldPaymentMethodProps } from './HostedFieldPaymentMethod';
export type SquarePaymentMethodProps = Omit<HostedFieldPaymentMethodProps, 'cardCodeId' | 'cardExpiryId' | 'cardNumberId' | 'postalCodeId' | 'walletButtons'>;
const SquarePaymentMethod: FunctionComponent<SquarePaymentMethodProps> = ({
initializePayment,
method,
...rest
}) => {
const isMasterpassEnabled = method.initializationData && method.initializationData.enableMasterpass;
const initializeSquarePayment = useCallback((options: PaymentInitializeOptions) => initializePayment({
...options,
square: {
cardNumber: {
elementId: 'sq-card-number',
},
cvv: {
elementId: 'sq-cvv',
},
expirationDate: {
elementId: 'sq-expiration-date',
},
postalCode: {
elementId: 'sq-postal-code',
},
inputClass: 'form-input',
// FIXME: Need to pass the color values of the theme
inputStyles: [
{
color: '#333',
fontSize: '13px',
lineHeight: '20px',
},
],
masterpass: isMasterpassEnabled && {
elementId: 'sq-masterpass',
},
},
}), [initializePayment, isMasterpassEnabled]);
const walletButtons = useMemo(() => (
<input
className="button-masterpass"
id="sq-masterpass"
type="button"
/>
), []);
return <HostedFieldPaymentMethod
{ ...rest }
cardCodeId="sq-cvv"
cardExpiryId="sq-expiration-date"
cardNumberId="sq-card-number"
initializePayment={ initializeSquarePayment }
method={ method }
postalCodeId="sq-postal-code"
walletButtons={ isMasterpassEnabled && walletButtons }
/>;
};
export default SquarePaymentMethod;
|