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 | 25x 25x 25x 25x 8x 8x 8x 8x 8x 2x 2x 1x 1x 8x 5x 3x 3x 8x 3x 2x 8x 25x | import { PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
import React, { createRef, useCallback, useRef, useState, FunctionComponent, RefObject } from 'react';
import { Modal } from '../../ui/modal';
import HostedPaymentMethod, { HostedPaymentMethodProps } from './HostedPaymentMethod';
export type BlueSnapV2PaymentMethodProps = HostedPaymentMethodProps;
interface BlueSnapV2PaymentMethodRef {
paymentPageContentRef: RefObject<HTMLDivElement>;
cancelBlueSnapV2Payment?(): void;
}
const BlueSnapV2PaymentMethod: FunctionComponent<BlueSnapV2PaymentMethodProps> = ({
initializePayment,
...rest
}) => {
const [paymentPageContent, setPaymentPageContent] = useState<HTMLElement>();
const ref = useRef<BlueSnapV2PaymentMethodRef>({
paymentPageContentRef: createRef(),
});
const cancelBlueSnapV2ModalFlow = useCallback(() => {
setPaymentPageContent(undefined);
if (ref.current.cancelBlueSnapV2Payment) {
ref.current.cancelBlueSnapV2Payment();
ref.current.cancelBlueSnapV2Payment = undefined;
}
}, []);
const initializeBlueSnapV2Payment = useCallback((options: PaymentInitializeOptions) => {
return initializePayment({
...options,
bluesnapv2: {
onLoad(content: HTMLIFrameElement, cancel: () => void) {
setPaymentPageContent(content);
ref.current.cancelBlueSnapV2Payment = cancel;
},
style: {
border: '1px solid lightgray',
height: '60vh',
width: '100%',
},
},
});
}, [initializePayment]);
const appendPaymentPageContent = useCallback(() => {
if (ref.current.paymentPageContentRef.current && paymentPageContent) {
ref.current.paymentPageContentRef.current.appendChild(paymentPageContent);
}
}, [paymentPageContent]);
return (
<>
<HostedPaymentMethod
{ ...rest }
initializePayment={ initializeBlueSnapV2Payment }
/>
<Modal
additionalModalClassName="modal--bluesnapv2"
isOpen={ !!paymentPageContent }
onAfterOpen={ appendPaymentPageContent }
onRequestClose={ cancelBlueSnapV2ModalFlow }
shouldShowCloseButton={ true }
>
<div ref={ ref.current.paymentPageContentRef } />
</Modal>
</>
);
};
export default BlueSnapV2PaymentMethod;
|