@payrails/web-sdk 4.1.0-RC.2 → 4.1.0-RC.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payrails/web-sdk",
-  "version": "4.1.0-RC.2",
+  "version": "4.1.0-RC.4",
   "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

@@ -500,7 +500,6 @@ interface StoreInstrumentElementOptions extends ElementOptions {
     };
     styles?: {
         storeInstrumentCheckbox?: Partial<CSSStyleDeclaration>;
-        storeInsrtumentCheckboxClassName?: string;
     };
     events?: PayrailsSDKEvents;
 }
@@ -736,7 +735,6 @@ interface DropinElementEvents {
 interface DropinElementStyles {
     base?: Partial<CSSStyleDeclaration>;
     active?: Partial<CSSStyleDeclaration>;
-    className?: string;
 }
 declare abstract class DropinElement extends PayrailsElement {
     protected events?: DropinElementEvents | undefined;
@@ -764,8 +762,9 @@ declare class GenericRedirectButton extends PayrailsElement {
     private sdkConfig;
     private execution;
     protected options: GenericRedirectButtonOptions;
+    private readonly returnLinks?;
     private button;
-    constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options: GenericRedirectButtonOptions);
+    constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options: GenericRedirectButtonOptions, returnLinks?: RedirectReturnLinks | undefined);
     private paymentExecutor;
     private onClick;
     private configureButton;
@@ -785,8 +784,9 @@ interface GenericRedirectDropinOptions {
 declare class GenericRedirectDropin extends DropinElement {
     private sdkConfig;
     private execution;
+    private readonly returnLinks?;
     protected component: GenericRedirectButton;
-    constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options?: GenericRedirectDropinOptions);
+    constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options?: GenericRedirectDropinOptions, returnLinks?: RedirectReturnLinks | undefined);
 }
 
 interface GooglePayDropinOptions extends GooglePayButtonOptions {
@@ -891,10 +891,7 @@ interface DropinOptions {
             clientDomain?: string;
         } & StorablePaymentMethodConfiguration;
     };
-    returnInfo?: {
-        success: string;
-        error: string;
-    };
+    returnInfo?: RedirectReturnLinks;
     events?: PayrailsSDKEvents;
     translations?: {
         googlePayButton?: GooglePayDropinOptions['translations'];
@@ -910,7 +907,6 @@ interface DropinOptions {
     styles?: {
         container?: {
             styles?: Partial<CSSStyleDeclaration>;
-            className?: string;
         };
         element?: DropinElementStyles;
         googlePayButton?: GooglePayButtonOptions['styles'];