INTER-3958: Format ppcp express pay buttons to match other express pa…

…y buttons in templates
bold-commerce · Jun 4, 2024 · 516e9e0 · 516e9e0
1 parent 6da12f2
commit 516e9e0
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/src/paypal/ppcp_apple/createPPCPApple.ts b/src/paypal/ppcp_apple/createPPCPApple.ts
@@ -8,7 +8,7 @@ export function createPPCPApple(): void {
         // creating a paypal-apple payment div inside express payment container
         const ppcpAppleDiv = document.createElement('div');
         ppcpAppleDiv.id = 'ppcp-apple-express-payment';
-        ppcpAppleDiv.className = 'ppcp-apple-express-payment';
+        ppcpAppleDiv.className = 'ppcp-apple-express-payment express-payment';
         ppcpAppleDiv.dataset.testid = 'ppcp-apple-express-payment';
 
         const button = document.createElement('button');

diff --git a/src/paypal/ppcp_buttons/ppcpOnLoad.ts b/src/paypal/ppcp_buttons/ppcpOnLoad.ts
@@ -18,11 +18,13 @@ export async function ppcpOnLoad(payment: IExpressPayPaypalCommercePlatformButto
     const paypalButtonDivId = 'ppcp-paypal-express-payment-button';
     paypalButtonDiv.id = paypalButtonDivId;
     paypalButtonDiv.dataset.testid = paypalButtonDivId;
+    paypalButtonDiv.className = 'express-payment';
 
     const payLaterButtonDiv = document.createElement('div');
     const payLaterButtonDivId = 'ppcp-paylater-express-payment-button';
     payLaterButtonDiv.id = payLaterButtonDivId;
     payLaterButtonDiv.dataset.testid = payLaterButtonDivId;
+    payLaterButtonDiv.className = 'express-payment';
 
     // creating a paypal payment div inside express payment container
     const paypalDiv = document.createElement('div');

diff --git a/src/style.css b/src/style.css
@@ -5,6 +5,7 @@
 
 .ppcp-express-payment{
     width: auto;
+    display: contents;
 }
 
 .ppcp-apple-pay-button{