All files / app/payment/paymentMethod AmazonPaymentMethod.tsx

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  24x     24x   24x                           24x 4x 4x 4x 4x   4x 4x               4x                                       4x                     24x  
import { CheckoutSelectors, CustomerInitializeOptions, PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
import React, { useCallback, useContext, FunctionComponent } from 'react';
import { Omit } from 'utility-types';
 
import PaymentContext from '../PaymentContext';
 
import HostedWidgetPaymentMethod, { HostedWidgetPaymentMethodProps } from './HostedWidgetPaymentMethod';
 
export interface AmazonPaymentMethodProps extends Omit<HostedWidgetPaymentMethodProps, 'containerId' | 'hideContentWhenSignedOut' | 'isSignInRequired' | 'signInCustomer'> {
    initializeCustomer(options: CustomerInitializeOptions): Promise<CheckoutSelectors>;
}
 
function signInAmazon() {
    const button: HTMLElement | null = document.querySelector('#paymentWidget img');
 
    if (button) {
        button.click();
    }
}
 
const AmazonPaymentMethod: FunctionComponent<AmazonPaymentMethodProps> = ({
    initializeCustomer,
    initializePayment,
    onUnhandledError,
    ...rest
}) => {
    const paymentContext = useContext(PaymentContext);
    const initializeAmazonCustomer = useCallback((options: CustomerInitializeOptions) => initializeCustomer({
        ...options,
        amazon: {
            container: 'paymentWidget',
            onError: onUnhandledError,
        },
    }), [initializeCustomer, onUnhandledError]);
 
    const initializeAmazonPayment = useCallback((options: PaymentInitializeOptions) => initializePayment({
        ...options,
        amazon: {
            container: 'paymentWidget',
            onError: (error: Error) => {
                if (onUnhandledError) {
                    onUnhandledError(error);
                }
                if (paymentContext) {
                    paymentContext.disableSubmit(rest.method, true);
                }
            },
            onPaymentSelect: () => {
                if (paymentContext) {
                    paymentContext.disableSubmit(rest.method, false);
                }
            },
        },
    }), [initializePayment, onUnhandledError, paymentContext, rest.method]);
 
    return <HostedWidgetPaymentMethod
        { ...rest }
        containerId="paymentWidget"
        hideContentWhenSignedOut
        initializeCustomer={ initializeAmazonCustomer }
        initializePayment={ initializeAmazonPayment }
        isSignInRequired={ true }
        signInCustomer={ signInAmazon }
    />;
};
 
export default AmazonPaymentMethod;