vault.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. /*browser:true*/
  6. /*global define*/
  7. define([
  8. 'jquery',
  9. 'uiComponent',
  10. 'Magento_Ui/js/modal/alert'
  11. ], function ($, Class, alert) {
  12. 'use strict';
  13. return Class.extend({
  14. defaults: {
  15. $selector: null,
  16. selector: 'edit_form',
  17. $container: null
  18. },
  19. /**
  20. * Set list of observable attributes
  21. * @returns {exports.initObservable}
  22. */
  23. initObservable: function () {
  24. var self = this;
  25. self.$selector = $('#' + self.selector);
  26. self.$container = $('#' + self.container);
  27. self.$selector.on(
  28. 'setVaultNotActive.' + self.getCode(),
  29. function () {
  30. self.$selector.off('submitOrder.' + self.getCode());
  31. }
  32. );
  33. self._super();
  34. self.initEventHandlers();
  35. return self;
  36. },
  37. /**
  38. * Get payment code
  39. * @returns {String}
  40. */
  41. getCode: function () {
  42. return this.code;
  43. },
  44. /**
  45. * Init event handlers
  46. */
  47. initEventHandlers: function () {
  48. $(this.$container).find('[name="payment[token_switcher]"]')
  49. .on('click', this.selectPaymentMethod.bind(this));
  50. },
  51. /**
  52. * Select current payment token
  53. */
  54. selectPaymentMethod: function () {
  55. this.disableEventListeners();
  56. this.enableEventListeners();
  57. },
  58. /**
  59. * Enable form event listeners
  60. */
  61. enableEventListeners: function () {
  62. this.$selector.on('submitOrder.' + this.getCode(), this.submitOrder.bind(this));
  63. },
  64. /**
  65. * Disable form event listeners
  66. */
  67. disableEventListeners: function () {
  68. this.$selector.off('submitOrder');
  69. },
  70. /**
  71. * Pre submit for order
  72. * @returns {Boolean}
  73. */
  74. submitOrder: function () {
  75. this.$selector.validate().form();
  76. this.$selector.trigger('afterValidate.beforeSubmit');
  77. $('body').trigger('processStop');
  78. // validate parent form
  79. if (this.$selector.validate().errorList.length) {
  80. return false;
  81. }
  82. this.getPaymentMethodNonce();
  83. },
  84. /**
  85. * Place order
  86. */
  87. placeOrder: function () {
  88. this.$selector.trigger('realOrder');
  89. },
  90. /**
  91. * Send request to get payment method nonce
  92. */
  93. getPaymentMethodNonce: function () {
  94. var self = this;
  95. $('body').trigger('processStart');
  96. $.getJSON(self.nonceUrl, {
  97. 'public_hash': self.publicHash
  98. }).done(function (response) {
  99. self.setPaymentDetails(response.paymentMethodNonce);
  100. self.placeOrder();
  101. }).fail(function (response) {
  102. var failed = JSON.parse(response.responseText);
  103. self.error(failed.message);
  104. }).always(function () {
  105. $('body').trigger('processStop');
  106. });
  107. },
  108. /**
  109. * Store payment details
  110. * @param {String} nonce
  111. */
  112. setPaymentDetails: function (nonce) {
  113. this.createPublicHashSelector();
  114. this.$selector.find('[name="payment[public_hash]"]').val(this.publicHash);
  115. this.$container.find('#' + this.getNonceSelectorName()).val(nonce);
  116. },
  117. /**
  118. * Creates public hash selector
  119. */
  120. createPublicHashSelector: function () {
  121. var $input;
  122. if (this.$container.find('#' + this.getNonceSelectorName()).size() === 0) {
  123. $input = $('<input>').attr(
  124. {
  125. type: 'hidden',
  126. id: this.getNonceSelectorName(),
  127. name: 'payment[payment_method_nonce]'
  128. }
  129. );
  130. $input.appendTo(this.$container);
  131. $input.prop('disabled', false);
  132. }
  133. },
  134. /**
  135. * Show alert message
  136. * @param {String} message
  137. */
  138. error: function (message) {
  139. alert({
  140. content: message
  141. });
  142. },
  143. /**
  144. * Get selector name for nonce input
  145. * @returns {String}
  146. */
  147. getNonceSelectorName: function () {
  148. return 'nonce_' + this.getCode();
  149. }
  150. });
  151. });