I have finally gave up. I spent 2 whole days trying to do this but I finally could not.
I am developing a custom payment method which needs to show instructions for the customer before the actual purchase.
That simple thing could not be made.
First, this is the layout definition (checkout_index_index.xml):
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/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">
<item name="renders" xsi:type="array">
<!-- merge payment method renders here -->
<item name="children" xsi:type="array">
<item name="desytec_transbank_methods" xsi:type="array">
<item name="component" xsi:type="string">Desytec_Transbank/js/view/payment/method-renderer</item>
<item name="methods" xsi:type="array">
<item name="webpay" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
The renderer is:
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: 'webpay',
component: 'Desytec_Transbank/js/view/payment/method-renderer/webpay'
}
);
return Component.extend({});
}
);
And the webpay renderer is:
/*browser:true*/
/*global define*/
define(
[
'ko',
'Magento_Checkout/js/view/payment/default',
],
function (ko, Component) {
return Component.extend({
defaults: {
template: 'Desytec_Transbank/payment/webpay'
},
/**
* Get value of instruction field.
* @returns {String}
*/
getInstructions: function () {
return window.checkoutConfig.payment.instructions[this.item.method];
}
});
}
);
The template is:
<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
<label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
<div class="payment-method-billing-address">
<!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<p data-bind="html: getInstructions()"></p>
<div class="checkout-agreements-block">
<!-- ko foreach: $parent.getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<div class="actions-toolbar">
<div class="primary">
<button class="action primary checkout"
type="submit"
data-bind="
click: placeOrder,
attr: {title: $t('Place Order')},
css: {disabled: !isPlaceOrderActionAllowed()},
enable: (getCode() == isChecked())
"
disabled>
<span data-bind="text: $t('Place Order')"></span>
</button>
</div>
</div>
</div>
</div>
And finally, this is the block:
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Desytec\Transbank\Block\Form;
/**
* Abstract class for Cash On Delivery and Bank Transfer payment method form
*/
abstract class Transbank extends \Magento\Payment\Block\Form
{
/**
* Instructions text
*
* @var string
*/
protected $_instructions;
protected $_template = 'form/webpay.phtml';
/**
* Get instructions text from config
*
* @return null|string
*/
public function getInstructions()
{
if ($this->_instructions === null) {
/** @var \Magento\Payment\Model\Method\AbstractMethod $method */
$method = $this->getMethod();
$this->_instructions = $method->getConfigData('instructions');
}
return $this->_instructions;
}
}
What is missing here?
Regards
Jaime
