/** * Get requestAutocomplete data. Can only be called as part of an interaction event * listener such as mouse up/down, click, key & touch. * * @param {{billing: boolean, shipping: boolean}} opts * If billing is true, credit card & billing address details will be requested. * If shipping is true, a shipping name & address will be requested. * @param {function(response:Object<string, string>)} callback [description] * You callback is passed a single response object in this format: * { * // May be an empty string (no error), or: * // unsupported - Browser doesn't support requestAutocomplete * // disabled - Browser supports requestAutocomplete but it's disabled or can't be called at this time * // cancel - The user aborted the process * // invalid - Some data may be incorrect/missing * 'err': String, * // The retrieved data, may be missing data on err * 'data': { * // Card data (if billing data requested) * 'cc': { * 'name': String, * 'number': String, * 'exp-month': String, * 'exp-year': String, * 'csc': String * } * // Billing address data (if billing data requested) * 'billing': { * 'email': String, * 'name': String, * 'tel': String, * 'address-line1': String, * 'address-line2': String, * 'locality': String, * 'region': String, * 'postal-code': String, * 'country': String * } * // Shipping data (if requested) * 'shipping': { * // same fields as billing * } * } * } * @return {void} * @example * requestUserData({ * billing: true, * shipping: true * }, function(response) { * if (response.err == 'cancel') { * // exit silently * return; * } * if (response.err) { * // fall back to normal form * window.location.href = '/normal-checkout-form/'; * return; * } * * // send response.data to your server, * // be sure to validate on the server too! * console.log(response.data); * }); */ function requestUserData(opts, callback) { var getBilling = opts.billing; var getShipping = opts.shipping; var form = document.createElement('form'); var dataToRequest = []; var inputs; var addressData = [ 'email', 'name', 'tel', 'address-line1', 'address-line2', 'locality', 'region', 'postal-code', 'country' ]; if (!form.requestAutocomplete) { callback({ err: 'unsupported', data: {} }); return; } if (getBilling) { dataToRequest.push( 'cc-name', 'cc-number', 'cc-exp-month', 'cc-exp-year', 'cc-csc' ); dataToRequest = dataToRequest.concat(addressData.map(function(item) { return 'billing ' + item; })); } if (getShipping) { dataToRequest = dataToRequest.concat(addressData.map(function(item) { return 'shipping ' + item; })); } inputs = dataToRequest.map(function(autocompleteVal) { var input = document.createElement('input'); input.autocomplete = autocompleteVal; form.appendChild(input); return input; }); function getData() { var data = {}; if (getBilling) { data.cc = {}; data.billing = {}; } if (getShipping) { data.shipping = {}; } inputs.forEach(function(input) { var type = input.autocomplete; if (type.slice(0,2) == 'cc') { data.cc[type.slice(3)] = input.value; } else if (type.slice(0,7) == 'billing') { data.billing[type.slice(8)] = input.value; } else if (type.slice(0,8) == 'shipping') { data.shipping[type.slice(9)] = input.value; } }); return data; } form.addEventListener('autocomplete', function() { callback({ data: getData() }); }); form.addEventListener('autocompleteerror', function(event) { callback({ err: event.reason, data: getData() }); }); form.requestAutocomplete(); }