1.重写 vendor/magento/module-authorizenet-acceptjs 模块到
app\code\Jxt\AuthorizenetAcceptjs
2.创建 app\code\Jxt\AuthorizenetAcceptjs\registration.php
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
declare(strict_types=1);
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Jxt_AuthorizenetAcceptjs', __DIR__);
3.创建 app\code\Jxt\AuthorizenetAcceptjs\Block\PopulateFpx.php
<?php
declare(strict_types=1);
namespace Jxt\AuthorizenetAcceptjs\Block;
use Magento\Framework\View\Element\Template;
use Magento\Framework\App\RequestInterface;
use Magento\Framework\View\Asset\Repository as AssetRepository;
class PopulateFpx extends Template{
protected $assetRepository;
/**
* @var RequestInterface
*/
protected $request;
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
\Magento\Customer\Model\Session $customerSession,
\Magento\Framework\ObjectManagerInterface $objectManager,
RequestInterface $request,
AssetRepository $assetRepository,
array $data = []
) {
parent::__construct($context, $data);
$this->assetRepository = $assetRepository;
$this->customerSession = $customerSession;
$this->_objectManager = $objectManager;
$this->request = $request;
}
public function getFpxConfig() {
$output['fpxLogoImageUrl'] = $this->getViewFileUrl('Jxt_AuthorizenetAcceptjs::images/credit-card.png');
return $output;
}
public function getViewFileUrl($fileId, array $params = [])
{
$params = array_merge(['_secure' => $this->request->isSecure()], $params);
return $this->assetRepository->getUrlWithParams($fileId, $params);
}
}
?>4. 创建 app\code\Jxt\AuthorizenetAcceptjs\etc\module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Jxt_AuthorizenetAcceptjs" setup_version="1.0.0" active="true" ></module>
</config>5. 创建 app\code\Jxt\AuthorizenetAcceptjs\view\frontend\layout\checkout_index_index.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="after.body.start">
<block class="Jxt\AuthorizenetAcceptjs\Block\PopulateFpx" name="populate.fpx" template="Jxt_AuthorizenetAcceptjs::payment_image.phtml"/>
</referenceContainer>
</body>
</page>6. 创建 app\code\Jxt\AuthorizenetAcceptjs\view\frontend\templates\payment_image.phtml
<script>
window.populateFpx = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getFpxConfig()); ?>;
</script>7. 创建/images，存放图标 app\code\Jxt\AuthorizenetAcceptjs\view\frontend\web\images\credit-card.png
8. 创建 app\code\Jxt\AuthorizenetAcceptjs\view\frontend\web\js\view\payment\method-renderer\authorizenet-accept.js
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'Magento_Payment/js/view/payment/cc-form',
'Magento_AuthorizenetAcceptjs/js/view/payment/acceptjs-client',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Ui/js/model/messageList',
'Magento_Payment/js/model/credit-card-validation/validator'
], function ($, Component, AcceptjsClient, fullScreenLoader, globalMessageList) {
'use strict';
return Component.extend({
defaults: {
active: false,
template: 'Jxt_AuthorizenetAcceptjs/payment/authorizenet-acceptjs',
tokens: null,
ccForm: 'Magento_Payment/payment/cc-form',
acceptjsClient: null
},
fpxImageSrc: window.populateFpx.fpxLogoImageUrl,
/**
* Set list of observable attributes
*
* @returns {exports.initObservable}
*/
initObservable: function () {
this._super()
.observe(['active']);
return this;
},
/**
* @returns {String}
*/
getCode: function () {
return 'authorizenet_acceptjs';
},
/**
* Initialize form elements for validation
*/
initFormElement: function (element) {
this.formElement = element;
this.acceptjsClient = AcceptjsClient({
environment: window.checkoutConfig.payment[this.getCode()].environment
});
$(this.formElement).validation();
},
/**
* @returns {Object}
*/
getData: function () {
return {
method: this.getCode(),
'additional_data': {
opaqueDataDescriptor: this.tokens ? this.tokens.opaqueDataDescriptor : null,
opaqueDataValue: this.tokens ? this.tokens.opaqueDataValue : null,
ccLast4: this.creditCardNumber().substr(-4)
}
};
},
/**
* Check if payment is active
*
* @returns {Boolean}
*/
isActive: function () {
var active = this.getCode() === this.isChecked();
this.active(active);
return active;
},
/**
* Prepare data to place order
*/
beforePlaceOrder: function () {
var authData = {},
cardData = {},
secureData = {};
if (!$(this.formElement).valid()) {
return;
}
authData.clientKey = window.checkoutConfig.payment[this.getCode()].clientKey !== null ?
window.checkoutConfig.payment[this.getCode()].clientKey : '';
authData.apiLoginID = window.checkoutConfig.payment[this.getCode()].apiLoginID !== null ?
window.checkoutConfig.payment[this.getCode()].apiLoginID : '';
cardData.cardNumber = this.creditCardNumber();
cardData.month = this.creditCardExpMonth();
cardData.year = this.creditCardExpYear();
if (this.hasVerification()) {
cardData.cardCode = this.creditCardVerificationNumber();
}
secureData.authData = authData;
secureData.cardData = cardData;
fullScreenLoader.startLoader();
this.acceptjsClient.createTokens(secureData)
.always(function () {
fullScreenLoader.stopLoader();
})
.done(function (tokens) {
this.tokens = tokens;
this.placeOrder();
}.bind(this))
.fail(function (messages) {
this.tokens = null;
this._showErrors(messages);
}.bind(this));
},
/**
* Should the cvv field be used
*
* @return {Boolean}
*/
hasVerification: function () {
return window.checkoutConfig.payment[this.getCode()].useCvv;
},
/**
* Show error messages
*
* @param {String[]} errorMessages
*/
_showErrors: function (errorMessages) {
$.each(errorMessages, function (index, message) {
globalMessageList.addErrorMessage({
message: message
});
});
}
});
});
9. 创建 app\code\Jxt\AuthorizenetAcceptjs\view\frontend\web\template\payment\authorizenet-acceptjs.html
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="payment-method" css="_active: isActive()">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
attr="id: getCode()"
ko-value="getCode()"
ko-checked="isChecked"
click="selectPaymentMethod"
visible="isRadioButtonVisible()"
/>
<label attr="for: getCode()" class="label">
<img data-bind="attr: {src: fpxImageSrc, alt: $t('Acceptance Mark'), title: $t('Acceptance Mark')}"
class="payment-icon"/>
<span translate="getTitle()"></span>
</label>
</div>
<div class="payment-method-content">
<each args="getRegion('messages')" render="" />
<div class="payment-method-billing-address">
<each args="$parent.getRegion(getBillingAddressFormName())" render="" />
</div>
<form class="form" id="co-payment-form" method="post" afterRender="initFormElement">
<render args="ccForm" />
</form>
<div class="checkout-agreements-block">
<each args="$parent.getRegion('before-place-order')" render="" />
</div>
<div class="actions-toolbar">
<div class="primary">
<button class="action primary checkout"
type="submit"
click="beforePlaceOrder"
css="disabled: !isPlaceOrderActionAllowed()"
attr="title: $t('Place Order')"
>
<span translate="'Place Order'"></span>
</button>
</div>
</div>
</div>
</div>
10. 创建 app\code\Jxt\AuthorizenetAcceptjs\view\frontend\requirejs-config.js
var config = {
map: {
'*': {
'Magento_AuthorizenetAcceptjs/template/payment/authorizenet-acceptjs.html':
'Jxt_AuthorizenetAcceptjs/template/payment/authorizenet-acceptjs.html'
}
}
};11.至此，重写模块完成，本dmoe基于此文章完善得来，把编译流程跑一遍。效果如下
