amazon-button.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. /**
  2. * Copyright 2016 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License").
  5. * You may not use this file except in compliance with the License.
  6. * A copy of the License is located at
  7. *
  8. * http://aws.amazon.com/apache2.0
  9. *
  10. * or in the "license" file accompanying this file. This file is distributed
  11. * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
  12. * express or implied. See the License for the specific language governing
  13. * permissions and limitations under the License.
  14. */
  15. define([
  16. 'jquery',
  17. 'Magento_Customer/js/customer-data',
  18. 'Magento_Customer/js/section-config',
  19. 'Amazon_Payment/js/model/amazonPaymentConfig',
  20. 'amazonCsrf',
  21. 'modernizr/modernizr',
  22. 'amazonCore',
  23. 'jquery/ui',
  24. 'uiRegistry'
  25. ], function ($, customerData, sectionConfig, amazonPaymentConfig, amazonCsrf) {
  26. 'use strict';
  27. var _this;
  28. if (amazonPaymentConfig.isDefined()) {
  29. $.widget('amazon.AmazonButton', {
  30. options: {
  31. merchantId: null,
  32. buttonType: 'LwA',
  33. buttonColor: 'Gold',
  34. buttonSize: 'medium',
  35. redirectUrl: null,
  36. loginPostUrl: null
  37. },
  38. /**
  39. * Create button
  40. */
  41. _create: function () {
  42. _this = this;
  43. this._verifyAmazonConfig();
  44. if (typeof OffAmazonPayments === 'undefined') {
  45. // async render
  46. $(window).on('OffAmazonPayments', $.proxy(function () {
  47. this._renderAmazonButton();
  48. }, this));
  49. } else {
  50. this._renderAmazonButton();
  51. }
  52. },
  53. /**
  54. * Verify if checkout config is available
  55. * @private
  56. */
  57. _verifyAmazonConfig: function () {
  58. if (amazonPaymentConfig.isDefined()) {
  59. this.options.merchantId = amazonPaymentConfig.getValue('merchantId');
  60. this.options.buttonType = this.options.buttonType === 'LwA' ?
  61. amazonPaymentConfig.getValue('buttonTypeLwa') : amazonPaymentConfig.getValue('buttonTypePwa');
  62. this.options.buttonColor = amazonPaymentConfig.getValue('buttonColor');
  63. this.options.buttonSize = amazonPaymentConfig.getValue('buttonSize');
  64. this.options.redirectUrl = amazonPaymentConfig.getValue('redirectUrl');
  65. this.options.loginPostUrl = amazonPaymentConfig.getValue('loginPostUrl');
  66. this.options.loginScope = amazonPaymentConfig.getValue('loginScope');
  67. this.options.buttonLanguage = amazonPaymentConfig.getValue('displayLanguage');
  68. }
  69. },
  70. /**
  71. * Validate CSRF cookie and redirect to HTTPS
  72. */
  73. secureHttpsCallback: function (event) {
  74. var sections = sectionConfig.getAffectedSections(_this.options.loginPostUrl);
  75. if (!event.state || !amazonCsrf.isValid(event.state)) {
  76. window.location = amazonPaymentConfig.getValue('customerLoginPageUrl');
  77. return window.location;
  78. }
  79. // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
  80. if (!event.access_token || !!event.error) {
  81. window.location = amazonPaymentConfig.getValue('customerLoginPageUrl');
  82. return window.location;
  83. }
  84. if (sections) {
  85. customerData.invalidate(sections);
  86. }
  87. window.location = _this.options.redirectUrl + '?access_token=' + event.access_token;
  88. // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
  89. },
  90. /**
  91. * Use popup or redirect URI
  92. *
  93. * @return {String}
  94. */
  95. _popupCallback: function () {
  96. return _this.usePopUp() ? _this.secureHttpsCallback :
  97. amazonPaymentConfig.getValue('oAuthHashRedirectUrl');
  98. },
  99. /**
  100. * Are touch events available
  101. * (Supports both v2 and v3 Modernizr)
  102. * @returns {Boolean}
  103. * @private
  104. */
  105. _touchSupported: function () {
  106. //eslint-disable-next-line no-undef
  107. return Modernizr.touch !== undefined ? Modernizr.touch : Modernizr.touchevents;
  108. },
  109. /**
  110. * Should we use the pop up login flow?
  111. * - are we on an HTTPS page (required for popup)
  112. * - confirm we are not on the product detail page (items are added asynchronously to the cart,
  113. * hence popups will be blocked)
  114. * - confirm we are not using a touch device (redirect provides a better mobile experience)
  115. * @returns {Boolean}
  116. * @public
  117. */
  118. usePopUp: function () {
  119. return window.location.protocol === 'https:' && !$('body').hasClass('catalog-product-view') &&
  120. !this._touchSupported();
  121. },
  122. /**
  123. * onAmazonPaymentsReady
  124. * @private
  125. */
  126. _renderAmazonButton: function () {
  127. OffAmazonPayments.Button(this.element[0].id, this.options.merchantId, { //eslint-disable-line no-undef
  128. type: this.options.buttonType,
  129. color: this.options.buttonColor,
  130. size: this.options.buttonSize,
  131. language: this.options.buttonLanguage,
  132. /**
  133. * Authorization callback
  134. */
  135. authorization: function () {
  136. //eslint-disable-next-line no-undef
  137. amazon.Login.authorize(_this._getLoginOptions(), _this._popupCallback());
  138. }
  139. });
  140. $('.amazon-button-container .field-tooltip').fadeIn();
  141. },
  142. /**
  143. * Build login options
  144. * @returns {{scope: *, popup: *, state: *}}
  145. * @private
  146. */
  147. _getLoginOptions: function () {
  148. return {
  149. scope: this.options.loginScope,
  150. popup: this.usePopUp(),
  151. state: amazonCsrf.generateNewValue()
  152. };
  153. }
  154. });
  155. return $.amazon.AmazonButton;
  156. }
  157. });