Magento – Magento2 Payment Methods Not Showing at Checkout

The rendererList is observable JavaScript array provided by the Magento_Checkout/js/model/payment/renderer-list component.

In order to use rendererList in custom payment module the following should be done:

1. Create in your module view/frontend/layout/checkout_index_index.xml file and declare new payment renderer component (adding as an image to give an idea):

2. Create the Custom_Payment/js/view/payment/custom_payment.js component and add rendererList component as a dependency. It will allow you to add custom payment renderer into rendererList array:

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: 'custom_payment',
                component: 'Custom_Payment/js/view/payment/method-renderer/custom-payment-renderer'
            }
        );
        /** Add view logic here if needed */
        return Component.extend({});
    }
);

3. Create Custom_Payment/js/view/payment/method-renderer/custom-payment-renderer component and assign template to render custom payment:

define(
    [
        'jquery',
        'Magento_Payment/js/view/payment/iframe',
        'Magento_Checkout/js/action/set-payment-information'
    ],
    function ($, Component, setPaymentInformationAction) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'Custom_Payment/payment/custom-payment'
            },
            ...
        });
    }
);

4. Finally, create Custom_Payment/view/frontend/web/template/payment/custom-payment.html template to have custom payment form.

All Core Payment modules modifies rendererList in the way described above.

I hope answer gives you an idea how rendererList is filled with payment methods.

It is recommended to add custom js files via checkout_index_index.xml. This has to be done very carefully, respecting nested levels of jsLayout component.

Let me know if you still have questions.

This sounds like your site has been hacked. I'm sure this credit card form is displayed via JavaScript and sends entered credit card data to some unknown server far away, stealing your customers credit cards.

Take the site offline immediately and then start investigating the PHP code and other files, as well as configurations where scripts could have been added (often in System > Configuration > Design).

Then change passwords, make sure, that all security patches are applied and server software is up to date.

You will also have to notify your customers about this exploit, if people were trying to buy on your site while this form was in place.

See also: What should you do with the hacked installation?