payment.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. define([
  6. 'jquery',
  7. 'mage/template',
  8. 'Magento_Ui/js/modal/alert',
  9. 'jquery/ui',
  10. 'mage/translate'
  11. ], function ($, mageTemplate, alert) {
  12. 'use strict';
  13. $.widget('mage.payment', {
  14. options: {
  15. continueSelector: '#payment-continue',
  16. methodsContainer: '#payment-methods',
  17. minBalance: 0,
  18. tmpl: '<input id="hidden-free" type="hidden" name="payment[method]" value="free">'
  19. },
  20. /** @inheritdoc */
  21. _create: function () {
  22. this.element.find('dd [name^="payment["]').prop('disabled', true).end()
  23. .on('click', this.options.continueSelector, $.proxy(this._submitHandler, this))
  24. .on('updateCheckoutPrice', $.proxy(function (event, data) {
  25. //updating the checkoutPrice
  26. if (data.price) {
  27. this.options.checkoutPrice += data.price;
  28. }
  29. //updating total price
  30. if (data.totalPrice) {
  31. data.totalPrice = this.options.checkoutPrice;
  32. }
  33. if (this.options.checkoutPrice <= this.options.minBalance) {
  34. // Add free input field, hide and disable unchecked
  35. // checkbox payment method and all radio button payment methods
  36. this._disablePaymentMethods();
  37. } else {
  38. // Remove free input field, show all payment method
  39. this._enablePaymentMethods();
  40. }
  41. }, this))
  42. .on('click', 'dt input:radio', $.proxy(this._paymentMethodHandler, this));
  43. if (this.options.checkoutPrice < this.options.minBalance) {
  44. this._disablePaymentMethods();
  45. } else {
  46. this._enablePaymentMethods();
  47. }
  48. },
  49. /**
  50. * Display payment details when payment method radio button is checked
  51. * @private
  52. * @param {EventObject} e
  53. */
  54. _paymentMethodHandler: function (e) {
  55. var element = $(e.target),
  56. parentsDl = element.closest('dl');
  57. parentsDl.find('dt input:radio').prop('checked', false);
  58. parentsDl.find('dd').addClass('no-display').end()
  59. .find('.items').hide()
  60. .find('[name^="payment["]').prop('disabled', true);
  61. element.prop('checked', true).parent()
  62. .next('dd').removeClass('no-display')
  63. .find('.items').show().find('[name^="payment["]').prop('disabled', false);
  64. },
  65. /**
  66. * make sure one payment method is selected
  67. * @private
  68. * @return {Boolean}
  69. */
  70. _validatePaymentMethod: function () {
  71. var methods = this.element.find('[name^="payment["]'),
  72. isValid = false;
  73. if (methods.length === 0) {
  74. alert({
  75. content: $.mage.__('We can\'t complete your order because you don\'t have a payment method set up.')
  76. });
  77. } else if (this.options.checkoutPrice <= this.options.minBalance) {
  78. isValid = true;
  79. } else if (methods.filter('input:radio:checked').length) {
  80. isValid = true;
  81. } else {
  82. alert({
  83. content: $.mage.__('Please choose a payment method.')
  84. });
  85. }
  86. return isValid;
  87. },
  88. /**
  89. * Disable and enable payment methods
  90. * @private
  91. */
  92. _disablePaymentMethods: function () {
  93. var tmpl = mageTemplate(this.options.tmpl, {
  94. data: {}
  95. });
  96. this.element.find('input[name="payment[method]"]').prop('disabled', true).end()
  97. .find('input[id^="use"][name^="payment[use"]:not(:checked)').prop('disabled', true).parent().hide();
  98. this.element.find('[name="payment[method]"][value="free"]').parent('dt').remove();
  99. this.element.find(this.options.methodsContainer).hide().find('[name^="payment["]').prop('disabled', true);
  100. $(tmpl).appendTo(this.element);
  101. },
  102. /**
  103. * Enable and enable payment methods
  104. * @private
  105. */
  106. _enablePaymentMethods: function () {
  107. this.element.find('input[name="payment[method]"]').prop('disabled', false).end()
  108. .find('dt input:radio:checked').trigger('click').end()
  109. .find('input[id^="use"][name^="payment[use"]:not(:checked)').prop('disabled', false).parent().show();
  110. this.element.find(this.options.methodsContainer).show();
  111. },
  112. /**
  113. * Returns checked payment method.
  114. *
  115. * @private
  116. */
  117. _getSelectedPaymentMethod: function () {
  118. return this.element.find('input[name=\'payment[method]\']:checked');
  119. },
  120. /**
  121. * Validate before form submit
  122. * @private
  123. * @param {EventObject} e
  124. */
  125. _submitHandler: function (e) {
  126. var currentMethod,
  127. submitButton;
  128. e.preventDefault();
  129. if (this._validatePaymentMethod()) {
  130. currentMethod = this._getSelectedPaymentMethod();
  131. submitButton = currentMethod.parent().next('dd').find('button[type=submit]');
  132. if (submitButton.length) {
  133. submitButton.first().trigger('click');
  134. } else {
  135. this.element.submit();
  136. }
  137. }
  138. }
  139. });
  140. return $.mage.payment;
  141. });