@google-pay/button-react - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

dist/index.d.ts

@@ -38,2 +38,3 @@ /// <reference types="googlepay" />
     buttonSizeMode?: google.payments.api.ButtonSizeMode;
+    buttonLocale?: string;
 }
@@ -40,0 +41,0 @@

dist/index.es5.min.js

@@ -15,2 +15,2 @@ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).GooglePayButton=e(t.React)}(this,(function(t){"use strict";function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t),o=function(t,e){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */var i=function(){return(i=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function r(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{u(o.next(t))}catch(t){r(t)}}function s(t){try{u(o.throw(t))}catch(t){r(t)}}function u(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}u((o=o.apply(t,e||[])).next())}))}function a(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,o=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var s={};function u(t){var e=s[t];if(e)return e;var n=new Promise((function(e,n){var o=document.createElement("script");o.src=t,o.async=!0;var i=function(){e()},r=function(){o.removeEventListener("load",i),o.removeEventListener("error",r),delete s[t],o.remove(),n(new Error("Unable to load script "+t))};o.addEventListener("load",i),o.addEventListener("error",r),document.body.appendChild(o)}));return s[t]=n,n}var l=function(){function t(t){var e=this;this.handleClick=function(){return r(e,void 0,void 0,(function(){var t,e,n,o;return a(this,(function(i){switch(i.label){case 0:if(!(t=this.config))throw new Error("google-pay-button: Missing configuration");e=this.createLoadPaymentDataRequest(t),i.label=1;case 1:return i.trys.push([1,3,,4]),[4,this.client.loadPaymentData(e)];case 2:return n=i.sent(),t.onLoadPaymentData&&t.onLoadPaymentData(n),[3,4];case 3:return"CANCELED"===(o=i.sent()).statusCode?t.onCancel&&t.onCancel(o):t.onError?t.onError(o):console.error(o),[3,4];case 4:return[2]}}))}))},this.options=t}return t.prototype.getElement=function(){return this.element},t.prototype.isGooglePayLoaded=function(){var t,e;return"google"in(window||global)&&!!(null===(e=null===(t=null===google||void 0===google?void 0:google.payments)||void 0===t?void 0:t.api)||void 0===e?void 0:e.PaymentsClient)},t.prototype.mount=function(t){return r(this,void 0,void 0,(function(){return a(this,(function(e){switch(e.label){case 0:return this.isGooglePayLoaded()?[3,2]:[4,u("https://pay.google.com/gp/p/js/pay.js")];case 1:e.sent(),e.label=2;case 2:return this.element=t,t&&(this.appendStyles(),this.config&&this.updateElement()),[2]}}))}))},t.prototype.unmount=function(){this.element=void 0},t.prototype.configure=function(t){this.config=t,this.oldInvalidationValues&&!this.isClientInvalidated(t)||this.updateElement(),this.oldInvalidationValues=this.getInvalidationValues(t)},t.prototype.createClientOptions=function(t){var e={environment:t.environment,merchantInfo:this.createMerchantInfo(t)};return(t.onPaymentDataChanged||t.onPaymentAuthorized)&&(e.paymentDataCallbacks={},t.onPaymentDataChanged&&(e.paymentDataCallbacks.onPaymentDataChanged=function(e){return t.onPaymentDataChanged(e)||{}}),t.onPaymentAuthorized&&(e.paymentDataCallbacks.onPaymentAuthorized=function(e){return t.onPaymentAuthorized(e)||{}})),e},t.prototype.createIsReadyToPayRequest=function(t){var e=t.paymentRequest;return{apiVersion:e.apiVersion,apiVersionMinor:e.apiVersionMinor,allowedPaymentMethods:e.allowedPaymentMethods,existingPaymentMethodRequired:t.existingPaymentMethodRequired}},t.prototype.createLoadPaymentDataRequest=function(t){return i(i({},t.paymentRequest),{merchantInfo:this.createMerchantInfo(t)})},t.prototype.createMerchantInfo=function(t){var e=i({},t.paymentRequest.merchantInfo);return e.softwareInfo||(e.softwareInfo={id:this.options.softwareInfoId,version:this.options.softwareInfoVersion}),e},t.prototype.isMounted=function(){return null!=this.element&&!1!==this.element.isConnected},t.prototype.removeButton=function(){if(this.element instanceof ShadowRoot||this.element instanceof Element)for(var t=0,e=Array.from(this.element.children);t<e.length;t++){var n=e[t];"STYLE"!==n.tagName&&n.remove()}},t.prototype.updateElement=function(){var t;return r(this,void 0,void 0,(function(){var e,n,o,i,r,s,u,l;return a(this,(function(a){switch(a.label){case 0:if(!this.isMounted())return[2];if(e=this.element,!this.config)throw new Error("google-pay-button: Missing configuration");this.removeButton(),this.client=new google.payments.api.PaymentsClient(this.createClientOptions(this.config)),n={buttonType:this.config.buttonType,buttonColor:this.config.buttonColor,buttonSizeMode:this.config.buttonSizeMode,onClick:this.handleClick},(o=null===(t=this.element)||void 0===t?void 0:t.getRootNode())instanceof ShadowRoot&&(n.buttonRootNode=o),i=this.client.createButton(n),this.setClassName(e,[e.className,"not-ready"]),e.appendChild(i),r=!1,a.label=1;case 1:return a.trys.push([1,3,,4]),[4,this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config))];case 2:return s=a.sent(),r=s.result&&!this.config.existingPaymentMethodRequired||s.result&&s.paymentMethodPresent&&this.config.existingPaymentMethodRequired||!1,[3,4];case 3:return u=a.sent(),this.config.onError?this.config.onError(u):console.error(u),[3,4];case 4:if(!this.isMounted())return[2];if(r){try{this.client.prefetchPaymentData(this.createLoadPaymentDataRequest(this.config))}catch(t){console.log("Error with prefetch",t)}this.setClassName(e,(e.className||"").split(" ").filter((function(t){return t&&"not-ready"!==t})))}return this.isReadyToPay===(null==s?void 0:s.result)&&this.paymentMethodPresent===(null==s?void 0:s.paymentMethodPresent)||(this.isReadyToPay=!!(null==s?void 0:s.result),this.paymentMethodPresent=null==s?void 0:s.paymentMethodPresent,this.config.onReadyToPayChange&&(l={isButtonVisible:r,isReadyToPay:this.isReadyToPay},this.paymentMethodPresent&&(l.paymentMethodPresent=this.paymentMethodPresent),this.config.onReadyToPayChange(l))),[2]}}))}))},t.prototype.setClassName=function(t,e){var n=e.filter((function(t){return t})).join(" ");n?t.className=n:t.removeAttribute("class")},t.prototype.appendStyles=function(){var t,e;if("undefined"!=typeof document){var n=null===(t=this.element)||void 0===t?void 0:t.getRootNode(),o="default-google-style-"+this.options.cssSelector.replace(/[^\w-]+/g,"");if(n&&!(null===(e=n.getElementById)||void 0===e?void 0:e.call(n,o))){var i=document.createElement("style");i.id=o,i.type="text/css",i.innerHTML="\n          "+this.options.cssSelector+" {\n            display: inline-block;\n          }\n          "+this.options.cssSelector+".not-ready {\n            width: 0;\n            height: 0;\n            overflow: hidden;\n          }\n        ",n instanceof Document&&n.head?n.head.appendChild(i):n.appendChild(i)}}},t.prototype.isClientInvalidated=function(t){var e=this;return!this.oldInvalidationValues||this.getInvalidationValues(t).some((function(t,n){return t!==e.oldInvalidationValues[n]}))},t.prototype.getInvalidationValues=function(t){var e,n;return[t.environment,t.existingPaymentMethodRequired,!!t.onPaymentDataChanged,!!t.onPaymentAuthorized,t.buttonColor,t.buttonType,t.buttonSizeMode,t.paymentRequest.merchantInfo.merchantId,t.paymentRequest.merchantInfo.merchantName,null===(e=t.paymentRequest.merchantInfo.softwareInfo)||void 0===e?void 0:e.id,null===(n=t.paymentRequest.merchantInfo.softwareInfo)||void 0===n?void 0:n.version]},t}(),c="@google-pay/button-react",d="google-pay-button-container";return function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.manager=new l({cssSelector:"."+d,softwareInfoId:c,softwareInfoVersion:"2.2.1"}),e.elementRef=n.default.createRef(),e}return function(t,e){function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(e,t),e.prototype.componentDidMount=function(){return r(this,void 0,void 0,(function(){var t;return a(this,(function(e){switch(e.label){case 0:return(t=this.elementRef.current)?[4,this.manager.mount(t)]:[3,2];case 1:e.sent(),this.manager.configure(this.props),e.label=2;case 2:return[2]}}))}))},e.prototype.componentWillUnmount=function(){this.manager.unmount()},e.prototype.componentDidUpdate=function(){this.manager.configure(this.props)},e.prototype.render=function(){return n.default.createElement("div",{ref:this.elementRef,className:[d,this.props.className].filter((function(t){return t})).join(" "),style:this.props.style})},e}(n.default.Component)}));
+    ***************************************************************************** */var i=function(){return(i=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function r(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{u(o.next(t))}catch(t){r(t)}}function s(t){try{u(o.throw(t))}catch(t){r(t)}}function u(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}u((o=o.apply(t,e||[])).next())}))}function a(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,o=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var s={};function u(t){var e=s[t];if(e)return e;var n=new Promise((function(e,n){var o=document.createElement("script");o.src=t,o.async=!0;var i=function(){e()},r=function(){o.removeEventListener("load",i),o.removeEventListener("error",r),delete s[t],o.remove(),n(new Error("Unable to load script "+t))};o.addEventListener("load",i),o.addEventListener("error",r),document.body.appendChild(o)}));return s[t]=n,n}var l=function(){function t(t){var e=this;this.handleClick=function(){return r(e,void 0,void 0,(function(){var t,e,n,o;return a(this,(function(i){switch(i.label){case 0:if(!(t=this.config))throw new Error("google-pay-button: Missing configuration");e=this.createLoadPaymentDataRequest(t),i.label=1;case 1:return i.trys.push([1,3,,4]),[4,this.client.loadPaymentData(e)];case 2:return n=i.sent(),t.onLoadPaymentData&&t.onLoadPaymentData(n),[3,4];case 3:return"CANCELED"===(o=i.sent()).statusCode?t.onCancel&&t.onCancel(o):t.onError?t.onError(o):console.error(o),[3,4];case 4:return[2]}}))}))},this.options=t}return t.prototype.getElement=function(){return this.element},t.prototype.isGooglePayLoaded=function(){var t,e;return"google"in(window||global)&&!!(null===(e=null===(t=null===google||void 0===google?void 0:google.payments)||void 0===t?void 0:t.api)||void 0===e?void 0:e.PaymentsClient)},t.prototype.mount=function(t){return r(this,void 0,void 0,(function(){return a(this,(function(e){switch(e.label){case 0:return this.isGooglePayLoaded()?[3,2]:[4,u("https://pay.google.com/gp/p/js/pay.js")];case 1:e.sent(),e.label=2;case 2:return this.element=t,t&&(this.appendStyles(),this.config&&this.updateElement()),[2]}}))}))},t.prototype.unmount=function(){this.element=void 0},t.prototype.configure=function(t){var e=void 0;return this.config=t,this.oldInvalidationValues&&!this.isClientInvalidated(t)||(e=this.updateElement()),this.oldInvalidationValues=this.getInvalidationValues(t),null!=e?e:Promise.resolve()},t.prototype.createClientOptions=function(t){var e={environment:t.environment,merchantInfo:this.createMerchantInfo(t)};return(t.onPaymentDataChanged||t.onPaymentAuthorized)&&(e.paymentDataCallbacks={},t.onPaymentDataChanged&&(e.paymentDataCallbacks.onPaymentDataChanged=function(e){return t.onPaymentDataChanged(e)||{}}),t.onPaymentAuthorized&&(e.paymentDataCallbacks.onPaymentAuthorized=function(e){return t.onPaymentAuthorized(e)||{}})),e},t.prototype.createIsReadyToPayRequest=function(t){var e=t.paymentRequest;return{apiVersion:e.apiVersion,apiVersionMinor:e.apiVersionMinor,allowedPaymentMethods:e.allowedPaymentMethods,existingPaymentMethodRequired:t.existingPaymentMethodRequired}},t.prototype.createLoadPaymentDataRequest=function(t){return i(i({},t.paymentRequest),{merchantInfo:this.createMerchantInfo(t)})},t.prototype.createMerchantInfo=function(t){var e=i({},t.paymentRequest.merchantInfo);return e.softwareInfo||(e.softwareInfo={id:this.options.softwareInfoId,version:this.options.softwareInfoVersion}),e},t.prototype.isMounted=function(){return null!=this.element&&!1!==this.element.isConnected},t.prototype.removeButton=function(){if(this.element instanceof ShadowRoot||this.element instanceof Element)for(var t=0,e=Array.from(this.element.children);t<e.length;t++){var n=e[t];"STYLE"!==n.tagName&&n.remove()}},t.prototype.updateElement=function(){var t;return r(this,void 0,void 0,(function(){var e,n,o,i,r,s,u,l;return a(this,(function(a){switch(a.label){case 0:if(!this.isMounted())return[2];if(e=this.element,!this.config)throw new Error("google-pay-button: Missing configuration");this.removeButton(),this.client=new google.payments.api.PaymentsClient(this.createClientOptions(this.config)),n={buttonType:this.config.buttonType,buttonColor:this.config.buttonColor,buttonSizeMode:this.config.buttonSizeMode,buttonLocale:this.config.buttonLocale,onClick:this.handleClick},(o=null===(t=this.element)||void 0===t?void 0:t.getRootNode())instanceof ShadowRoot&&(n.buttonRootNode=o),i=this.client.createButton(n),this.setClassName(e,[e.className,"not-ready"]),e.appendChild(i),r=!1,a.label=1;case 1:return a.trys.push([1,3,,4]),[4,this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config))];case 2:return s=a.sent(),r=s.result&&!this.config.existingPaymentMethodRequired||s.result&&s.paymentMethodPresent&&this.config.existingPaymentMethodRequired||!1,[3,4];case 3:return u=a.sent(),this.config.onError?this.config.onError(u):console.error(u),[3,4];case 4:if(!this.isMounted())return[2];if(r){try{this.client.prefetchPaymentData(this.createLoadPaymentDataRequest(this.config))}catch(t){console.log("Error with prefetch",t)}this.setClassName(e,(e.className||"").split(" ").filter((function(t){return t&&"not-ready"!==t})))}return this.isReadyToPay===(null==s?void 0:s.result)&&this.paymentMethodPresent===(null==s?void 0:s.paymentMethodPresent)||(this.isReadyToPay=!!(null==s?void 0:s.result),this.paymentMethodPresent=null==s?void 0:s.paymentMethodPresent,this.config.onReadyToPayChange&&(l={isButtonVisible:r,isReadyToPay:this.isReadyToPay},this.paymentMethodPresent&&(l.paymentMethodPresent=this.paymentMethodPresent),this.config.onReadyToPayChange(l))),[2]}}))}))},t.prototype.setClassName=function(t,e){var n=e.filter((function(t){return t})).join(" ");n?t.className=n:t.removeAttribute("class")},t.prototype.appendStyles=function(){var t,e,n;if("undefined"!=typeof document){var o=null===(t=this.element)||void 0===t?void 0:t.getRootNode(),i="default-google-style-"+this.options.cssSelector.replace(/[^\w-]+/g,"")+"-"+(null===(e=this.config)||void 0===e?void 0:e.buttonLocale);if(o&&!(null===(n=o.getElementById)||void 0===n?void 0:n.call(o,i))){var r=document.createElement("style");r.id=i,r.type="text/css",r.innerHTML="\n          "+this.options.cssSelector+" {\n            display: inline-block;\n          }\n          "+this.options.cssSelector+".not-ready {\n            width: 0;\n            height: 0;\n            overflow: hidden;\n          }\n        ",o instanceof Document&&o.head?o.head.appendChild(r):o.appendChild(r)}}},t.prototype.isClientInvalidated=function(t){var e=this;return!this.oldInvalidationValues||this.getInvalidationValues(t).some((function(t,n){return t!==e.oldInvalidationValues[n]}))},t.prototype.getInvalidationValues=function(t){var e,n;return[t.environment,t.existingPaymentMethodRequired,!!t.onPaymentDataChanged,!!t.onPaymentAuthorized,t.buttonColor,t.buttonType,t.buttonLocale,t.buttonSizeMode,t.paymentRequest.merchantInfo.merchantId,t.paymentRequest.merchantInfo.merchantName,null===(e=t.paymentRequest.merchantInfo.softwareInfo)||void 0===e?void 0:e.id,null===(n=t.paymentRequest.merchantInfo.softwareInfo)||void 0===n?void 0:n.version]},t}(),c="@google-pay/button-react",d="google-pay-button-container";return function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.manager=new l({cssSelector:"."+d,softwareInfoId:c,softwareInfoVersion:"2.3.0"}),e.elementRef=n.default.createRef(),e}return function(t,e){function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(e,t),e.prototype.componentDidMount=function(){return r(this,void 0,void 0,(function(){var t;return a(this,(function(e){switch(e.label){case 0:return(t=this.elementRef.current)?[4,this.manager.mount(t)]:[3,2];case 1:e.sent(),this.manager.configure(this.props),e.label=2;case 2:return[2]}}))}))},e.prototype.componentWillUnmount=function(){this.manager.unmount()},e.prototype.componentDidUpdate=function(){this.manager.configure(this.props)},e.prototype.render=function(){return n.default.createElement("div",{ref:this.elementRef,className:[d,this.props.className].filter((function(t){return t})).join(" "),style:this.props.style})},e}(n.default.Component)}));

dist/index.js

@@ -167,7 +167,9 @@ import React from 'react';
     configure(newConfig) {
+        let promise = undefined;
         this.config = newConfig;
         if (!this.oldInvalidationValues || this.isClientInvalidated(newConfig)) {
-            this.updateElement();
+            promise = this.updateElement();
         }
         this.oldInvalidationValues = this.getInvalidationValues(newConfig);
+        return promise !== null && promise !== void 0 ? promise : Promise.resolve();
     }
@@ -275,2 +277,3 @@ /**
                 buttonSizeMode: this.config.buttonSizeMode,
+                buttonLocale: this.config.buttonLocale,
                 onClick: this.handleClick,
@@ -341,10 +344,10 @@ };
     appendStyles() {
-        var _a, _b;
+        var _a, _b, _c;
         if (typeof document === 'undefined')
             return;
         const rootNode = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getRootNode();
-        const styleId = `default-google-style-${this.options.cssSelector.replace(/[^\w-]+/g, '')}`;
+        const styleId = `default-google-style-${this.options.cssSelector.replace(/[^\w-]+/g, '')}-${(_b = this.config) === null || _b === void 0 ? void 0 : _b.buttonLocale}`;
         // initialize styles if rendering on the client:
         if (rootNode) {
-            if (!((_b = rootNode.getElementById) === null || _b === void 0 ? void 0 : _b.call(rootNode, styleId))) {
+            if (!((_c = rootNode.getElementById) === null || _c === void 0 ? void 0 : _c.call(rootNode, styleId))) {
                 const style = document.createElement('style');
@@ -387,2 +390,3 @@ style.id = styleId;
             config.buttonType,
+            config.buttonLocale,
             config.buttonSizeMode,
@@ -398,3 +402,3 @@ config.paymentRequest.merchantInfo.merchantId,
 var name = "@google-pay/button-react";
-var version = "2.2.1";
+var version = "2.3.0";
 
@@ -401,0 +405,0 @@ /**

dist/index.min.js

@@ -15,2 +15,2 @@ import e from"react";
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */function t(e,t,n,o){return new(n||(n=Promise))((function(i,a){function s(e){try{l(o.next(e))}catch(e){a(e)}}function r(e){try{l(o.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,r)}l((o=o.apply(e,t||[])).next())}))}let n={};function o(e){const t=n[e];if(t)return t;const o=new Promise((t,o)=>{const i=document.createElement("script");i.src=e,i.async=!0;const a=()=>{t()},s=()=>{i.removeEventListener("load",a),i.removeEventListener("error",s),delete n[e],i.remove(),o(new Error("Unable to load script "+e))};i.addEventListener("load",a),i.addEventListener("error",s),document.body.appendChild(i)});return n[e]=o,o}class i{constructor(e){this.handleClick=()=>t(this,void 0,void 0,(function*(){const e=this.config;if(!e)throw new Error("google-pay-button: Missing configuration");const t=this.createLoadPaymentDataRequest(e);try{const n=yield this.client.loadPaymentData(t);e.onLoadPaymentData&&e.onLoadPaymentData(n)}catch(t){"CANCELED"===t.statusCode?e.onCancel&&e.onCancel(t):e.onError?e.onError(t):console.error(t)}})),this.options=e}getElement(){return this.element}isGooglePayLoaded(){var e,t;return"google"in(window||global)&&!!(null===(t=null===(e=null===google||void 0===google?void 0:google.payments)||void 0===e?void 0:e.api)||void 0===t?void 0:t.PaymentsClient)}mount(e){return t(this,void 0,void 0,(function*(){this.isGooglePayLoaded()||(yield o("https://pay.google.com/gp/p/js/pay.js")),this.element=e,e&&(this.appendStyles(),this.config&&this.updateElement())}))}unmount(){this.element=void 0}configure(e){this.config=e,this.oldInvalidationValues&&!this.isClientInvalidated(e)||this.updateElement(),this.oldInvalidationValues=this.getInvalidationValues(e)}createClientOptions(e){const t={environment:e.environment,merchantInfo:this.createMerchantInfo(e)};return(e.onPaymentDataChanged||e.onPaymentAuthorized)&&(t.paymentDataCallbacks={},e.onPaymentDataChanged&&(t.paymentDataCallbacks.onPaymentDataChanged=t=>e.onPaymentDataChanged(t)||{}),e.onPaymentAuthorized&&(t.paymentDataCallbacks.onPaymentAuthorized=t=>e.onPaymentAuthorized(t)||{})),t}createIsReadyToPayRequest(e){const t=e.paymentRequest;return{apiVersion:t.apiVersion,apiVersionMinor:t.apiVersionMinor,allowedPaymentMethods:t.allowedPaymentMethods,existingPaymentMethodRequired:e.existingPaymentMethodRequired}}createLoadPaymentDataRequest(e){return Object.assign(Object.assign({},e.paymentRequest),{merchantInfo:this.createMerchantInfo(e)})}createMerchantInfo(e){const t=Object.assign({},e.paymentRequest.merchantInfo);return t.softwareInfo||(t.softwareInfo={id:this.options.softwareInfoId,version:this.options.softwareInfoVersion}),t}isMounted(){return null!=this.element&&!1!==this.element.isConnected}removeButton(){if(this.element instanceof ShadowRoot||this.element instanceof Element)for(const e of Array.from(this.element.children))"STYLE"!==e.tagName&&e.remove()}updateElement(){var e;return t(this,void 0,void 0,(function*(){if(!this.isMounted())return;const t=this.element;if(!this.config)throw new Error("google-pay-button: Missing configuration");this.removeButton(),this.client=new google.payments.api.PaymentsClient(this.createClientOptions(this.config));const n={buttonType:this.config.buttonType,buttonColor:this.config.buttonColor,buttonSizeMode:this.config.buttonSizeMode,onClick:this.handleClick},o=null===(e=this.element)||void 0===e?void 0:e.getRootNode();o instanceof ShadowRoot&&(n.buttonRootNode=o);const i=this.client.createButton(n);this.setClassName(t,[t.className,"not-ready"]),t.appendChild(i);let a,s=!1;try{a=yield this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config)),s=a.result&&!this.config.existingPaymentMethodRequired||a.result&&a.paymentMethodPresent&&this.config.existingPaymentMethodRequired||!1}catch(e){this.config.onError?this.config.onError(e):console.error(e)}if(this.isMounted()){if(s){try{this.client.prefetchPaymentData(this.createLoadPaymentDataRequest(this.config))}catch(e){console.log("Error with prefetch",e)}this.setClassName(t,(t.className||"").split(" ").filter(e=>e&&"not-ready"!==e))}if((this.isReadyToPay!==(null==a?void 0:a.result)||this.paymentMethodPresent!==(null==a?void 0:a.paymentMethodPresent))&&(this.isReadyToPay=!!(null==a?void 0:a.result),this.paymentMethodPresent=null==a?void 0:a.paymentMethodPresent,this.config.onReadyToPayChange)){const e={isButtonVisible:s,isReadyToPay:this.isReadyToPay};this.paymentMethodPresent&&(e.paymentMethodPresent=this.paymentMethodPresent),this.config.onReadyToPayChange(e)}}}))}setClassName(e,t){const n=t.filter(e=>e).join(" ");n?e.className=n:e.removeAttribute("class")}appendStyles(){var e,t;if("undefined"==typeof document)return;const n=null===(e=this.element)||void 0===e?void 0:e.getRootNode(),o="default-google-style-"+this.options.cssSelector.replace(/[^\w-]+/g,"");if(n&&!(null===(t=n.getElementById)||void 0===t?void 0:t.call(n,o))){const e=document.createElement("style");e.id=o,e.type="text/css",e.innerHTML=`\n          ${this.options.cssSelector} {\n            display: inline-block;\n          }\n          ${this.options.cssSelector}.not-ready {\n            width: 0;\n            height: 0;\n            overflow: hidden;\n          }\n        `,n instanceof Document&&n.head?n.head.appendChild(e):n.appendChild(e)}}isClientInvalidated(e){if(!this.oldInvalidationValues)return!0;return this.getInvalidationValues(e).some((e,t)=>e!==this.oldInvalidationValues[t])}getInvalidationValues(e){var t,n;return[e.environment,e.existingPaymentMethodRequired,!!e.onPaymentDataChanged,!!e.onPaymentAuthorized,e.buttonColor,e.buttonType,e.buttonSizeMode,e.paymentRequest.merchantInfo.merchantId,e.paymentRequest.merchantInfo.merchantName,null===(t=e.paymentRequest.merchantInfo.softwareInfo)||void 0===t?void 0:t.id,null===(n=e.paymentRequest.merchantInfo.softwareInfo)||void 0===n?void 0:n.version]}}const a="google-pay-button-container";class s extends e.Component{constructor(){super(...arguments),this.manager=new i({cssSelector:"."+a,softwareInfoId:"@google-pay/button-react",softwareInfoVersion:"2.2.1"}),this.elementRef=e.createRef()}componentDidMount(){return t(this,void 0,void 0,(function*(){const e=this.elementRef.current;e&&(yield this.manager.mount(e),this.manager.configure(this.props))}))}componentWillUnmount(){this.manager.unmount()}componentDidUpdate(){this.manager.configure(this.props)}render(){return e.createElement("div",{ref:this.elementRef,className:[a,this.props.className].filter(e=>e).join(" "),style:this.props.style})}}export default s;
+***************************************************************************** */function t(e,t,n,o){return new(n||(n=Promise))((function(i,a){function s(e){try{l(o.next(e))}catch(e){a(e)}}function r(e){try{l(o.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,r)}l((o=o.apply(e,t||[])).next())}))}let n={};function o(e){const t=n[e];if(t)return t;const o=new Promise((t,o)=>{const i=document.createElement("script");i.src=e,i.async=!0;const a=()=>{t()},s=()=>{i.removeEventListener("load",a),i.removeEventListener("error",s),delete n[e],i.remove(),o(new Error("Unable to load script "+e))};i.addEventListener("load",a),i.addEventListener("error",s),document.body.appendChild(i)});return n[e]=o,o}class i{constructor(e){this.handleClick=()=>t(this,void 0,void 0,(function*(){const e=this.config;if(!e)throw new Error("google-pay-button: Missing configuration");const t=this.createLoadPaymentDataRequest(e);try{const n=yield this.client.loadPaymentData(t);e.onLoadPaymentData&&e.onLoadPaymentData(n)}catch(t){"CANCELED"===t.statusCode?e.onCancel&&e.onCancel(t):e.onError?e.onError(t):console.error(t)}})),this.options=e}getElement(){return this.element}isGooglePayLoaded(){var e,t;return"google"in(window||global)&&!!(null===(t=null===(e=null===google||void 0===google?void 0:google.payments)||void 0===e?void 0:e.api)||void 0===t?void 0:t.PaymentsClient)}mount(e){return t(this,void 0,void 0,(function*(){this.isGooglePayLoaded()||(yield o("https://pay.google.com/gp/p/js/pay.js")),this.element=e,e&&(this.appendStyles(),this.config&&this.updateElement())}))}unmount(){this.element=void 0}configure(e){let t=void 0;return this.config=e,this.oldInvalidationValues&&!this.isClientInvalidated(e)||(t=this.updateElement()),this.oldInvalidationValues=this.getInvalidationValues(e),null!=t?t:Promise.resolve()}createClientOptions(e){const t={environment:e.environment,merchantInfo:this.createMerchantInfo(e)};return(e.onPaymentDataChanged||e.onPaymentAuthorized)&&(t.paymentDataCallbacks={},e.onPaymentDataChanged&&(t.paymentDataCallbacks.onPaymentDataChanged=t=>e.onPaymentDataChanged(t)||{}),e.onPaymentAuthorized&&(t.paymentDataCallbacks.onPaymentAuthorized=t=>e.onPaymentAuthorized(t)||{})),t}createIsReadyToPayRequest(e){const t=e.paymentRequest;return{apiVersion:t.apiVersion,apiVersionMinor:t.apiVersionMinor,allowedPaymentMethods:t.allowedPaymentMethods,existingPaymentMethodRequired:e.existingPaymentMethodRequired}}createLoadPaymentDataRequest(e){return Object.assign(Object.assign({},e.paymentRequest),{merchantInfo:this.createMerchantInfo(e)})}createMerchantInfo(e){const t=Object.assign({},e.paymentRequest.merchantInfo);return t.softwareInfo||(t.softwareInfo={id:this.options.softwareInfoId,version:this.options.softwareInfoVersion}),t}isMounted(){return null!=this.element&&!1!==this.element.isConnected}removeButton(){if(this.element instanceof ShadowRoot||this.element instanceof Element)for(const e of Array.from(this.element.children))"STYLE"!==e.tagName&&e.remove()}updateElement(){var e;return t(this,void 0,void 0,(function*(){if(!this.isMounted())return;const t=this.element;if(!this.config)throw new Error("google-pay-button: Missing configuration");this.removeButton(),this.client=new google.payments.api.PaymentsClient(this.createClientOptions(this.config));const n={buttonType:this.config.buttonType,buttonColor:this.config.buttonColor,buttonSizeMode:this.config.buttonSizeMode,buttonLocale:this.config.buttonLocale,onClick:this.handleClick},o=null===(e=this.element)||void 0===e?void 0:e.getRootNode();o instanceof ShadowRoot&&(n.buttonRootNode=o);const i=this.client.createButton(n);this.setClassName(t,[t.className,"not-ready"]),t.appendChild(i);let a,s=!1;try{a=yield this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config)),s=a.result&&!this.config.existingPaymentMethodRequired||a.result&&a.paymentMethodPresent&&this.config.existingPaymentMethodRequired||!1}catch(e){this.config.onError?this.config.onError(e):console.error(e)}if(this.isMounted()){if(s){try{this.client.prefetchPaymentData(this.createLoadPaymentDataRequest(this.config))}catch(e){console.log("Error with prefetch",e)}this.setClassName(t,(t.className||"").split(" ").filter(e=>e&&"not-ready"!==e))}if((this.isReadyToPay!==(null==a?void 0:a.result)||this.paymentMethodPresent!==(null==a?void 0:a.paymentMethodPresent))&&(this.isReadyToPay=!!(null==a?void 0:a.result),this.paymentMethodPresent=null==a?void 0:a.paymentMethodPresent,this.config.onReadyToPayChange)){const e={isButtonVisible:s,isReadyToPay:this.isReadyToPay};this.paymentMethodPresent&&(e.paymentMethodPresent=this.paymentMethodPresent),this.config.onReadyToPayChange(e)}}}))}setClassName(e,t){const n=t.filter(e=>e).join(" ");n?e.className=n:e.removeAttribute("class")}appendStyles(){var e,t,n;if("undefined"==typeof document)return;const o=null===(e=this.element)||void 0===e?void 0:e.getRootNode(),i=`default-google-style-${this.options.cssSelector.replace(/[^\w-]+/g,"")}-${null===(t=this.config)||void 0===t?void 0:t.buttonLocale}`;if(o&&!(null===(n=o.getElementById)||void 0===n?void 0:n.call(o,i))){const e=document.createElement("style");e.id=i,e.type="text/css",e.innerHTML=`\n          ${this.options.cssSelector} {\n            display: inline-block;\n          }\n          ${this.options.cssSelector}.not-ready {\n            width: 0;\n            height: 0;\n            overflow: hidden;\n          }\n        `,o instanceof Document&&o.head?o.head.appendChild(e):o.appendChild(e)}}isClientInvalidated(e){if(!this.oldInvalidationValues)return!0;return this.getInvalidationValues(e).some((e,t)=>e!==this.oldInvalidationValues[t])}getInvalidationValues(e){var t,n;return[e.environment,e.existingPaymentMethodRequired,!!e.onPaymentDataChanged,!!e.onPaymentAuthorized,e.buttonColor,e.buttonType,e.buttonLocale,e.buttonSizeMode,e.paymentRequest.merchantInfo.merchantId,e.paymentRequest.merchantInfo.merchantName,null===(t=e.paymentRequest.merchantInfo.softwareInfo)||void 0===t?void 0:t.id,null===(n=e.paymentRequest.merchantInfo.softwareInfo)||void 0===n?void 0:n.version]}}const a="google-pay-button-container";class s extends e.Component{constructor(){super(...arguments),this.manager=new i({cssSelector:"."+a,softwareInfoId:"@google-pay/button-react",softwareInfoVersion:"2.3.0"}),this.elementRef=e.createRef()}componentDidMount(){return t(this,void 0,void 0,(function*(){const e=this.elementRef.current;e&&(yield this.manager.mount(e),this.manager.configure(this.props))}))}componentWillUnmount(){this.manager.unmount()}componentDidUpdate(){this.manager.configure(this.props)}render(){return e.createElement("div",{ref:this.elementRef,className:[a,this.props.className].filter(e=>e).join(" "),style:this.props.style})}}export default s;

dist/index.umd.js

@@ -175,7 +175,9 @@ (function (global, factory) {
         configure(newConfig) {
+            let promise = undefined;
             this.config = newConfig;
             if (!this.oldInvalidationValues || this.isClientInvalidated(newConfig)) {
-                this.updateElement();
+                promise = this.updateElement();
             }
             this.oldInvalidationValues = this.getInvalidationValues(newConfig);
+            return promise !== null && promise !== void 0 ? promise : Promise.resolve();
         }
@@ -283,2 +285,3 @@ /**
                     buttonSizeMode: this.config.buttonSizeMode,
+                    buttonLocale: this.config.buttonLocale,
                     onClick: this.handleClick,
@@ -349,10 +352,10 @@ };
         appendStyles() {
-            var _a, _b;
+            var _a, _b, _c;
             if (typeof document === 'undefined')
                 return;
             const rootNode = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getRootNode();
-            const styleId = `default-google-style-${this.options.cssSelector.replace(/[^\w-]+/g, '')}`;
+            const styleId = `default-google-style-${this.options.cssSelector.replace(/[^\w-]+/g, '')}-${(_b = this.config) === null || _b === void 0 ? void 0 : _b.buttonLocale}`;
             // initialize styles if rendering on the client:
             if (rootNode) {
-                if (!((_b = rootNode.getElementById) === null || _b === void 0 ? void 0 : _b.call(rootNode, styleId))) {
+                if (!((_c = rootNode.getElementById) === null || _c === void 0 ? void 0 : _c.call(rootNode, styleId))) {
                     const style = document.createElement('style');
@@ -395,2 +398,3 @@ style.id = styleId;
                 config.buttonType,
+                config.buttonLocale,
                 config.buttonSizeMode,
@@ -406,3 +410,3 @@ config.paymentRequest.merchantInfo.merchantId,
     var name = "@google-pay/button-react";
-    var version = "2.2.1";
+    var version = "2.3.0";
 
@@ -409,0 +413,0 @@ /**

dist/index.umd.min.js

@@ -15,2 +15,2 @@ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).GooglePayButton=t(e.React)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */function o(e,t,n,o){return new(n||(n=Promise))((function(i,a){function s(e){try{l(o.next(e))}catch(e){a(e)}}function r(e){try{l(o.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,r)}l((o=o.apply(e,t||[])).next())}))}let i={};function a(e){const t=i[e];if(t)return t;const n=new Promise((t,n)=>{const o=document.createElement("script");o.src=e,o.async=!0;const a=()=>{t()},s=()=>{o.removeEventListener("load",a),o.removeEventListener("error",s),delete i[e],o.remove(),n(new Error("Unable to load script "+e))};o.addEventListener("load",a),o.addEventListener("error",s),document.body.appendChild(o)});return i[e]=n,n}class s{constructor(e){this.handleClick=()=>o(this,void 0,void 0,(function*(){const e=this.config;if(!e)throw new Error("google-pay-button: Missing configuration");const t=this.createLoadPaymentDataRequest(e);try{const n=yield this.client.loadPaymentData(t);e.onLoadPaymentData&&e.onLoadPaymentData(n)}catch(t){"CANCELED"===t.statusCode?e.onCancel&&e.onCancel(t):e.onError?e.onError(t):console.error(t)}})),this.options=e}getElement(){return this.element}isGooglePayLoaded(){var e,t;return"google"in(window||global)&&!!(null===(t=null===(e=null===google||void 0===google?void 0:google.payments)||void 0===e?void 0:e.api)||void 0===t?void 0:t.PaymentsClient)}mount(e){return o(this,void 0,void 0,(function*(){this.isGooglePayLoaded()||(yield a("https://pay.google.com/gp/p/js/pay.js")),this.element=e,e&&(this.appendStyles(),this.config&&this.updateElement())}))}unmount(){this.element=void 0}configure(e){this.config=e,this.oldInvalidationValues&&!this.isClientInvalidated(e)||this.updateElement(),this.oldInvalidationValues=this.getInvalidationValues(e)}createClientOptions(e){const t={environment:e.environment,merchantInfo:this.createMerchantInfo(e)};return(e.onPaymentDataChanged||e.onPaymentAuthorized)&&(t.paymentDataCallbacks={},e.onPaymentDataChanged&&(t.paymentDataCallbacks.onPaymentDataChanged=t=>e.onPaymentDataChanged(t)||{}),e.onPaymentAuthorized&&(t.paymentDataCallbacks.onPaymentAuthorized=t=>e.onPaymentAuthorized(t)||{})),t}createIsReadyToPayRequest(e){const t=e.paymentRequest;return{apiVersion:t.apiVersion,apiVersionMinor:t.apiVersionMinor,allowedPaymentMethods:t.allowedPaymentMethods,existingPaymentMethodRequired:e.existingPaymentMethodRequired}}createLoadPaymentDataRequest(e){return Object.assign(Object.assign({},e.paymentRequest),{merchantInfo:this.createMerchantInfo(e)})}createMerchantInfo(e){const t=Object.assign({},e.paymentRequest.merchantInfo);return t.softwareInfo||(t.softwareInfo={id:this.options.softwareInfoId,version:this.options.softwareInfoVersion}),t}isMounted(){return null!=this.element&&!1!==this.element.isConnected}removeButton(){if(this.element instanceof ShadowRoot||this.element instanceof Element)for(const e of Array.from(this.element.children))"STYLE"!==e.tagName&&e.remove()}updateElement(){var e;return o(this,void 0,void 0,(function*(){if(!this.isMounted())return;const t=this.element;if(!this.config)throw new Error("google-pay-button: Missing configuration");this.removeButton(),this.client=new google.payments.api.PaymentsClient(this.createClientOptions(this.config));const n={buttonType:this.config.buttonType,buttonColor:this.config.buttonColor,buttonSizeMode:this.config.buttonSizeMode,onClick:this.handleClick},o=null===(e=this.element)||void 0===e?void 0:e.getRootNode();o instanceof ShadowRoot&&(n.buttonRootNode=o);const i=this.client.createButton(n);this.setClassName(t,[t.className,"not-ready"]),t.appendChild(i);let a,s=!1;try{a=yield this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config)),s=a.result&&!this.config.existingPaymentMethodRequired||a.result&&a.paymentMethodPresent&&this.config.existingPaymentMethodRequired||!1}catch(e){this.config.onError?this.config.onError(e):console.error(e)}if(this.isMounted()){if(s){try{this.client.prefetchPaymentData(this.createLoadPaymentDataRequest(this.config))}catch(e){console.log("Error with prefetch",e)}this.setClassName(t,(t.className||"").split(" ").filter(e=>e&&"not-ready"!==e))}if((this.isReadyToPay!==(null==a?void 0:a.result)||this.paymentMethodPresent!==(null==a?void 0:a.paymentMethodPresent))&&(this.isReadyToPay=!!(null==a?void 0:a.result),this.paymentMethodPresent=null==a?void 0:a.paymentMethodPresent,this.config.onReadyToPayChange)){const e={isButtonVisible:s,isReadyToPay:this.isReadyToPay};this.paymentMethodPresent&&(e.paymentMethodPresent=this.paymentMethodPresent),this.config.onReadyToPayChange(e)}}}))}setClassName(e,t){const n=t.filter(e=>e).join(" ");n?e.className=n:e.removeAttribute("class")}appendStyles(){var e,t;if("undefined"==typeof document)return;const n=null===(e=this.element)||void 0===e?void 0:e.getRootNode(),o="default-google-style-"+this.options.cssSelector.replace(/[^\w-]+/g,"");if(n&&!(null===(t=n.getElementById)||void 0===t?void 0:t.call(n,o))){const e=document.createElement("style");e.id=o,e.type="text/css",e.innerHTML=`\n          ${this.options.cssSelector} {\n            display: inline-block;\n          }\n          ${this.options.cssSelector}.not-ready {\n            width: 0;\n            height: 0;\n            overflow: hidden;\n          }\n        `,n instanceof Document&&n.head?n.head.appendChild(e):n.appendChild(e)}}isClientInvalidated(e){if(!this.oldInvalidationValues)return!0;return this.getInvalidationValues(e).some((e,t)=>e!==this.oldInvalidationValues[t])}getInvalidationValues(e){var t,n;return[e.environment,e.existingPaymentMethodRequired,!!e.onPaymentDataChanged,!!e.onPaymentAuthorized,e.buttonColor,e.buttonType,e.buttonSizeMode,e.paymentRequest.merchantInfo.merchantId,e.paymentRequest.merchantInfo.merchantName,null===(t=e.paymentRequest.merchantInfo.softwareInfo)||void 0===t?void 0:t.id,null===(n=e.paymentRequest.merchantInfo.softwareInfo)||void 0===n?void 0:n.version]}}const r="google-pay-button-container";class l extends n.default.Component{constructor(){super(...arguments),this.manager=new s({cssSelector:"."+r,softwareInfoId:"@google-pay/button-react",softwareInfoVersion:"2.2.1"}),this.elementRef=n.default.createRef()}componentDidMount(){return o(this,void 0,void 0,(function*(){const e=this.elementRef.current;e&&(yield this.manager.mount(e),this.manager.configure(this.props))}))}componentWillUnmount(){this.manager.unmount()}componentDidUpdate(){this.manager.configure(this.props)}render(){return n.default.createElement("div",{ref:this.elementRef,className:[r,this.props.className].filter(e=>e).join(" "),style:this.props.style})}}return l}));
+    ***************************************************************************** */function o(e,t,n,o){return new(n||(n=Promise))((function(i,a){function s(e){try{l(o.next(e))}catch(e){a(e)}}function r(e){try{l(o.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,r)}l((o=o.apply(e,t||[])).next())}))}let i={};function a(e){const t=i[e];if(t)return t;const n=new Promise((t,n)=>{const o=document.createElement("script");o.src=e,o.async=!0;const a=()=>{t()},s=()=>{o.removeEventListener("load",a),o.removeEventListener("error",s),delete i[e],o.remove(),n(new Error("Unable to load script "+e))};o.addEventListener("load",a),o.addEventListener("error",s),document.body.appendChild(o)});return i[e]=n,n}class s{constructor(e){this.handleClick=()=>o(this,void 0,void 0,(function*(){const e=this.config;if(!e)throw new Error("google-pay-button: Missing configuration");const t=this.createLoadPaymentDataRequest(e);try{const n=yield this.client.loadPaymentData(t);e.onLoadPaymentData&&e.onLoadPaymentData(n)}catch(t){"CANCELED"===t.statusCode?e.onCancel&&e.onCancel(t):e.onError?e.onError(t):console.error(t)}})),this.options=e}getElement(){return this.element}isGooglePayLoaded(){var e,t;return"google"in(window||global)&&!!(null===(t=null===(e=null===google||void 0===google?void 0:google.payments)||void 0===e?void 0:e.api)||void 0===t?void 0:t.PaymentsClient)}mount(e){return o(this,void 0,void 0,(function*(){this.isGooglePayLoaded()||(yield a("https://pay.google.com/gp/p/js/pay.js")),this.element=e,e&&(this.appendStyles(),this.config&&this.updateElement())}))}unmount(){this.element=void 0}configure(e){let t=void 0;return this.config=e,this.oldInvalidationValues&&!this.isClientInvalidated(e)||(t=this.updateElement()),this.oldInvalidationValues=this.getInvalidationValues(e),null!=t?t:Promise.resolve()}createClientOptions(e){const t={environment:e.environment,merchantInfo:this.createMerchantInfo(e)};return(e.onPaymentDataChanged||e.onPaymentAuthorized)&&(t.paymentDataCallbacks={},e.onPaymentDataChanged&&(t.paymentDataCallbacks.onPaymentDataChanged=t=>e.onPaymentDataChanged(t)||{}),e.onPaymentAuthorized&&(t.paymentDataCallbacks.onPaymentAuthorized=t=>e.onPaymentAuthorized(t)||{})),t}createIsReadyToPayRequest(e){const t=e.paymentRequest;return{apiVersion:t.apiVersion,apiVersionMinor:t.apiVersionMinor,allowedPaymentMethods:t.allowedPaymentMethods,existingPaymentMethodRequired:e.existingPaymentMethodRequired}}createLoadPaymentDataRequest(e){return Object.assign(Object.assign({},e.paymentRequest),{merchantInfo:this.createMerchantInfo(e)})}createMerchantInfo(e){const t=Object.assign({},e.paymentRequest.merchantInfo);return t.softwareInfo||(t.softwareInfo={id:this.options.softwareInfoId,version:this.options.softwareInfoVersion}),t}isMounted(){return null!=this.element&&!1!==this.element.isConnected}removeButton(){if(this.element instanceof ShadowRoot||this.element instanceof Element)for(const e of Array.from(this.element.children))"STYLE"!==e.tagName&&e.remove()}updateElement(){var e;return o(this,void 0,void 0,(function*(){if(!this.isMounted())return;const t=this.element;if(!this.config)throw new Error("google-pay-button: Missing configuration");this.removeButton(),this.client=new google.payments.api.PaymentsClient(this.createClientOptions(this.config));const n={buttonType:this.config.buttonType,buttonColor:this.config.buttonColor,buttonSizeMode:this.config.buttonSizeMode,buttonLocale:this.config.buttonLocale,onClick:this.handleClick},o=null===(e=this.element)||void 0===e?void 0:e.getRootNode();o instanceof ShadowRoot&&(n.buttonRootNode=o);const i=this.client.createButton(n);this.setClassName(t,[t.className,"not-ready"]),t.appendChild(i);let a,s=!1;try{a=yield this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config)),s=a.result&&!this.config.existingPaymentMethodRequired||a.result&&a.paymentMethodPresent&&this.config.existingPaymentMethodRequired||!1}catch(e){this.config.onError?this.config.onError(e):console.error(e)}if(this.isMounted()){if(s){try{this.client.prefetchPaymentData(this.createLoadPaymentDataRequest(this.config))}catch(e){console.log("Error with prefetch",e)}this.setClassName(t,(t.className||"").split(" ").filter(e=>e&&"not-ready"!==e))}if((this.isReadyToPay!==(null==a?void 0:a.result)||this.paymentMethodPresent!==(null==a?void 0:a.paymentMethodPresent))&&(this.isReadyToPay=!!(null==a?void 0:a.result),this.paymentMethodPresent=null==a?void 0:a.paymentMethodPresent,this.config.onReadyToPayChange)){const e={isButtonVisible:s,isReadyToPay:this.isReadyToPay};this.paymentMethodPresent&&(e.paymentMethodPresent=this.paymentMethodPresent),this.config.onReadyToPayChange(e)}}}))}setClassName(e,t){const n=t.filter(e=>e).join(" ");n?e.className=n:e.removeAttribute("class")}appendStyles(){var e,t,n;if("undefined"==typeof document)return;const o=null===(e=this.element)||void 0===e?void 0:e.getRootNode(),i=`default-google-style-${this.options.cssSelector.replace(/[^\w-]+/g,"")}-${null===(t=this.config)||void 0===t?void 0:t.buttonLocale}`;if(o&&!(null===(n=o.getElementById)||void 0===n?void 0:n.call(o,i))){const e=document.createElement("style");e.id=i,e.type="text/css",e.innerHTML=`\n          ${this.options.cssSelector} {\n            display: inline-block;\n          }\n          ${this.options.cssSelector}.not-ready {\n            width: 0;\n            height: 0;\n            overflow: hidden;\n          }\n        `,o instanceof Document&&o.head?o.head.appendChild(e):o.appendChild(e)}}isClientInvalidated(e){if(!this.oldInvalidationValues)return!0;return this.getInvalidationValues(e).some((e,t)=>e!==this.oldInvalidationValues[t])}getInvalidationValues(e){var t,n;return[e.environment,e.existingPaymentMethodRequired,!!e.onPaymentDataChanged,!!e.onPaymentAuthorized,e.buttonColor,e.buttonType,e.buttonLocale,e.buttonSizeMode,e.paymentRequest.merchantInfo.merchantId,e.paymentRequest.merchantInfo.merchantName,null===(t=e.paymentRequest.merchantInfo.softwareInfo)||void 0===t?void 0:t.id,null===(n=e.paymentRequest.merchantInfo.softwareInfo)||void 0===n?void 0:n.version]}}const r="google-pay-button-container";class l extends n.default.Component{constructor(){super(...arguments),this.manager=new s({cssSelector:"."+r,softwareInfoId:"@google-pay/button-react",softwareInfoVersion:"2.3.0"}),this.elementRef=n.default.createRef()}componentDidMount(){return o(this,void 0,void 0,(function*(){const e=this.elementRef.current;e&&(yield this.manager.mount(e),this.manager.configure(this.props))}))}componentWillUnmount(){this.manager.unmount()}componentDidUpdate(){this.manager.configure(this.props)}render(){return n.default.createElement("div",{ref:this.elementRef,className:[r,this.props.className].filter(e=>e).join(" "),style:this.props.style})}}return l}));

package.json

 {
   "name": "@google-pay/button-react",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "React component for Google Pay button",
@@ -21,3 +21,3 @@ "main": "dist/index.es5.min.js",
   "dependencies": {
-    "@types/googlepay": "^0.5.1"
+    "@types/googlepay": "^0.5.2"
   },
@@ -24,0 +24,0 @@ "peerDependencies": {

README.md

@@ -83,2 +83,17 @@ # Google Pay React button
   <tr>
+    <td><p>buttonLocale</p></td>
+    <td><p><code>string</code></p></td>
+    <td>
+      <p>Optional.</p>
+      <p>This <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">ISO 639-1</a> code represents the desired button language.</p>
+      <p>Supported locales include <code>en</code>, <code>ar</code>, <code>bg</code>, <code>ca</code>, <code>cs</code>, <code>da</code>,
+        <code>de</code>, <code>el</code>, <code>es</code>, <code>et</code>, <code>fi</code>, <code>fr</code>, <code>hr</code>, <code>id</code>,
+        <code>it</code>, <code>ja</code>, <code>ko</code>, <code>ms</code>, <code>nl</code>, <code>no</code>, <code>pl</code>, <code>pt</code>,
+        <code>ru</code>, <code>sk</code>, <code>sl</code>, <code>sr</code>, <code>sv</code>, <code>th</code>, <code>tr</code>, <code>uk</code>,
+        and <code>zh</code>.
+      </p>
+      <p>Default value is determined by the browser/operating system locale.</p>
+    </td>
+  </tr>
+  <tr>
     <td><p>buttonSizeMode</p></td>
@@ -85,0 +100,0 @@ <td><p><code>"static" | "fill"</code></p></td>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90026

increased by2.4%

Lines of code

1101

increased by0.92%

Number of lines in readme file

217

increased by7.43%

Dependency changes

• Updated@types/googlepay@^0.5.2