├── .gitignore ├── skin └── frontend │ └── base │ └── default │ ├── images │ └── requestautocomplete │ │ └── spinner.gif │ └── css │ └── requestautocomplete │ └── checkout.css ├── modman ├── app ├── etc │ └── modules │ │ └── Checkout_RequestAutocomplete.xml ├── design │ └── frontend │ │ └── base │ │ └── default │ │ └── layout │ │ └── requestautocomplete.xml └── code │ └── community │ └── Checkout │ └── RequestAutocomplete │ └── etc │ └── config.xml ├── README.md ├── LICENSE └── js └── requestautocomplete └── checkout.js /.gitignore: -------------------------------------------------------------------------------- 1 | compiler.jar 2 | jsdocconf.json 3 | node_modules/ 4 | out/ 5 | output/ 6 | -------------------------------------------------------------------------------- /skin/frontend/base/default/images/requestautocomplete/spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chromium/requestautocomplete-magento-extension/HEAD/skin/frontend/base/default/images/requestautocomplete/spinner.gif -------------------------------------------------------------------------------- /modman: -------------------------------------------------------------------------------- 1 | app/code/community/Checkout/RequestAutocomplete app/code/community/Checkout/RequestAutocomplete 2 | app/design/frontend/base/default/layout/requestautocomplete.xml app/design/frontend/base/default/layout/requestautocomplete.xml 3 | app/etc/modules/Checkout_RequestAutocomplete.xml app/etc/modules/Checkout_RequestAutocomplete.xml 4 | js/requestautocomplete js/requestautocomplete 5 | skin/frontend/base/default/css/requestautocomplete skin/frontend/base/default/css/requestautocomplete 6 | skin/frontend/base/default/images/requestautocomplete skin/frontend/base/default/images/requestautocomplete 7 | -------------------------------------------------------------------------------- /app/etc/modules/Checkout_RequestAutocomplete.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | true 21 | community 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /app/design/frontend/base/default/layout/requestautocomplete.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /app/code/community/Checkout/RequestAutocomplete/etc/config.xml: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 0.0.1 21 | 22 | 23 | 24 | 25 | 26 | 27 | requestautocomplete.xml 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /skin/frontend/base/default/css/requestautocomplete/checkout.css: -------------------------------------------------------------------------------- 1 | /* Copyright 2014 Google Inc. All rights reserved. 2 | * 3 | * Licensed under the Apache License, Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. */ 14 | 15 | #filling-overlay { 16 | background: rgba(0, 0, 0, .5); 17 | height: 100%; 18 | left: 0; 19 | opacity: 1; 20 | position: fixed; 21 | top: 0; 22 | width: 100%; 23 | z-index: 999; 24 | } 25 | 26 | #filling-message { 27 | background: white; 28 | border-radius: 5px; 29 | color: black; 30 | display: inline-block; 31 | font-size: 24px; 32 | line-height: 100px; 33 | left: 50%; 34 | margin: -50px 0 0 -150px; 35 | position: absolute; 36 | text-align: center; 37 | top: 50%; 38 | width: 300px; 39 | } 40 | 41 | #filling-message::before { 42 | content: url(../../images/requestautocomplete/spinner.gif); 43 | } 44 | 45 | .hide-sections .section:not(#opc-login) { 46 | display: none; 47 | } 48 | 49 | .rac-flow .section#opc-shipping_method, 50 | .rac-flow .section#opc-review { 51 | display: block; 52 | } 53 | 54 | .rac-flow .step-title .number { 55 | display: none; 56 | } 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### What 2 | 3 | This is an extension to integrate [`requestAutocomplete`](https://developer.chrome.com/multidevice/requestautocomplete-faq) into Magento's 4 | checkout flow. 5 | 6 | To enable this extension, copy all directories into the root of your Magento 7 | installation. 8 | 9 | You can install with [`modman`](https://github.com/colinmollenhour/modman) or via these shell commands if you're on a POSIX system: 10 | 11 | ```shell 12 | git clone https://github.com/chromium/requestautocomplete-magento-extension.git /tmp/rac-magento-ext/ 13 | mv -i /tmp/rac-magento-ext/ $MAGENTO_DIR && rm -rf /tmp/rac-magento-ext/ 14 | ``` 15 | 16 | ### How 17 | 18 | #### Integrating into the existing Magento checkout flow 19 | 20 | To enable the `requestAutocomplete` enhanced checkout flow on your store, you 21 | need to add this JavaScript to your one page checkout: 22 | 23 | ```js 24 | requestAutocomplete.enable(); 25 | ``` 26 | 27 | This should automatically integrate `requestAutocomplete` into your checkout 28 | flow. Your shipping, billing, and payment checkout steps should now be hidden, 29 | effectively replaced by the requestAutocomplete dialog. 30 | 31 | When the user selects "Checkout as guest" and clicks "Continue", a native 32 | browser UI should show asking for their payment/shipping details. 33 | 34 | #### Creating your own custom `requestAutocomplete` flow 35 | 36 | If you'd like to trigger `requestAutocomplete` in a custom way (e.g., directly 37 | from the cart page when the user presses "Checkout Now"). The code might look 38 | like this: 39 | 40 | ```js 41 | function success(result) { 42 | // Success! The user gave us their payment info in the form of: 43 | // result = { 44 | // 'cc-name': 'Big Spenda', 45 | // 'billing postal-code': '90210', 46 | // 'shipping city': 'Hollywood', 47 | // ... and many more ... 48 | // } 49 | } 50 | 51 | function failure(reason) { 52 | // Oh no! The user cancelled the requestAutocomplete UI or it wasn't 53 | // shown in the right way. The reason parameter can be: 54 | // 'cancel' => user cancelled 55 | // 'disabled' => see the development console for more details 56 | // 'unsupported' => the current browser doesn't support requestAutocomplete 57 | } 58 | 59 | var types = [ 60 | 'cc-csc', 61 | 'cc-name', 62 | 'cc-number' 63 | ]; 64 | 65 | requestAutocomplete.run(success, failure, types); 66 | ``` 67 | 68 | ### Docs 69 | 70 | #### *boolean* `requestAutocomplete.enable()` 71 | 72 | Integrates `requestAutocomplete` into the Magento checkout flow if supported. 73 | Returns a boolean indicating whether the Magento `requestAutocomplete` flow is 74 | now enabled. Returns false if the Magento version isn't supported or if the 75 | user's browser doesn't have `requestAutocomplete`. 76 | 77 | -------------------------------------------------------------------------------- 78 | 79 | #### `requestAutocomplete.run(success, failure, types)` 80 | 81 | A way to manually trigger `requestAutocomplete` for customized checkout flows. 82 | 83 | Parameter|Type|Description 84 | ---------|----|----------- 85 | **success**|*function(Object)*|Callback for successful `requestAutocomplete` runs. Receives a result map of autocomplete type => value. 86 | **failure**|*function(string)*|An optional callback for requestAutocomplete` errors. Receives a string reason for the failure (e.g., "cancel"). 87 | **types**|*!Array.*|A list of [autocomplete] types to request. 88 | 89 | -------------------------------------------------------------------------------- 90 | 91 | #### *boolean* `requestAutocomplete.isBrowserSupported()` 92 | 93 | Whether the current browser supports `requestAutocomplete`. 94 | 95 | -------------------------------------------------------------------------------- 96 | 97 | #### *boolean* `requestAutocomplete.isMagentoSupported()` 98 | 99 | Whether the current Magento environment supports the `requestAutocomplete` 100 | enhanced checkout flow. This depends on whether parts of Magento's JavaScript 101 | API are present on the checkout page. 102 | 103 | -------------------------------------------------------------------------------- 104 | 105 | #### `requestAutocomplete.disable()` 106 | 107 | Disables the `requestAutocomplete` Magento flow and unhides all checkout 108 | sections. Does not hide any currently showing `requestAutocomplete` UI. 109 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /js/requestautocomplete/checkout.js: -------------------------------------------------------------------------------- 1 | // Copyright 2014 Google Inc. All rights reserved. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | /** 15 | * @fileoverview An API to integrate requestAutocomplete() w/ Magento checkout. 16 | * @author dbeam@chromium.org (Dan Beam) 17 | */ 18 | window['requestAutocomplete'] = (function() { 19 | 20 | 21 | //////////////////////////////////////////////////////////////////////////////// 22 | // Static functions 23 | 24 | /** 25 | * Local alias for document.getElementById. 26 | * @param {string} id An ID to search for. 27 | * @return {Element} An element with |id| or null if not found. 28 | */ 29 | var $ = function(id) { return document.getElementById(id); }; 30 | 31 | 32 | /** 33 | * Adds a static |getInstance()| method that always returns the same instance. 34 | * @param {!Function} ctor Class constructor to add |getInstance()| to. 35 | */ 36 | function addSingletonGetter(ctor) { 37 | ctor.getInstance = function() { 38 | return ctor.instance_ || (ctor.instance_ = new ctor()); 39 | }; 40 | } 41 | 42 | 43 | /** 44 | * @param {HTMLFormElement} form A form to extract results from. 45 | * @return {Object} An object form of the fields in |form|. 46 | */ 47 | function getResultFromForm(form) { 48 | var name = {'billing': [], 'shipping': []}; 49 | var result = {}; 50 | 51 | for (var i = 0; i < form.childNodes.length; ++i) { 52 | var field = form.childNodes[i]; 53 | var type = field.getAttribute('autocomplete'); 54 | var tokens = type.split(' '); 55 | var section = tokens.length > 1 ? tokens[0] : ''; 56 | 57 | // See http://crbug.com/241886 for why this code splits names. 58 | if (type == section + ' name') 59 | name[section] = field.value.split(' '); 60 | 61 | var value = field.value; 62 | 63 | if (type == 'billing country' && value.length > 2) // http://crbug.com/382777 64 | value = 'US'; 65 | else if (!value && type == section + ' given-name') 66 | value = name[section][0] || ''; 67 | else if (!value && type == section + ' family-name') 68 | value = name[section].slice(1).join(' '); 69 | 70 | result[type] = value; 71 | } 72 | 73 | return result; 74 | } 75 | 76 | 77 | //////////////////////////////////////////////////////////////////////////////// 78 | // Support 79 | 80 | /** 81 | * A helper to determine whether a browser or Magento environment is supported. 82 | */ 83 | var Support = { 84 | /** 85 | * Required Magento API globals required for a MagentoFlow to work. 86 | * @private 87 | * @const 88 | */ 89 | requiredMagentoMethods_: [ 90 | 'billing.nextStep', 91 | 'billing.save', 92 | 'billingRegionUpdater.update', 93 | 'checkout.setMethod', 94 | 'payment.onSave', 95 | 'payment.save', 96 | 'payment.switchMethod', 97 | 'shipping.nextStep', 98 | 'shipping.save', 99 | 'shippingMethod.onSave', 100 | 'shippingMethod.save', 101 | 'shippingRegionUpdater.update', 102 | 'Validation' 103 | ], 104 | 105 | /** 106 | * @return {boolean} Whether the current Magento environment is supported. 107 | */ 108 | isMagentoSupported: function() { 109 | for (var i = 0; i < this.requiredMagentoMethods_.length; ++i) { 110 | var props = this.requiredMagentoMethods_[i].split('.'); 111 | var global = window[props[0]]; 112 | if (!global || (props[1] && !global[props[1]])) 113 | return false; 114 | } 115 | return true; 116 | }, 117 | 118 | /** 119 | * @return {boolean} Whether the current browser is supported. 120 | */ 121 | isBrowserSupported: function() { 122 | return 'requestAutocomplete' in document.createElement('form'); 123 | } 124 | }; 125 | 126 | 127 | //////////////////////////////////////////////////////////////////////////////// 128 | // Overlay 129 | 130 | /** 131 | * An overlay that shows while a MagentoFlow is progressing. 132 | * @constructor 133 | */ 134 | function Overlay() {} 135 | 136 | addSingletonGetter(Overlay); 137 | 138 | 139 | /** Creates an overlay element and shows it. */ 140 | Overlay.prototype.open = function() { 141 | if (!this.overlay_) { 142 | this.overlay_ = document.createElement('div'); 143 | this.overlay_.className = 'window-overlay active'; 144 | this.overlay_.id = 'filling-overlay'; 145 | 146 | var message = document.createElement('div'); 147 | message.id = 'filling-message'; 148 | message.innerText = message.textContent = ' Checking out...'; 149 | this.overlay_.appendChild(message); 150 | } 151 | document.body.appendChild(this.overlay_); 152 | }; 153 | 154 | 155 | /** Hides the overlay and removes it from the DOM. */ 156 | Overlay.prototype.close = function() { 157 | if (this.overlay_ && this.overlay_.parentNode) 158 | this.overlay_.parentNode.removeChild(this.overlay_); 159 | }; 160 | 161 | 162 | Overlay.open = function() { 163 | Overlay.getInstance().open(); 164 | }; 165 | 166 | 167 | Overlay.close = function() { 168 | Overlay.getInstance().close(); 169 | }; 170 | 171 | 172 | //////////////////////////////////////////////////////////////////////////////// 173 | // MagentoFlow 174 | 175 | /** @constructor */ 176 | function MagentoFlow() {} 177 | 178 | addSingletonGetter(MagentoFlow); 179 | 180 | 181 | /** 182 | * CSS selector of potential register buttons (i.e. where the flow starts). 183 | * @const 184 | */ 185 | var REGISTER_SELECTOR = '#onepage-guest-register-button, ' + 186 | '#checkout-step-login .col-1 button'; 187 | 188 | 189 | /** 190 | * Selectors of elements that should trigger rAc() when clicked. 191 | * @type {!Array.<{selector: string, test: (!Function|undefined)}>} 192 | */ 193 | MagentoFlow.prototype.clickTriggers_ = [ 194 | { 195 | selector: REGISTER_SELECTOR, 196 | test: function() { 197 | var guest = $('login:guest'); 198 | return guest && guest.checked; 199 | } 200 | }, 201 | 202 | // If requestAutocomplete returns invalid info, run it again when the user 203 | // clicks "Change" in section summaries so it'll be right the next time. 204 | { 205 | selector: '#billing-progress-opcheckout .changelink a' 206 | }, 207 | { 208 | selector: '#shipping-progress-opcheckout .changelink a' 209 | }, 210 | { 211 | selector: '#payment-progress-opcheckout .changelink a' 212 | }, 213 | 214 | // These steps are usually hidden but site author might override this. 215 | { 216 | selector: '#opc-billing.allow .step-title' 217 | }, 218 | { 219 | selector: '#opc-shipping.allow .step-title' 220 | }, 221 | { 222 | selector: '#opc-payment.allow .step-title' 223 | }, 224 | 225 | { 226 | selector: '#shipping-method-buttons-container button' 227 | } 228 | ]; 229 | 230 | 231 | /** 232 | * [autocomplete] types that are added to the rAc()
. 233 | * @const 234 | */ 235 | MagentoFlow.prototype.addedAutocompleteTypes_ = [ 236 | // The payment is not renderer when the flow starts. Add a set of cc-* 237 | // fields and remember the result so the payment section can be filled later. 238 | 'cc-csc', 239 | 'cc-exp-month', 240 | 'cc-exp-year', 241 | 'cc-name', 242 | 'cc-number', 243 | 'cc-type',, 244 | 245 | // Certain versions of Chrome only fill whole name whereas Magento asks for 246 | // first/last name. Split the whole name ourselves if we must. 247 | 'billing name', 248 | 'shipping name' 249 | ]; 250 | 251 | 252 | /** 253 | * A map of Magento's billing/shipping input[name] to [autocomplete] equivalent. 254 | */ 255 | MagentoFlow.prototype.billingAndShippingNameTypeMap_ = { 256 | 'firstname': 'given-name', 257 | 'lastname': 'family-name', 258 | 'company': 'organization', 259 | 'email': 'email', 260 | // NOTE: street address lines are handled separately. 261 | 'city': 'locality', 262 | 'region': 'region', 263 | 'region_id': 'region', 264 | 'postcode': 'postal-code', 265 | 'country_id': 'country', 266 | 'telephone': 'tel' 267 | // TODO: support fax? 268 | }; 269 | 270 | 271 | /** 272 | * Payment methods currently supported by this extension. 273 | * @const 274 | */ 275 | MagentoFlow.prototype.paymentMethods_ = [ 276 | 'authnetcim', 277 | 'authorizenet', 278 | 'ccsave' 279 | ]; 280 | 281 | 282 | /** 283 | * A list of credit card fields shared by most Magento payment forms. 284 | * @type {!Array.<{idSuffix: string, type: string, valueMap: (Object|undefined), 285 | * normalizer: (function(string):string|undefined)}>} 286 | */ 287 | MagentoFlow.prototype.paymentFormFields_ = [ 288 | { 289 | idSuffix: 'cc_cid', 290 | type: 'cc-csc' 291 | }, 292 | { 293 | idSuffix: 'cc_number', 294 | type: 'cc-number' 295 | }, 296 | { 297 | idSuffix: 'cc_owner', 298 | type: 'cc-name' 299 | }, 300 | { 301 | idSuffix: 'cc_type', 302 | type: 'cc-type', 303 | valueMap: { 304 | 'Visa': 'VI', 305 | 'MasterCard': 'MC', 306 | 'American Express': 'AE', 307 | 'Discover': 'DI' 308 | } 309 | }, 310 | { 311 | idSuffix: 'expiration', 312 | type: 'cc-exp-month', 313 | normalizer: function(val) { 314 | // Normalizes number-like month values (e.g., '1', '01', ' 1' => '1'). 315 | return parseInt(val, 10); 316 | } 317 | }, 318 | { 319 | idSuffix: 'expiration_yr', 320 | type: 'cc-exp-year' 321 | } 322 | ]; 323 | 324 | 325 | /** 326 | * Integrates requestAutocomplete into the Magento checkout flow. 327 | * @return {boolean} Whether the flow is supported on this page. 328 | */ 329 | MagentoFlow.prototype.enable = function() { 330 | if (!this.isSupported_()) 331 | return false; 332 | 333 | this.boundOnClick_ = this.onClick_.bind(this); 334 | document.addEventListener('click', this.boundOnClick_, true); 335 | 336 | document.body.classList.add('hide-sections'); 337 | if (this.getCurrentStep_() != 'login') 338 | document.body.classList.add('rac-flow'); 339 | 340 | return true; 341 | }; 342 | 343 | 344 | /** 345 | * Disable the rAc() Magento flow and reshow checkout sections. Does not hide 346 | * rAc() UI if already showing. 347 | */ 348 | MagentoFlow.prototype.disable = function() { 349 | if (!this.isSupported_()) 350 | return; 351 | 352 | document.removeEventListener('click', this.boundOnClick_, true); 353 | delete this.boundOnClick_; 354 | 355 | this.abortFlow_(); 356 | }; 357 | 358 | 359 | /** @param {!Event} e A click event. */ 360 | MagentoFlow.prototype.onClick_ = function(e) { 361 | var isTrigger = false; 362 | var target = e.target; 363 | 364 | for (var i = 0; i < this.clickTriggers_.length; ++i) { 365 | var trigger = this.clickTriggers_[i]; 366 | var el = document.querySelector(trigger.selector); 367 | if (el && el.contains(target) && (!trigger.test || trigger.test(target))) { 368 | isTrigger = true; 369 | break; 370 | } 371 | } 372 | 373 | if (!isTrigger) { 374 | var registerButton = document.querySelector(REGISTER_SELECTOR); 375 | if (registerButton && registerButton.contains(target)) 376 | this.abortFlow_(); 377 | return; 378 | } 379 | 380 | e.preventDefault(); 381 | e.stopPropagation(); 382 | 383 | var shippingMethodContainer = $('shipping-method-buttons-container'); 384 | if (shippingMethodContainer && shippingMethodContainer.contains(target)) { 385 | this.startFlow_(); 386 | return; 387 | } 388 | 389 | // Create a form with all the needed fields to only invoke rAc() once. 390 | this.racForm_ = document.createElement('form'); 391 | 392 | for (var i = 0; i < this.addedAutocompleteTypes_.length; ++i) { 393 | var input = document.createElement('input') 394 | input.setAttribute('autocomplete', this.addedAutocompleteTypes_[i]); 395 | this.racForm_.appendChild(input); 396 | } 397 | 398 | this.addFieldsFromSection_(billing); 399 | this.addFieldsFromSection_(shipping); 400 | 401 | this.racForm_.onautocomplete = this.onAutocomplete_.bind(this); 402 | this.racForm_.onautocompleteerror = this.onAutocompleteerror_.bind(this); 403 | 404 | this.racForm_.requestAutocomplete(); 405 | }; 406 | 407 | 408 | /** 409 | * Shows the normal Magento flow (e.g., the non-rAc() flow). 410 | */ 411 | MagentoFlow.prototype.abortFlow_ = function() { 412 | document.body.classList.remove('rac-flow', 'hide-sections'); 413 | Overlay.close(); 414 | }; 415 | 416 | 417 | /** @return {?string} The current checkout step or null if none. */ 418 | MagentoFlow.prototype.getCurrentStep_ = function() { 419 | // Newer versions of Magento have the current step available as part of the 420 | // public API. If this is present, use it. 421 | if (checkout.currentStep) 422 | return checkout.currentStep; 423 | 424 | // Else derive the current step from the DOM. 425 | var activeSection = document.querySelector('.section.active'); 426 | if (activeSection) 427 | return activeSection.id.replace(/^opc-/, ''); 428 | 429 | return null; 430 | }; 431 | 432 | 433 | /** 434 | * Starts/resumes the rAc() checkout flow. 435 | */ 436 | MagentoFlow.prototype.startFlow_ = function() { 437 | var section; 438 | switch (this.getCurrentStep_()) { 439 | case 'billing': 440 | section = billing; 441 | break; 442 | case 'shipping': 443 | section = shipping; 444 | break; 445 | case 'shipping_method': 446 | section = shippingMethod; 447 | break; 448 | case 'payment': 449 | section = payment; 450 | break; 451 | default: 452 | this.abortFlow_(); 453 | return; 454 | } 455 | 456 | if (!this.isSectionValid_(section)) { 457 | this.abortFlow_(); 458 | return; 459 | } 460 | 461 | var onSaveSection = section == shippingMethod || section == payment; 462 | var methodToReplace = onSaveSection ? 'onSave' : 'nextStep'; 463 | 464 | var origMethod = section[methodToReplace]; 465 | section[methodToReplace] = function(response) { 466 | var parsed = {}; 467 | try { parsed = JSON.parse(response.responseText); } catch(e) {} 468 | 469 | if (parsed.error) // Show the section before alert() is called. 470 | this.abortFlow_(); 471 | 472 | var previousStep = this.getCurrentStep_(); 473 | 474 | origMethod.apply(section, arguments); 475 | section[methodToReplace] = origMethod; 476 | 477 | var currentStep = this.getCurrentStep_(); 478 | if (previousStep == currentStep || 479 | (currentStep == 'payment' && !this.fillPaymentForm_())) { 480 | // There was some kind of error. Revert to the non-rAc() flow. 481 | this.abortFlow_(); 482 | return; 483 | } 484 | 485 | if (currentStep == 'payment' || currentStep == 'shipping') 486 | setTimeout(this.startFlow_.bind(this)); // Auto-advance to next section. 487 | else 488 | Overlay.close(); // Sections that require user input. 489 | }.bind(this); 490 | 491 | Overlay.open(); 492 | document.body.classList.add('hide-sections', 'rac-flow'); 493 | 494 | section.save(); 495 | }; 496 | 497 | 498 | /** 499 | * @param {!Object} section A possibly valid Magento section object. 500 | * @return {boolean} Whether |section| is valid; 501 | */ 502 | MagentoFlow.prototype.isSectionValid_ = function(section) { 503 | if (section.validate) 504 | return section.validate(); 505 | 506 | return new Validation(section.form).validate(); 507 | }; 508 | 509 | 510 | /** @return {boolean} Whether filling succeeded. */ 511 | MagentoFlow.prototype.fillPaymentForm_ = function() { 512 | for (var i = 0; i < this.paymentMethods_.length; ++i) { 513 | var method = this.paymentMethods_[i]; 514 | var methodRadio = $('p_method_' + method); 515 | if (!methodRadio || !$('payment_form_' + method)) 516 | continue; 517 | 518 | payment.switchMethod(method); 519 | if (payment.currentMethod != method) 520 | continue; 521 | 522 | methodRadio.checked = true; 523 | 524 | for (var j = 0; j < this.paymentFormFields_.length; ++j) { 525 | var field = this.paymentFormFields_[j]; 526 | var el = $(method + '_' + field.idSuffix); 527 | if (!el) 528 | continue; 529 | 530 | var type = field.type; 531 | var value = this.result_[type]; 532 | 533 | if (field.normalizer) 534 | value = field.normalizer(value); 535 | 536 | if (field.valueMap) 537 | value = field.valueMap[value]; 538 | 539 | el.value = value || ''; 540 | } 541 | 542 | return true; 543 | } 544 | 545 | return false; 546 | } 547 | 548 | 549 | /** 550 | * @param {Object} section A Magento section (e.g., shippingMethod). 551 | * @return {string} Name of the Magento section. 552 | * @private 553 | */ 554 | MagentoFlow.prototype.getNameOfSection_ = function(section) { 555 | return section.form.replace(/^co-|-form$/g, ''); 556 | }; 557 | 558 | 559 | /** 560 | * @param {Object} section A part of the Magento checkout flow (e.g., shipping). 561 | * @return {NodeList} A list of fields from |section|. 562 | */ 563 | MagentoFlow.prototype.getFieldsFromSection_ = function(section) { 564 | var name = this.getNameOfSection_(section); 565 | return $(section.form).querySelectorAll('[name^=' + name + '\\[]'); 566 | }; 567 | 568 | 569 | /** 570 | * Adds form fields from |section| into |form| so they can be filled. 571 | * @param {Object} section The section of the checkout flow (e.g., shipping). 572 | */ 573 | MagentoFlow.prototype.addFieldsFromSection_ = function(section) { 574 | var sectionName = this.getNameOfSection_(section); 575 | if (!(sectionName == 'billing' || sectionName == 'shipping')) 576 | return; 577 | 578 | var addressLine = 1; 579 | $(section.form).reset(); 580 | 581 | var fields = this.getFieldsFromSection_(section); 582 | for (var i = 0; i < fields.length; ++i) { 583 | var field = fields[i]; 584 | 585 | // Parse PHP $_POST inputs (e.g., -> "name"). 586 | var name = field.getAttribute('name'); 587 | name = name.slice(name.indexOf('[') + 1, name.indexOf(']')); 588 | 589 | var type; 590 | if (name == 'street') { 591 | // Special case street address array input (e.g., section[street][]). 592 | type = 'address-line' + addressLine; 593 | addressLine++; 594 | } else { 595 | type = this.billingAndShippingNameTypeMap_[name]; 596 | } 597 | if (!type) 598 | continue; 599 | 600 | // Prepend the section to the type (e.g., 'shipping ' + 'name'). 601 | type = sectionName + ' ' + type; 602 | 603 | var clone = field.cloneNode(true); 604 | clone.setAttribute('autocomplete', type); 605 | 606 | // A mapping to source input for faster/easier filling after rAc() has run. 607 | clone.__sourceInput__ = field; 608 | 609 | this.racForm_.appendChild(clone); 610 | } 611 | }; 612 | 613 | 614 | /** 615 | * Handles autocomplete events (e.g., successfully rAc() runs). 616 | * @private 617 | */ 618 | MagentoFlow.prototype.onAutocomplete_ = function(e) { 619 | this.result_ = getResultFromForm(this.racForm_); 620 | 621 | for (var i = 0; i < this.racForm_.childNodes.length; ++i) { 622 | var field = this.racForm_.childNodes[i]; 623 | if (!field.__sourceInput__) 624 | continue; 625 | 626 | var value = this.result_[field.getAttribute('autocomplete')]; 627 | if (value) 628 | field.__sourceInput__.value = value; 629 | 630 | delete field.__sourceInput__; 631 | } 632 | 633 | checkout.setMethod(); 634 | 635 | billingRegionUpdater.update(); 636 | shippingRegionUpdater.update(); 637 | 638 | shipping.setSameAsBilling(false); 639 | ($('billing:use_for_shipping_yes') || {}).checked = false; 640 | 641 | this.startFlow_(); 642 | }; 643 | 644 | 645 | /** 646 | * Handles autocompleteerror events (e.g., a failed rAc() run). 647 | * @param {Event} e An autocompleteerror event. 648 | * @private 649 | */ 650 | MagentoFlow.prototype.onAutocompleteerror_ = function(e) { 651 | if (e.reason == 'cancel') { 652 | // Don't abort the flow on a cancel. 653 | return; 654 | } 655 | 656 | this.abortFlow_(); 657 | 658 | // Start the checkout flow (the original click that would've was halted). 659 | checkout.setMethod(); 660 | }; 661 | 662 | 663 | /** 664 | * @return {boolean} Whether the flow is supported. 665 | * @private 666 | */ 667 | MagentoFlow.prototype.isSupported_ = function() { 668 | return Support.isBrowserSupported() && Support.isMagentoSupported(); 669 | }; 670 | 671 | 672 | /** @return {boolean} Whether enabling the flow succeeded. */ 673 | MagentoFlow.enable = function() { 674 | return MagentoFlow.getInstance().enable(); 675 | }; 676 | 677 | 678 | MagentoFlow.disable = function() { 679 | MagentoFlow.getInstance().disable(); 680 | }; 681 | 682 | 683 | //////////////////////////////////////////////////////////////////////////////// 684 | // CustomFlow 685 | 686 | /** 687 | * A way to manually trigger requestAutocomplete() for custom flows. 688 | * @param {function(Object)} success Callback for successful rAc() runs. 689 | * @param {function(string)} failure Callback for rAc() errors. 690 | * @constructor 691 | */ 692 | function CustomFlow(success, failure) { 693 | /** 694 | * @type {!Function} 695 | * @private 696 | */ 697 | this.success_ = success; 698 | 699 | /** 700 | * @type {!Function} 701 | * @private 702 | */ 703 | this.failure_ = failure; 704 | } 705 | 706 | 707 | /** 708 | * Builds a and invokes requestAutocomplete() on it. Results are passed 709 | * to the callbacks in |this.options_|. 710 | * @param {!Array.} types A list of [autocomplete] types to request. 711 | */ 712 | CustomFlow.prototype.run = function(types) { 713 | if (!Support.isBrowserSupported()) { 714 | this.gotResult_(false, 'unsupported'); 715 | return; 716 | } 717 | 718 | this.racForm_ = document.createElement('form'); 719 | 720 | for (var i = 0; i < types.length; ++i) { 721 | var input = document.createElement('input'); 722 | input.autocomplete = types[i]; 723 | this.racForm_.appendChild(input); 724 | } 725 | 726 | this.racForm_.onautocomplete = this.onAutocomplete_.bind(this); 727 | this.racForm_.onautocompleteerror = this.onAutocompleteerror_.bind(this); 728 | 729 | this.racForm_.requestAutocomplete(); 730 | }; 731 | 732 | 733 | /** @param {Event} e An autocomplete event. */ 734 | CustomFlow.prototype.onAutocomplete_ = function(e) { 735 | this.gotResult_(true, getResultFromForm(this.racForm_)); 736 | }; 737 | 738 | 739 | /** @param {Event} e An autocompleteerror event. */ 740 | CustomFlow.prototype.onAutocompleteerror_ = function(e) { 741 | this.gotResult_(false, e.reason); 742 | }; 743 | 744 | 745 | /** 746 | * @param {boolean} success Whether rAc() ran successfully. 747 | * @param {Object} result The result to return to the callback. 748 | */ 749 | CustomFlow.prototype.gotResult_ = function(success, result) { 750 | (success ? this.success_ : this.failure_)(result); 751 | }; 752 | 753 | 754 | /** 755 | * The public API. Keys are 'quoted' to remain unchanged if closure compiled. 756 | */ 757 | return { 758 | /** 759 | * Disable the rAc() Magento flow and reshow checkout sections. Does not hide 760 | * rAc() UI if already showing. 761 | * @see MagentoFlow.disable 762 | */ 763 | 'disable': function() { 764 | MagentoFlow.disable(); 765 | }, 766 | 767 | /** 768 | * Integrates requestAutocomplete into the Magento checkout flow. 769 | * @return {boolean} Whether enabling the Magento rAc() flow succeeded. 770 | * @see MagentoFlow.enable 771 | */ 772 | 'enable': function() { 773 | return MagentoFlow.enable(); 774 | }, 775 | 776 | /** 777 | * @return {boolean} Whether the current browser is supported. 778 | * @see Support.isBrowserSupported 779 | */ 780 | 'isBrowserSupported': function() { 781 | return Support.isBrowserSupported(); 782 | }, 783 | 784 | /** 785 | * @return {boolean} Whether the current Magento environment is supported. 786 | * @see Support.isMagentoSupported 787 | */ 788 | 'isMagentoSupported': function() { 789 | return Support.isMagentoSupported(); 790 | }, 791 | 792 | /** 793 | * A way to manually trigger requestAutocomplete() for custom flows. 794 | * @param {function(Object)} success Callback for successful rAc() runs. 795 | * Called with a result map of autocomplete type => value. 796 | * @param {function(string)} failure Callback for rAc() errors. 797 | * @param {!Array.} types A list of [autocomplete] types to request. 798 | * @see CustomFlow 799 | */ 800 | 'run': function(success, failure, types) { 801 | new CustomFlow(success, failure).run(types); 802 | } 803 | }; 804 | 805 | 806 | }()); 807 | --------------------------------------------------------------------------------