How is the frontend vault payment form implemented?

dmitrii_fediuk · June 6, 2017, 1:15pm

Context: How is a vault payment implemented?

The layout rule

magento/magento2/blob/2.1.7/app/code/Magento/Vault/view/frontend/layout/checkout_index_index.xml#L26-L29


<item name="vault" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Vault/js/view/payment/vault</item>
    <item name="methods" xsi:type="array"/>
</item>

The bank cards grouping

github.com

magento/magento2/blob/2.1.7/app/code/Magento/Vault/view/frontend/web/js/view/payment/vault.js#L18-L23


layout([{
    name: vaultGroupName,
    component: 'Magento_Checkout/js/model/payment/method-group',
    alias: 'vault',
    sortOrder: 10
}]);

How is the chosen bank card token passed to the server Magento part

github.com

magento/magento2/blob/2.1.7/app/code/Magento/Vault/view/frontend/web/js/view/payment/method-renderer/vault.js#L110-L119


getData: function () {
    var data = {
        method: this.getCode()
    };


    data['additional_data'] = {};
    data['additional_data']['public_hash'] = this.getToken();


    return data;
}

A radio button markup and its `input` value

github.com

magento/magento2/blob/2.1.7/app/code/Magento/Vault/view/frontend/web/template/payment/form.html#L9-L17


<input type="radio"
       name="payment[method]"
       class="radio"
       data-bind="
            attr: {'id': getId()},
            value: getId(),
            click: selectPaymentMethod,
            checked: isChecked,
            visible: isRadioButtonVisible()"/>

dmitrii_fediuk · June 6, 2017, 1:17pm

How is the frontend vault payment form implemented?

The layout rule

The bank cards grouping

How is the chosen bank card token passed to the server Magento part

A radio button markup and its input value

A radio button markup and its `input` value