How to ask a customer for his bank card data on the checkout page?

dmitry_fedyuk · February 16, 2016, 7:07am

See how the standard Magento_BraintreeTwo module does it:

Credit Card Number

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/template/payment/form.html#L59-L67


<div class="field number required">
    <label data-bind="attr: {for: getCode() + '_cc_number'}" class="label">
        <span><!-- ko i18n: 'Credit Card Number'--><!-- /ko --></span>
    </label>
    <div class="control">
        <div data-bind="attr: {id: getCode() + '_cc_number'}" class="hosted-control"></div>
        <div class="hosted-error"><!-- ko i18n: 'Please, enter valid Credit Card Number'--><!-- /ko --></div>
    </div>
</div>

Expiration Date

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/template/payment/form.html#L68-L83


<div class="field number required">
    <label data-bind="attr: {for: getCode() + '_expiration'}" class="label">
        <span><!-- ko i18n: 'Expiration Date'--><!-- /ko --></span>
    </label>
    <div class="control">
        <div class="hosted-date-wrap">
            <div data-bind="attr: {id: getCode() + '_expirationMonth'}"
                 class="hosted-control hosted-date"></div>


            <div data-bind="attr: {id: getCode() + '_expirationYear'}"
                 class="hosted-control hosted-date"></div>


            <div class="hosted-error"><!-- ko i18n: 'Please, enter valid Expiration Date'--><!-- /ko --></div>
        </div>
    </div>
</div>

Card Verification Number

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/template/payment/form.html#L85-L105


<div class="field cvv required" data-bind="attr: {id: getCode() + '_cc_type_cvv_div'}">
    <label data-bind="attr: {for: getCode() + '_cc_cid'}" class="label">
        <span><!-- ko i18n: 'Card Verification Number'--><!-- /ko --></span>
    </label>
    <div class="control _with-tooltip">
        <div data-bind="attr: {id: getCode() + '_cc_cid'}" class="hosted-control hosted-cid"></div>
        <div class="hosted-error"><!-- ko i18n: 'Please, enter valid Card Verification Number'--><!-- /ko --></div>


        <div class="field-tooltip toggle">
            <span class="field-tooltip-action action-cvv"
                  tabindex="0"
                  data-toggle="dropdown"
                  data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
                <span><!-- ko i18n: 'What is this?'--><!-- /ko --></span>
            </span>
            <div class="field-tooltip-content"
                 data-target="dropdown"
                 data-bind="html: getCvvImageHtml()"></div>
        </div>
    </div>
</div>

How is the form loaded?

Preliminary reading: How to specify a checkout’s renderer for a payment menthod?

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/js/view/payment/braintree.js#L10-L10


'Magento_Checkout/js/model/payment/renderer-list'

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/js/view/payment/braintree.js#L18-L23


rendererList.push(
    {
        type: 'braintreetwo',
        component: 'Magento_BraintreeTwo/js/view/payment/method-renderer/hosted-fields'
    }
);

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/js/view/payment/method-renderer/hosted-fields.js#L10-L10


'Magento_BraintreeTwo/js/view/payment/method-renderer/cc-form',

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/js/view/payment/method-renderer/hosted-fields.js#L14-L14


], function ($, Component, validator, vaultEnabler, $t) {

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/js/view/payment/method-renderer/hosted-fields.js#L17-L17


return Component.extend({

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/js/view/payment/method-renderer/hosted-fields.js#L20-L20


template: 'Magento_BraintreeTwo/payment/form',

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/js/view/payment/method-renderer/cc-form.js#L11-L11


'Magento_Payment/js/view/payment/cc-form',

github.com

magento/magento2/blob/2ea8cdd7/app/code/Magento/BraintreeTwo/view/frontend/web/js/view/payment/method-renderer/cc-form.js#L32-L32


return Component.extend({