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 101 102 103 104 105 106 107 | 24x 24x 24x 24x 24x 24x 24x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 2x 1x 2x 2x 24x | import { CardInstrument, PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
import React, { useCallback, FunctionComponent } from 'react';
import { withHostedCreditCardFieldset, WithInjectedHostedCreditCardFieldsetProps } from '../hostedCreditCard';
import HostedWidgetPaymentMethod, { HostedWidgetPaymentMethodProps } from './HostedWidgetPaymentMethod';
import MollieCustomCardForm from './MollieCustomCardForm';
export type MolliePaymentMethodsProps = Omit<HostedWidgetPaymentMethodProps, 'containerId'>;
export enum MolliePaymentMethodType {
creditcard = 'credit_card',
}
const MolliePaymentMethod: FunctionComponent<MolliePaymentMethodsProps & WithInjectedHostedCreditCardFieldsetProps > = ({
initializePayment,
method,
getHostedFormOptions,
getHostedStoredCardValidationFieldset,
hostedStoredCardValidationSchema,
...props
}) => {
const containerId = `mollie-${method.method}`;
const initializeMolliePayment: HostedWidgetPaymentMethodProps['initializePayment'] = useCallback(async (options: PaymentInitializeOptions, selectedInstrument) => {
const mollieElements = getMolliesElementOptions();
return initializePayment({
...options,
mollie: {
containerId,
cardNumberId : mollieElements.cardNumberElementOptions.containerId,
cardCvcId: mollieElements.cardCvcElementOptions.containerId,
cardHolderId: mollieElements.cardHolderElementOptions.containerId,
cardExpiryId: mollieElements.cardExpiryElementOptions.containerId,
styles : {
base: {
color: '#333333',
'::placeholder' : {
color: '#999999',
},
},
valid: {
color: '#090',
},
invalid: {
color: '#D14343',
},
},
...(IselectedInstrument && !selectedInstrument?.trustedShippingAddress && { form : await getHostedFormOptions(selectedInstrument) }),
},
});
}, [initializePayment, containerId, getHostedFormOptions]);
const getMolliesElementOptions = () => {
return {
cardNumberElementOptions: {
containerId: 'mollie-card-number-component-field',
},
cardExpiryElementOptions: {
containerId: 'mollie-card-expiry-component-field',
},
cardCvcElementOptions: {
containerId: 'mollie-card-cvc-component-field',
},
cardHolderElementOptions: {
containerId: 'mollie-card-holder-component-field',
},
};
};
function renderCustomPaymentForm() {
const options = getMolliesElementOptions();
return <MollieCustomCardForm isCreditCard={ isCreditCard() } method={ method } options={ options } />;
}
function isCreditCard(): boolean {
return method.method === MolliePaymentMethodType.creditcard;
}
function validateInstrument(_shouldShowNumber: boolean, selectedInstrument: CardInstrument) {
if (selectedInstrument && selectedInstrument.trustedShippingAddress) {
return;
}
return getHostedStoredCardValidationFieldset(selectedInstrument);
}
return (
<HostedWidgetPaymentMethod
{ ...props }
containerId={ containerId }
hideContentWhenSignedOut
initializePayment={ initializeMolliePayment }
isAccountInstrument={ !isCreditCard() }
method={ method }
renderCustomPaymentForm={ renderCustomPaymentForm }
shouldRenderCustomInstrument={ true }
storedCardValidationSchema={ hostedStoredCardValidationSchema }
validateInstrument={ validateInstrument }
/>);
};
export default withHostedCreditCardFieldset(MolliePaymentMethod);
|