Получение бренда кредитной карты и отображение сообщения об ошибке при использовании размещенных полей в 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;

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

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

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

Page created Drop in UI - Which shows error message

Page created Drop in UI - Which shows card brand Добавьте бренды UI Card

Answer 1

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

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

1. Mastercard
2. Visa
3. AMEX
4. Откройте для себя
5. JCB

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

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