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 | 10x 10x 10x 10x 10x 49x 49x 49x 49x 49x 49x 12x 49x 44x 5x 1x 1x 1x 1x 1x 4x 8x 10x | import { CustomerInitializeOptions, CustomerRequestOptions } from '@bigcommerce/checkout-sdk';
import React, { memo, Fragment, FunctionComponent } from 'react';
import { TranslatedString } from '../locale';
import CheckoutButton from './CheckoutButton';
// TODO: The API should tell UI which payment method offers its own checkout button
export const SUPPORTED_METHODS: string[] = [
'amazon',
'amazonpay',
'braintreevisacheckout',
'chasepay',
'masterpass',
'googlepayadyenv2',
'googlepayauthorizenet',
'googlepaybraintree',
'googlepaycheckoutcom',
'googlepaycybersourcev2',
'googlepayorbital',
'googlepaystripe',
];
export interface CheckoutButtonListProps {
methodIds?: string[];
isInitializing?: boolean;
checkEmbeddedSupport?(methodIds: string[]): void;
deinitialize(options: CustomerRequestOptions): void;
initialize(options: CustomerInitializeOptions): void;
onError?(error: Error): void;
}
const CheckoutButtonList: FunctionComponent<CheckoutButtonListProps> = ({
checkEmbeddedSupport,
onError,
isInitializing = false,
methodIds,
...rest
}) => {
const supportedMethodIds = (methodIds ?? [])
.filter(methodId => SUPPORTED_METHODS.indexOf(methodId) !== -1);
if (supportedMethodIds.length === 0) {
return null;
}
if (checkEmbeddedSupport) {
try {
checkEmbeddedSupport(supportedMethodIds);
} catch (error) {
Eif (onError) {
onError(error);
} else {
throw error;
}
return null;
}
}
return (
<Fragment>
{ !isInitializing && <p><TranslatedString id="remote.continue_with_text" /></p> }
<div className="checkoutRemote">
{ supportedMethodIds.map(methodId =>
<CheckoutButton
containerId={ `${methodId}CheckoutButton` }
key={ methodId }
methodId={ methodId }
onError={ onError }
{ ...rest }
/>
) }
</div>
</Fragment>
);
};
export default memo(CheckoutButtonList);
|