Table of contents
One of the big improvements of Magento 2.x over Magento 1.x is that custom payment methods can be integrated into the checkout. In this tutorial, we will show you how to implement a payment method rendering in Magento 2 checkout.
Step 1: Create the .js component file
To start off, your payment method renderer should act as a UI component that depends on the Magento_Checkout module and extends the default payment method component (default payment method renderer is located in <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js).
Create the component’s .js file (the payment method renderer) in your custom module directory. It must be stored in the <your_module_dir>/view/frontend/web/js/view/ directory.
The general view of the payment method renderer is the following:
define(
['Magento_Checkout / js / view / payment /
default'
],
function(Component) {
'
use strict';
return Component.extend({
defaults: {
template: ' % path to template % '
},
// add required logic here
});
}
);For this new payment method to be able to access system config data, it has to implement the \Magento\Checkout\Model\ConfigProviderInterface interface, and the class implementing it must be injected to the composite config provider via DI frontend configuration.
Sample .php file implementing \Magento\Checkout\Model\ConfigProviderInterface:
class MyCustomPaymentConfigProvider implements \Magento\Checkout\Model\ConfigProviderInterface
{
...
public function getConfig()
{
return [
// 'key' => 'value' pairs of configuration
];
}
...
}And in case your new payment method requires credit card information, you should use the Magento renderer to implement credit card form (located in <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js).
Step 2: Create the .js component registering the renderer
In your custom module directory, create the .js UI component which registers the payment method renderer in the renderers list. It must be located under the <your_module_dir>/view/frontend/web/js/view/ directory.
The file content is as below:
define(
['uiComponent', 'Magento_Checkout / js / model / payment / renderer - list'],
function(
Component,
rendererList
) {
'
use strict';
rendererList.push({
type: ' % payment_method_code % ',
component: ' % js_renderer_component % '
},
// other payment method renderers if required
);
/** Add view logic here if needed */
return Component.extend({});
}
);Step 3: Create the template for the payment method component
Create a new <your_module_dir>/view/frontend/web/template/<your_template>.html file in your custom module directory. The template can use Knockout JS syntax.
E.g., the template for rendering the PayPal Express payment method:
Step 4: Declare the payment method in layout
- Create a new
<your_module_dir>/view/frontend/layout/checkout_index_index.xmlfile in your custom module directory - Add the following code to that file
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Declare additional before payment components. START -->
<item name="beforeMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">beforeMethods</item>
<item name="children" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</item>
</item>
</item>
<!-- Declare additional before payment components. END -->
<!-- Declare the payment method (the component that registrates in the list). START -->
<item name="renders" xsi:type="array">
<item name="children" xsi:type="array">
<item name="%group name of the payment methods%" xsi:type="array">
<!-- Example of value: Magento_Paypal/view/frontend/web/js/view/payment-->
<item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
<item name="methods" xsi:type="array">
<!-- Add this if your payment method requires entering a billing address-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
<!-- Declare the payment method (the component that registrates in the list). END -->
<!-- Declare additional after payment components. START -->
<item name="afterMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">afterMethods</item>
<item name="children" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</item>
</item>
</item>
<!-- Declare additional after payment components. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>(For production mode only) Step 5 : Run CLI commands
In production mode, you’ll need to run a few more commands like so:
php bin/magento setup:di:compile php bin/magento setup:static-content:deploy php bin/magento cache:clean
Magento 2 Checkout Extension Suite
The checkout page is, by far, the most important destination of any online website, which can either bring a customer into a consumer or push them away from the point of sale.
Thankfully, this Magento 2 Checkout Extension helps optimize your checkout effortlessly.
Check the suit out now!
See also:
How to Customize the Checkout Process in Magento 2
How to Add Discount Code to Checkout in Magento
