From 01e91507b0b8794f96dc30670b977d2cfd647bf5 Mon Sep 17 00:00:00 2001
From: andrew-paystack <andrew@paystack.com>
Date: Tue, 22 Sep 2026 14:56:47 +0300
Subject: [PATCH] feat: add google pay

---
 .../inlinejs/callback-onelementsmount.js              |  2 +-
 dist/doc/developer-tools/inlinejs/payment-request.js  | 11 ++++++++++-
 .../inlinejs/callback-onelementsmount/index.js        |  2 +-
 .../developer-tools/inlinejs/payment-request/index.js | 11 ++++++++++-
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/dist/doc/developer-tools/inlinejs/callback-onelementsmount.js b/dist/doc/developer-tools/inlinejs/callback-onelementsmount.js
index 8aed130..939947c 100644
--- a/dist/doc/developer-tools/inlinejs/callback-onelementsmount.js
+++ b/dist/doc/developer-tools/inlinejs/callback-onelementsmount.js
@@ -1,4 +1,4 @@
-const js = `onElementsMount: (elements) =>{ // { applePay: true } or null
+const js = `onElementsMount: (elements) =>{ // { applePay: true, googlePay: true } or null
   if (elements) {
     console.log("Successfully mounted elements: ", JSON.stringify(elements));
   } else {
diff --git a/dist/doc/developer-tools/inlinejs/payment-request.js b/dist/doc/developer-tools/inlinejs/payment-request.js
index 1575ec4..daacdd9 100644
--- a/dist/doc/developer-tools/inlinejs/payment-request.js
+++ b/dist/doc/developer-tools/inlinejs/payment-request.js
@@ -1,7 +1,7 @@
 const js = `const popup = new Paystack()
 
 const onElementsMount = (elements) => {
-  if (elements && elements.applePay) {
+  if (elements && (elements.applePay || elements.googlePay)) {
     document.querySelector("#pay-button").innerText = "More Payment Options";
   }
 }
@@ -16,12 +16,21 @@ try {
     loadPaystackCheckoutButton: 'pay-button',
     styles: {
       theme: 'dark',
+      orientation: 'horizontal',
       applePay: {
         width: '100%',
         height: '50px',
         borderRadius: '3px',
         type: 'plain',
         locale: 'en'
+      },
+      googlePay: {
+        width: '100%',
+        height: '50px',
+        borderRadius: '3px',
+        buttonType: 'plain',
+        buttonColor: 'black',
+        buttonSizeMode: 'fill'
       }
     },
     onElementsMount,
diff --git a/src/doc/developer-tools/inlinejs/callback-onelementsmount/index.js b/src/doc/developer-tools/inlinejs/callback-onelementsmount/index.js
index 37818fd..e9e3cc6 100644
--- a/src/doc/developer-tools/inlinejs/callback-onelementsmount/index.js
+++ b/src/doc/developer-tools/inlinejs/callback-onelementsmount/index.js
@@ -1,4 +1,4 @@
-onElementsMount: (elements) =>{ // { applePay: true } or null
+onElementsMount: (elements) =>{ // { applePay: true, googlePay: true } or null
   if (elements) {
     console.log("Successfully mounted elements: ", JSON.stringify(elements));
   } else {
diff --git a/src/doc/developer-tools/inlinejs/payment-request/index.js b/src/doc/developer-tools/inlinejs/payment-request/index.js
index 7caae24..04f3efa 100644
--- a/src/doc/developer-tools/inlinejs/payment-request/index.js
+++ b/src/doc/developer-tools/inlinejs/payment-request/index.js
@@ -1,7 +1,7 @@
 const popup = new Paystack()
 
 const onElementsMount = (elements) => {
-  if (elements && elements.applePay) {
+  if (elements && (elements.applePay || elements.googlePay)) {
     document.querySelector("#pay-button").innerText = "More Payment Options";
   }
 }
@@ -16,12 +16,21 @@ try {
     loadPaystackCheckoutButton: 'pay-button',
     styles: {
       theme: 'dark',
+      orientation: 'horizontal',
       applePay: {
         width: '100%',
         height: '50px',
         borderRadius: '3px',
         type: 'plain',
         locale: 'en'
+      },
+      googlePay: {
+        width: '100%',
+        height: '50px',
+        borderRadius: '3px',
+        buttonType: 'plain',
+        buttonColor: 'black',
+        buttonSizeMode: 'fill'
       }
     },
     onElementsMount,