All files / app/payment/paymentMethod MasterpassPaymentMethod.tsx

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
 
24x
 
 
24x
 
24x
 
 
 
24x
2x
2x
2x
 
2x
 
 
 
 
 
 
2x
2x
2x
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
24x
 
import { PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
import React, { useCallback, useMemo, FunctionComponent } from 'react';
import { Omit } from 'utility-types';
 
import { withLanguage, WithLanguageProps } from '../../locale';
 
import WalletButtonPaymentMethod, { WalletButtonPaymentMethodProps } from './WalletButtonPaymentMethod';
 
export type MasterpassPaymentMethodProps = Omit<WalletButtonPaymentMethodProps, 'buttonId'>;
 
const MasterpassPaymentMethod: FunctionComponent<MasterpassPaymentMethodProps & WithLanguageProps> = ({
    initializePayment,
    language,
    ...rest
}) => {
    const initializeMasterpassPayment = useCallback((options: PaymentInitializeOptions) => initializePayment({
        ...options,
        masterpass: {
            walletButton: 'walletButton',
        },
    }), [initializePayment]);
 
    const { config: { testMode }, initializationData: { checkoutId, isMasterpassSrcEnabled } } = rest.method;
    const locale = navigator.language.replace('-', '_');
    const signInButtonLabel = useMemo(() => (
        <img
            alt={ language.translate('payment.masterpass_name_text') }
            id="mpbutton"
            src={ isMasterpassSrcEnabled ?
                `https://${testMode ? 'sandbox.' : ''}src.mastercard.com/assets/img/btn/src_chk_btn_126x030px.svg?locale=${locale}&paymentmethod=master,visa,amex,discover&checkoutid=${checkoutId}` :
                `https://masterpass.com/dyn/img/btn/global/mp_chk_btn_126x030px.svg` }
        />
    ), [checkoutId, language, locale, testMode, isMasterpassSrcEnabled]);
 
    return <WalletButtonPaymentMethod
        { ...rest }
        buttonId="walletButton"
        initializePayment={ initializeMasterpassPayment }
        signInButtonLabel={ signInButtonLabel }
    />;
};
 
export default withLanguage(MasterpassPaymentMethod);