All files / app/payment/paymentMethod AdyenV2CardValidation.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
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
2x
2x
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25x
 
import classNames from 'classnames';
import React from 'react';
 
import { TranslatedString } from '../../locale';
 
export interface AdyenV2CardValidationProps {
    verificationFieldsContainerId?: string;
    shouldShowNumberField: boolean;
    paymentMethodType: string;
}
 
const AdyenV2CardValidation: React.FunctionComponent<AdyenV2CardValidationProps> = ({
    verificationFieldsContainerId,
    shouldShowNumberField,
    paymentMethodType,
}) => (
    <div>
        { shouldShowNumberField && <p>
            <strong>
                <TranslatedString id="payment.instrument_trusted_shipping_address_title_text" />
            </strong>
 
            <br />
 
            <TranslatedString id="payment.instrument_trusted_shipping_address_text" />
        </p> }
 
        <div className="form-ccFields" id={ verificationFieldsContainerId }>
            <div className={ classNames(
                'form-field',
                'form-field--ccNumber',
                { 'form-field--ccNumber--hasExpiryDate': paymentMethodType === 'bcmc' },
                // This div is hiding by CSS because there is an Adyen library in
                // checkout-sdk which mounts verification fields and if is removed with JS this mounting event will be thrown an error
                { 'form-field-ccNumber--hide': !shouldShowNumberField }
                ) }
            >
                <label htmlFor="encryptedCardNumber">
                    <TranslatedString id="payment.credit_card_number_label" />
                </label>
                <div className="form-input optimizedCheckout-form-input has-icon" data-cse="encryptedCardNumber" id="encryptedCardNumber" />
            </div>
            { paymentMethodType === 'scheme' && <div className="form-field form-ccFields-field--ccCvv">
                <label htmlFor="encryptedSecurityCode">
                    <TranslatedString id="payment.credit_card_cvv_label" />
                </label>
                <div
                    className={ classNames(
                        'form-input',
                        'optimizedCheckout-form-input',
                        'has-icon'
                    ) }
                    data-cse="encryptedSecurityCode"
                    id="encryptedSecurityCode"
                />
            </div> }
            { paymentMethodType === 'bcmc' && <div className="form-field form-field--ccExpiry">
                <label htmlFor="encryptedExpiryDate">
                    <TranslatedString id="payment.credit_card_expiration_label" />
                </label>
                <div
                    className={ classNames(
                        'form-input',
                        'optimizedCheckout-form-input',
                        'has-icon'
                    ) }
                    data-cse="encryptedExpiryDate"
                    id="encryptedExpiryDate"
                />
            </div> }
        </div>
    </div>
);
 
export default AdyenV2CardValidation;