Получение бренда кредитной карты и отображение сообщения об ошибке при использовании размещенных полей в Braintree

Question

Я пытаюсь создать страницу оплаты, используя поля, размещенные в braintree. Я создал учетную запись песочницы.

Но я не получаю дополнительных сведений, таких как марка карты, сообщение об ошибке, например Drop in UI. Как получить эти функции с помощью размещенных полей.

import React from 'react';

var braintree = require('braintree-web');


class BillingComponent extends React.Component {
    constructor(props) {
        super(props);
        this.clientDidCreate = this.clientDidCreate.bind(this);
        this.hostedFieldsDidCreate = this.hostedFieldsDidCreate.bind(this);
        this.submitHandler = this.submitHandler.bind(this);
        this.showPaymentPage = this.showPaymentPage.bind(this);
        this.state = {
            hostedFields: null,
            errorOccurred: false,
        };
    }

    componentDidCatch(error, info) {
        this.setState({errorOccurred: true});
    }


    componentDidMount() {
        this.showPaymentPage();
    }

    showPaymentPage() {
        braintree.client.create({
            authorization: 'sandbox_xxxxx_xxxxxxx'
        }, this.clientDidCreate);
    }


    clientDidCreate(err, client) {
        braintree.hostedFields.create({
            onFieldEvent: function (event) {console.log(JSON.stringify(event))},
            client: client,
            styles: {
                'input': {
                    'font-size': '16pt',
                    'color': '#020202'
                },

                '.number': {
                    'font-family': 'monospace'
                },

                '.valid': {
                    'color': 'green'
                }
            },
            fields: {
                number: {
                    selector: '#card-number',
                    'card-brand-id': true,
                    supportedCardBrands: 'visa'
                },
                cvv: {
                    selector: '#cvv',
                    type: 'password'
                },
                expirationDate: {
                    selector: '#expiration-date',
                    prefill: "12/21"
                }
            }
        }, this.hostedFieldsDidCreate);
    }

    hostedFieldsDidCreate(err, hostedFields) {
        let submitBtn = document.getElementById('my-submit');
        this.setState({hostedFields: hostedFields});
        submitBtn.addEventListener('click', this.submitHandler);
        submitBtn.removeAttribute('disabled');
    }

    submitHandler(event) {
        let submitBtn = document.getElementById('my-submit');

        event.preventDefault();
        submitBtn.setAttribute('disabled', 'disabled');

        this.state.hostedFields.tokenize(
            function (err, payload) {
            if (err) {
                submitBtn.removeAttribute('disabled');
                console.error(err);
            }
            else {
                let form = document.getElementById('my-sample-form');
                form['payment_method_nonce'].value = payload.nonce;
                alert(payload.nonce);
                // form.submit();
            }
        });
    }

    render() {
        return (
            <div className="user-prelogin">
                <div className="row gutter-reset">
                    <div className="col">
                        <div className="prelogin-container">
                            <form action="/" id="my-sample-form">
                                <input type="hidden" name="payment_method_nonce"/>
                                <label htmlFor="card-number">Card Number</label>
                                <div className="form-control" id="card-number"></div>

                                <label htmlFor="cvv">CVV</label>
                                <div className="form-control" id="cvv"></div>

                                <label htmlFor="expiration-date">Expiration Date</label>
                                <div className="form-control" id="expiration-date"></div>
                                <input id="my-submit" type="submit" value="Pay" disabled/>

                            </form>
                        </div>
                    </div>
                </div>
            </div>

        );
    }
}

export default BillingComponent;

Я могу получить базовые функции, такие как получение одноразового номера из данных карты. Но я не могу отобразить изображение бренда карты / сообщение об ошибке на странице, как мы показываем в Drop in UI.

Как показать изображение бренда карты и сообщение об ошибке с помощью размещенных полей?

Страница создана с использованием размещенных полей:

Страница создана Drop in UI - отображается сообщение об ошибке

Страница создана Drop in UI - показывает бренд карты

Answer 1

Хотя мы не получаем точного пользовательского интерфейса, такого как Drop in UI, мы можем получить тип карты и отобразить его самостоятельно, используя прослушиватели в cardTypeChange.

hostedFieldsDidCreate(err, hostedFields) {
    this.setState({hostedFields: hostedFields});
    if (hostedFields !== undefined) {
        hostedFields.on('cardTypeChange', this.cardTypeProcessor);
        hostedFields.on('validityChange', this.cardValidator);
    }

    this.setState({load: false});
}


cardTypeProcessor(event) {
    if (event.cards.length === 1) {
        const cardType = event.cards[0].type;
        this.setState({cardType: cardType});
    } else {
        this.setState({cardType: null});
    }
}

cardValidator(event) {
    const fieldName = event.emittedBy;
    let field = event.fields[fieldName];
    let validCard = this.state.validCard;

    // Remove any previously applied error or warning classes
    $(field.container).removeClass('is-valid');
    $(field.container).removeClass('is-invalid');

    if (field.isValid) {
        validCard[fieldName] = true;
        $(field.container).addClass('is-valid');
    } else if (field.isPotentiallyValid) {
        // skip adding classes if the field is
        // not valid, but is potentially valid
    } else {
        $(field.container).addClass('is-invalid');
        validCard[fieldName] = false;
    }

    this.setState({validCard: validCard});
}

Получил следующий ответ от службы поддержки Braintree.

Стили размещенных полей можно найти в нашей документации для разработчиков. Что касается логотипов, вы можете скачать их с официальных сайтов типов карт -

1. Mastercard
2. Visa
3. AMEX
4. Обнаружить
5. JCB

Или онлайн от других поставщиков.

Примечание. Drop-In UI будет автоматически получать логотипы брендов и сообщать об ошибках проверки, в отличие от размещенных полей, поскольку он менее настраиваемый.