@payrails/web-sdk 4.1.0-RC.3 → 4.1.0-RC.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payrails/web-sdk",
-  "version": "4.1.0-RC.3",
+  "version": "4.1.0-RC.5",
   "description": "SDK providing tokenization options on the client for merchants",
   "main": "index.js",
   "types": "payrails.d.ts",

package/payrails-styles.css

@@ -158,32 +158,144 @@
 }
 
 #payrails-dropin-component {
-  background: #ffffff;
-  box-shadow:
-    0px 0px 1px rgba(66, 71, 76, 0.32),
-    0px 4px 8px rgba(66, 71, 76, 0.06),
-    0px 8px 48px #eeeeee;
-  border-radius: 16px;
-  border: 1px solid #eae8ee;
-  width: 100%;
+  border-radius: 0;
+  box-shadow: none;
+  background-color: rgba(246, 247, 248, 1);
 
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 24px;
   position: relative;
+  border: 1px solid rgb(223, 224, 225);
+}
+
+.payrails-dropin-item {
+  border-radius: 0;
+  background-color: white;
+  padding: 20px;
+  transition: border 500ms ease-out;
+  width: 100%;
+  border: 1px solid rgb(223, 224, 225);
+}
+
+.payrails-dropin-item:hover {
+  border-color: black;
+}
+
+.payrails-dropin-item.active {
+  border-color: black;
+}
+
+.payrails-dropin-item button {
+  background-color: rgba(25, 25, 25, 1);
+  width: 100%;
+  border-radius: 0;
+  color: white;
+  text-transform: uppercase;
+  font-weight: medium;
+  padding: 20px;
+  height: auto;
+  cursor: pointer;
+}
+
+.payrails-dropin-item button:hover:not([disabled], .black) {
+  background-color: rgba(59, 64, 71, 1);
 }
 
 .payrails-dropin-item input[type='radio'] {
-  width: auto;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 20px !important;
+  height: 20px !important;
+  border: 2px solid rgba(140, 145, 152, 0.5);
+  border-radius: 50%;
+  padding: 2px;
+  cursor: pointer;
+  background-clip: padding-box;
+  position: relative;
   margin-right: 8px;
 }
 
-.payrails-dropin-item {
-  border: 1px solid #eae8ee;
+.payrails-dropin-item input[type='radio']:checked:after {
+  content: '';
+  display: block;
+  width: 10px;
+  height: 10px;
+  background-color: rgba(25, 25, 25, 1);
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.payrails-dropin-item input[type='radio']:checked {
+  border-color: rgba(103, 109, 117, 1);
+}
+
+.payrails-dropin-item input[type='radio']:focus {
+  box-shadow: 0 0 0 2px rgba(140, 145, 152, 0.5);
+}
+
+.payrails-dropin-item input[type='radio']:hover,
+.payrails-dropin-item:hover input[type='radio'] {
+  border-color: rgba(140, 145, 152, 0.8);
+}
+
+.payrails-dropin-item label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.payrails-dropin-item.payrails-store-instrument {
+  display: block;
+  margin-top: 20px !important;
+}
+
+.payrails-dropin-item .payrails-store-instrument input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 20px !important;
+  height: 20px !important;
+  border: 2px solid rgba(140, 145, 152, 0.5);
   border-radius: 4px;
-  padding: 16px;
-  width: 100%;
+  padding: 2px;
+  cursor: pointer;
+  background-clip: padding-box;
+  position: relative;
+}
+
+.payrails-dropin-item
+  .payrails-store-instrument
+  input[type='checkbox']:checked:after {
+  content: '\2714';
+  display: block;
+  color: white;
+  position: absolute;
+  font-size: 10px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.payrails-dropin-item
+  .payrails-store-instrument
+  input[type='checkbox']:checked {
+  border-color: rgba(103, 109, 117, 1);
+  background-color: rgba(25, 25, 25, 1);
+}
+
+.payrails-dropin-item .payrails-store-instrument input[type='checkbox']:focus {
+  box-shadow: 0 0 0 2px rgba(140, 145, 152, 0.5);
+}
+
+.payrails-dropin-item .payrails-store-instrument input[type='checkbox']:hover,
+.payrails-dropin-item .payrails-store-instrument:hover input[type='checkbox'] {
+  border-color: rgba(140, 145, 152, 0.8);
 }
 
 #payrails-dropin-component * {

package/payrails.d.ts

@@ -475,7 +475,7 @@ interface Mountable {
 }
 interface ElementOptions {
     id?: string;
-    className?: string;
+    className?: string | string[];
     styles?: Partial<CSSStyleDeclaration>;
 }
 declare class PayrailsElement implements Mountable {
@@ -591,7 +591,6 @@ interface CardFormOptions extends StoreInstrumentElementOptions {
         wrapper?: Partial<CSSStyleDeclaration>;
         base?: Partial<CSSStyleDeclaration>;
         storeCardCheckbox?: Partial<CSSStyleDeclaration>;
-        storeInstrumentCheckbox?: Partial<CSSStyleDeclaration>;
         errorTextStyles?: {
             base: Partial<CSSStyleDeclaration>;
         };
@@ -601,7 +600,7 @@ interface CardFormOptions extends StoreInstrumentElementOptions {
         labels?: {
             [key in ElementType | 'all']?: Partial<CSSStyleDeclaration>;
         };
-    };
+    } & StoreInstrumentElementOptions['styles'];
 }
 declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
     private readonly collectContainer;
@@ -712,8 +711,7 @@ interface GooglePayButtonOptions extends StoreInstrumentElementOptions {
         buttonType?: google.payments.api.ButtonType;
         buttonSizeMode?: google.payments.api.ButtonSizeMode;
         buttonLocale?: string;
-        storeInstrumentCheckbox?: Partial<CSSStyleDeclaration>;
-    };
+    } & StoreInstrumentElementOptions['styles'];
 }
 declare class GooglePayButton extends PayrailsElementWithStoreInstrumentCheckbox {
     private sdkConfig;
@@ -812,8 +810,7 @@ interface PaypalButtonOptions extends StoreInstrumentElementOptions {
         label?: 'paypal' | 'checkout' | 'buynow' | 'pay' | 'installment' | 'subscribe' | 'donate';
         shape?: 'rect' | 'pill';
         tagline?: boolean;
-        storeInstrumentCheckbox?: Partial<CSSStyleDeclaration>;
-    };
+    } & StoreInstrumentElementOptions['styles'];
 }
 declare class PaypalButton extends PayrailsElementWithStoreInstrumentCheckbox {
     private sdkConfig;
@@ -875,6 +872,7 @@ declare class Dropin extends PayrailsElement {
     private onAuthorizeSuccess;
     private onAuthorizeFailed;
     private isStoredInstrumentEnabled;
+    private applyStyles;
 }
 interface StorablePaymentMethodConfiguration extends StoreInstrumentElementOptions {
     showStoredInstruments?: boolean;
@@ -907,6 +905,9 @@ interface DropinOptions {
         genericRedirect?: GenericRedirectDropinOptions['translations'];
     };
     styles?: {
+        container?: {
+            styles?: Partial<CSSStyleDeclaration>;
+        };
         element?: DropinElementStyles;
         googlePayButton?: GooglePayButtonOptions['styles'];
         paypalButton?: PaypalDropinOptions['styles'];