Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@google-pay/button-react

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.1.0 to 1.1.1

2

dist/index.js

@@ -412,3 +412,3 @@ import React from 'react';

var name = "@google-pay/button-react";
var version = "1.1.0";
var version = "1.1.1";

@@ -415,0 +415,0 @@ /**

2

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,s){function a(e){try{l(o.next(e))}catch(e){s(e)}}function r(e){try{l(o.throw(e))}catch(e){s(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(a,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 s=()=>{t()},a=()=>{i.removeEventListener("load",s),i.removeEventListener("error",a),delete n[e],i.remove(),o(new Error("Unable to load script "+e))};i.addEventListener("load",s),i.addEventListener("error",a),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(){return t(this,void 0,void 0,(function*(){if(!this.isMounted())return;const e=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 t=this.client.createButton({buttonType:this.config.buttonType,buttonColor:this.config.buttonColor,onClick:this.handleClick});this.copyGPayStyles(),this.setClassName(e,[e.className,"not-ready"]),e.appendChild(t);let n,o=!1;try{n=yield this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config)),o=n.result&&!this.config.existingPaymentMethodRequired||n.result&&n.paymentMethodPresent&&this.config.existingPaymentMethodRequired||!1}catch(e){console.error(e)}if(this.isMounted()){if(o){try{this.client.prefetchPaymentData(this.createLoadPaymentDataRequest(this.config))}catch(e){console.log("Error with prefetch",e)}this.setClassName(e,(e.className||"").split(" ").filter(e=>e&&"not-ready"!==e))}if((this.isReadyToPay!==(null==n?void 0:n.result)||this.paymentMethodPresent!==(null==n?void 0:n.paymentMethodPresent))&&(this.isReadyToPay=!!(null==n?void 0:n.result),this.paymentMethodPresent=null==n?void 0:n.paymentMethodPresent,this.config.onReadyToPayChange)){const e={isButtonVisible:o,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 ${this.options.cssSelector}.fill > div,\n ${this.options.cssSelector}.fill > div > button, ${this.options.cssSelector}.fill > div > button.long, ${this.options.cssSelector}.fill > div > button.short {\n width: 100%;\n height: inherit;\n }\n `,n instanceof Document&&n.head?n.head.appendChild(e):n.appendChild(e)}}copyGPayStyles(){var e;const t=null===(e=this.element)||void 0===e?void 0:e.getRootNode();if(t&&t instanceof ShadowRoot){const e=document.querySelectorAll("head > style"),n=Array.from(e).filter(e=>-1!==e.innerHTML.indexOf(".gpay-")),o=new Set(Array.from(t.childNodes).filter(e=>e instanceof HTMLElement&&"STYLE"===e.nodeName&&e.id).map(e=>e.id));let i=0;for(const e of n){i++;const n="google-pay-button-style-"+i;if(!o.has(n)){const n=document.createElement("style");n.innerHTML=e.innerHTML,t.appendChild(n)}}}}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.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 s="google-pay-button-container";class a extends e.Component{constructor(){super(...arguments),this.manager=new i({cssSelector:"."+s,softwareInfoId:"@google-pay/button-react",softwareInfoVersion:"1.1.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:[s,this.props.className].filter(e=>e).join(" "),style:this.props.style})}}export default a;
***************************************************************************** */function t(e,t,n,o){return new(n||(n=Promise))((function(i,s){function a(e){try{l(o.next(e))}catch(e){s(e)}}function r(e){try{l(o.throw(e))}catch(e){s(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(a,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 s=()=>{t()},a=()=>{i.removeEventListener("load",s),i.removeEventListener("error",a),delete n[e],i.remove(),o(new Error("Unable to load script "+e))};i.addEventListener("load",s),i.addEventListener("error",a),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(){return t(this,void 0,void 0,(function*(){if(!this.isMounted())return;const e=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 t=this.client.createButton({buttonType:this.config.buttonType,buttonColor:this.config.buttonColor,onClick:this.handleClick});this.copyGPayStyles(),this.setClassName(e,[e.className,"not-ready"]),e.appendChild(t);let n,o=!1;try{n=yield this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config)),o=n.result&&!this.config.existingPaymentMethodRequired||n.result&&n.paymentMethodPresent&&this.config.existingPaymentMethodRequired||!1}catch(e){console.error(e)}if(this.isMounted()){if(o){try{this.client.prefetchPaymentData(this.createLoadPaymentDataRequest(this.config))}catch(e){console.log("Error with prefetch",e)}this.setClassName(e,(e.className||"").split(" ").filter(e=>e&&"not-ready"!==e))}if((this.isReadyToPay!==(null==n?void 0:n.result)||this.paymentMethodPresent!==(null==n?void 0:n.paymentMethodPresent))&&(this.isReadyToPay=!!(null==n?void 0:n.result),this.paymentMethodPresent=null==n?void 0:n.paymentMethodPresent,this.config.onReadyToPayChange)){const e={isButtonVisible:o,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 ${this.options.cssSelector}.fill > div,\n ${this.options.cssSelector}.fill > div > button, ${this.options.cssSelector}.fill > div > button.long, ${this.options.cssSelector}.fill > div > button.short {\n width: 100%;\n height: inherit;\n }\n `,n instanceof Document&&n.head?n.head.appendChild(e):n.appendChild(e)}}copyGPayStyles(){var e;const t=null===(e=this.element)||void 0===e?void 0:e.getRootNode();if(t&&t instanceof ShadowRoot){const e=document.querySelectorAll("head > style"),n=Array.from(e).filter(e=>-1!==e.innerHTML.indexOf(".gpay-")),o=new Set(Array.from(t.childNodes).filter(e=>e instanceof HTMLElement&&"STYLE"===e.nodeName&&e.id).map(e=>e.id));let i=0;for(const e of n){i++;const n="google-pay-button-style-"+i;if(!o.has(n)){const n=document.createElement("style");n.innerHTML=e.innerHTML,t.appendChild(n)}}}}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.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 s="google-pay-button-container";class a extends e.Component{constructor(){super(...arguments),this.manager=new i({cssSelector:"."+s,softwareInfoId:"@google-pay/button-react",softwareInfoVersion:"1.1.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:[s,this.props.className].filter(e=>e).join(" "),style:this.props.style})}}export default a;

2

dist/index.umd.js

@@ -420,3 +420,3 @@ (function (global, factory) {

var name = "@google-pay/button-react";
var version = "1.1.0";
var version = "1.1.1";

@@ -423,0 +423,0 @@ /**

2

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,s){function a(e){try{l(o.next(e))}catch(e){s(e)}}function r(e){try{l(o.throw(e))}catch(e){s(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(a,r)}l((o=o.apply(e,t||[])).next())}))}let i={};function s(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 s=()=>{t()},a=()=>{o.removeEventListener("load",s),o.removeEventListener("error",a),delete i[e],o.remove(),n(new Error("Unable to load script "+e))};o.addEventListener("load",s),o.addEventListener("error",a),document.body.appendChild(o)});return i[e]=n,n}class a{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 s("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(){return o(this,void 0,void 0,(function*(){if(!this.isMounted())return;const e=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 t=this.client.createButton({buttonType:this.config.buttonType,buttonColor:this.config.buttonColor,onClick:this.handleClick});this.copyGPayStyles(),this.setClassName(e,[e.className,"not-ready"]),e.appendChild(t);let n,o=!1;try{n=yield this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config)),o=n.result&&!this.config.existingPaymentMethodRequired||n.result&&n.paymentMethodPresent&&this.config.existingPaymentMethodRequired||!1}catch(e){console.error(e)}if(this.isMounted()){if(o){try{this.client.prefetchPaymentData(this.createLoadPaymentDataRequest(this.config))}catch(e){console.log("Error with prefetch",e)}this.setClassName(e,(e.className||"").split(" ").filter(e=>e&&"not-ready"!==e))}if((this.isReadyToPay!==(null==n?void 0:n.result)||this.paymentMethodPresent!==(null==n?void 0:n.paymentMethodPresent))&&(this.isReadyToPay=!!(null==n?void 0:n.result),this.paymentMethodPresent=null==n?void 0:n.paymentMethodPresent,this.config.onReadyToPayChange)){const e={isButtonVisible:o,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 ${this.options.cssSelector}.fill > div,\n ${this.options.cssSelector}.fill > div > button, ${this.options.cssSelector}.fill > div > button.long, ${this.options.cssSelector}.fill > div > button.short {\n width: 100%;\n height: inherit;\n }\n `,n instanceof Document&&n.head?n.head.appendChild(e):n.appendChild(e)}}copyGPayStyles(){var e;const t=null===(e=this.element)||void 0===e?void 0:e.getRootNode();if(t&&t instanceof ShadowRoot){const e=document.querySelectorAll("head > style"),n=Array.from(e).filter(e=>-1!==e.innerHTML.indexOf(".gpay-")),o=new Set(Array.from(t.childNodes).filter(e=>e instanceof HTMLElement&&"STYLE"===e.nodeName&&e.id).map(e=>e.id));let i=0;for(const e of n){i++;const n="google-pay-button-style-"+i;if(!o.has(n)){const n=document.createElement("style");n.innerHTML=e.innerHTML,t.appendChild(n)}}}}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.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 a({cssSelector:"."+r,softwareInfoId:"@google-pay/button-react",softwareInfoVersion:"1.1.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}));
***************************************************************************** */function o(e,t,n,o){return new(n||(n=Promise))((function(i,s){function a(e){try{l(o.next(e))}catch(e){s(e)}}function r(e){try{l(o.throw(e))}catch(e){s(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(a,r)}l((o=o.apply(e,t||[])).next())}))}let i={};function s(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 s=()=>{t()},a=()=>{o.removeEventListener("load",s),o.removeEventListener("error",a),delete i[e],o.remove(),n(new Error("Unable to load script "+e))};o.addEventListener("load",s),o.addEventListener("error",a),document.body.appendChild(o)});return i[e]=n,n}class a{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 s("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(){return o(this,void 0,void 0,(function*(){if(!this.isMounted())return;const e=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 t=this.client.createButton({buttonType:this.config.buttonType,buttonColor:this.config.buttonColor,onClick:this.handleClick});this.copyGPayStyles(),this.setClassName(e,[e.className,"not-ready"]),e.appendChild(t);let n,o=!1;try{n=yield this.client.isReadyToPay(this.createIsReadyToPayRequest(this.config)),o=n.result&&!this.config.existingPaymentMethodRequired||n.result&&n.paymentMethodPresent&&this.config.existingPaymentMethodRequired||!1}catch(e){console.error(e)}if(this.isMounted()){if(o){try{this.client.prefetchPaymentData(this.createLoadPaymentDataRequest(this.config))}catch(e){console.log("Error with prefetch",e)}this.setClassName(e,(e.className||"").split(" ").filter(e=>e&&"not-ready"!==e))}if((this.isReadyToPay!==(null==n?void 0:n.result)||this.paymentMethodPresent!==(null==n?void 0:n.paymentMethodPresent))&&(this.isReadyToPay=!!(null==n?void 0:n.result),this.paymentMethodPresent=null==n?void 0:n.paymentMethodPresent,this.config.onReadyToPayChange)){const e={isButtonVisible:o,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 ${this.options.cssSelector}.fill > div,\n ${this.options.cssSelector}.fill > div > button, ${this.options.cssSelector}.fill > div > button.long, ${this.options.cssSelector}.fill > div > button.short {\n width: 100%;\n height: inherit;\n }\n `,n instanceof Document&&n.head?n.head.appendChild(e):n.appendChild(e)}}copyGPayStyles(){var e;const t=null===(e=this.element)||void 0===e?void 0:e.getRootNode();if(t&&t instanceof ShadowRoot){const e=document.querySelectorAll("head > style"),n=Array.from(e).filter(e=>-1!==e.innerHTML.indexOf(".gpay-")),o=new Set(Array.from(t.childNodes).filter(e=>e instanceof HTMLElement&&"STYLE"===e.nodeName&&e.id).map(e=>e.id));let i=0;for(const e of n){i++;const n="google-pay-button-style-"+i;if(!o.has(n)){const n=document.createElement("style");n.innerHTML=e.innerHTML,t.appendChild(n)}}}}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.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 a({cssSelector:"."+r,softwareInfoId:"@google-pay/button-react",softwareInfoVersion:"1.1.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}));

2

package.json
{
"name": "@google-pay/button-react",
"version": "1.1.0",
"version": "1.1.1",
"description": "React component for Google Pay button",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

9

README.md

@@ -54,3 +54,3 @@ # Google Pay React button

Try it out on [JSFiddle](https://jsfiddle.net/1Lwndx7b/), or see it in action with a
Try it out on [JSFiddle](https://jsfiddle.net/0qm5nbwh/), or see it in action with a
[React sample store](https://payments-react-store.web.app/)

@@ -83,7 +83,8 @@ ([source code](https://github.com/google-pay/react-store/tree/google-pay)).

<td><p>buttonType</p></td>
<td><p><code>"long" | "short"</code></p></td>
<td><p><code>"buy" | "plain" | "donate" | "long" | "short"</code></p></td>
<td>
<p>Optional.</p>
<p><code>"long"</code> buttons are presented with the <em>Buy with</em> prefix (localized based on the user's browser settings) in front of the Google Pay logo, while <code>"short"</code> buttons only displays the Google Pay logo.</p>
<p>Default value <code>"long"</code>.</p>
<p><code>"buy"</code> and <code>"donate"</code> display their respective prompts (localized based on the user's browser settings) with the Google Pay logo. The <code>"plain"</code> button only displays the Google Pay logo.</p>
<p><code>"long"</code> and <code>"short"</code> button types have been renamed to <code>"buy"</code> and <code>"plain"</code>, but are still valid button types for backwards compatability.</p>
<p>Default value <code>"buy"</code>.</p>
</td>

@@ -90,0 +91,0 @@ </tr>

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc