scope parent styles to drop-in form container

globalpayments · Sep 5, 2019 · 62a72d3 · 62a72d3
1 parent 5500e17
commit 62a72d3
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/src/credit-card/index.ts b/src/credit-card/index.ts
@@ -41,6 +41,8 @@ export function form(
     target = el;
   }
 
+  target.className = target.className + " secure-payment-form";
+
   const gateway = getGateway();
 
   if (gateway && gateway.getEnv(options) !== "production") {
@@ -115,6 +117,8 @@ export function trackReaderForm(
     target = el;
   }
 
+  target.className = target.className + " secure-payment-form";
+
   const gateway = getGateway();
 
   if (gateway && gateway.getEnv(options) !== "production") {

diff --git a/src/echeck/index.ts b/src/echeck/index.ts
@@ -42,6 +42,8 @@ export function form(
     target = el;
   }
 
+  target.className = target.className + " secure-payment-form";
+
   const gateway = getGateway();
 
   if (gateway && gateway.getEnv(options) !== "production") {

diff --git a/src/gift-and-loyalty/index.ts b/src/gift-and-loyalty/index.ts
@@ -42,6 +42,8 @@ export function form(
     target = el;
   }
 
+  target.className = target.className + " secure-payment-form";
+
   const gateway = getGateway();
 
   if (gateway && gateway.getEnv(options) !== "production") {

diff --git a/src/internal/lib/styles/default.ts b/src/internal/lib/styles/default.ts
@@ -139,38 +139,38 @@ export const fieldStyles = {
 };
 
 export const parentStyles = {
-  body: {
+  ".secure-payment-form": {
     "font-family": "sans-serif",
   },
 
-  label: {
+  ".secure-payment-form label": {
     color: "#555",
     "font-size": "13px",
     "font-weight": "bold",
     "line-height": "1.5",
     "text-transform": "uppercase",
   },
 
-  "#ss-banner": {
+  ".secure-payment-form #ss-banner": {
     background: `transparent url(${imageBase}[email protected]) no-repeat left center`,
     "background-size": "280px 34px",
     height: "40px",
     "margin-bottom": "7px",
   },
 
-  div: {
+  ".secure-payment-form div": {
     display: "block",
   },
 
-  iframe: {
+  ".secure-payment-form iframe": {
     width: "300px",
   },
 
-  ".form-row": {
+  ".secure-payment-form .form-row": {
     "margin-top": "10px",
   },
 
-  ".form-wrapper": {
+  ".secure-payment-form .form-wrapper": {
     display: "block",
     margin: "10px auto",
     width: "300px",