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

package/package.json

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

package/payrails-styles.css

@@ -33,35 +33,6 @@
   cursor: not-allowed;
 }
 
-/* The Modal (background) */
-#payrails-3ds-popup-background {
-  position: fixed;
-  z-index: 10000;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: rgb(0, 0, 0);
-  background-color: rgba(0, 0, 0, 0.4);
-  display: flex;
-  align-content: center;
-}
-
-/* Modal Content/Box */
-#payrails-3ds-challenge {
-  background-color: #fefefe;
-  margin: 15% auto;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid #888;
-  border-radius: 4px;
-}
-
-#payrails-3ds-frame {
-  border: 0;
-}
-
 #payrails-card-payment-button .dot-flashing {
   position: relative;
   width: 10px;
@@ -110,6 +81,33 @@
   }
 }
 
+#payrails-popup {
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid #888;
+  border-radius: 4px;
+}
+
+#payrails-popup-background {
+  position: fixed;
+  z-index: 10000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-content: center;
+}
+
+#payrails-frame {
+  border: 0;
+}
+
 .payrails-store-instrument-checkbox {
   margin-right: 4px;
 }

package/payrails.d.ts

@@ -4,7 +4,8 @@ declare enum PAYMENT_METHOD_CODES {
     'CARD' = "card",
     'GOOGLE_PAY' = "googlePay",
     'PAYPAL' = "payPal",
-    'APPLE_PAY' = "applePay"
+    'APPLE_PAY' = "applePay",
+    'GENERIC_REDIRECT' = "genericRedirect"
 }
 declare enum PAYMENT_INSTRUMENT_STATUS {
     'ENABLED' = "enabled",
@@ -122,6 +123,7 @@ interface WorkflowExecutionResponse {
                 };
             };
         };
+        redirect?: string;
         '3ds'?: string;
         self: string;
     };
@@ -473,7 +475,7 @@ interface Mountable {
 }
 interface ElementOptions {
     id?: string;
-    className?: string;
+    className?: string | string[];
     styles?: Partial<CSSStyleDeclaration>;
 }
 declare class PayrailsElement implements Mountable {
@@ -498,6 +500,7 @@ interface StoreInstrumentElementOptions extends ElementOptions {
     };
     styles?: {
         storeInstrumentCheckbox?: Partial<CSSStyleDeclaration>;
+        storeInsrtumentCheckboxClassName?: string;
     };
     events?: PayrailsSDKEvents;
 }
@@ -589,7 +592,6 @@ interface CardFormOptions extends StoreInstrumentElementOptions {
         wrapper?: Partial<CSSStyleDeclaration>;
         base?: Partial<CSSStyleDeclaration>;
         storeCardCheckbox?: Partial<CSSStyleDeclaration>;
-        storeInstrumentCheckbox?: Partial<CSSStyleDeclaration>;
         errorTextStyles?: {
             base: Partial<CSSStyleDeclaration>;
         };
@@ -599,7 +601,7 @@ interface CardFormOptions extends StoreInstrumentElementOptions {
         labels?: {
             [key in ElementType | 'all']?: Partial<CSSStyleDeclaration>;
         };
-    };
+    } & StoreInstrumentElementOptions['styles'];
 }
 declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
     private readonly collectContainer;
@@ -710,8 +712,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;
@@ -728,9 +729,64 @@ declare class GooglePayButton extends PayrailsElementWithStoreInstrumentCheckbox
     unmount(): void;
 }
 
+interface DropinElementEvents {
+    onActivate?: () => void;
+    onDeactivate?: () => void;
+}
 interface DropinElementStyles {
     base?: Partial<CSSStyleDeclaration>;
     active?: Partial<CSSStyleDeclaration>;
+    className?: string;
+}
+declare abstract class DropinElement extends PayrailsElement {
+    protected events?: DropinElementEvents | undefined;
+    protected styles?: DropinElementStyles | undefined;
+    protected abstract component: PayrailsElement;
+    protected isActive: boolean;
+    input: HTMLInputElement;
+    protected label: HTMLLabelElement;
+    protected constructor(id: string, label: string, events?: DropinElementEvents | undefined, styles?: DropinElementStyles | undefined);
+    get identifier(): string;
+    deactivate(): void;
+    protected applyBaseStyles(): void;
+    protected applyActiveStyles(): void;
+    activate(): void;
+}
+
+interface GenericRedirectButtonOptions {
+    styles?: Partial<CSSStyleDeclaration>;
+    translations?: {
+        label?: string;
+    };
+    events?: PaymentEvents;
+}
+declare class GenericRedirectButton extends PayrailsElement {
+    private sdkConfig;
+    private execution;
+    protected options: GenericRedirectButtonOptions;
+    private button;
+    constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options: GenericRedirectButtonOptions);
+    private paymentExecutor;
+    private onClick;
+    private configureButton;
+    mount(location: string): void;
+}
+
+interface GenericRedirectDropinOptions {
+    styles?: {
+        button?: GenericRedirectButtonOptions['styles'];
+    } & DropinElementStyles;
+    translations?: {
+        label?: string;
+        button?: GenericRedirectButtonOptions['translations'];
+    };
+    events?: DropinElementEvents;
+}
+declare class GenericRedirectDropin extends DropinElement {
+    private sdkConfig;
+    private execution;
+    protected component: GenericRedirectButton;
+    constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options?: GenericRedirectDropinOptions);
 }
 
 interface GooglePayDropinOptions extends GooglePayButtonOptions {
@@ -754,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;
@@ -804,8 +859,10 @@ declare class Dropin extends PayrailsElement {
     private applePay;
     private cardForm;
     private paypal;
+    private genericRedirect;
     constructor(collectContainer: PayrailsCollectContainer, clientConfig: PayrailsClientOptions, dropinConfig: DropinOptions, execution: WorkflowExecution, sdkConfig: SdkConfiguration, returnLinks: RedirectReturnLinks);
     private createStoredInstrumentElement;
+    private createGenericRedirectButton;
     private createCreditCardButton;
     private createGooglePayButton;
     private createPayPalButton;
@@ -815,6 +872,7 @@ declare class Dropin extends PayrailsElement {
     private onAuthorizeSuccess;
     private onAuthorizeFailed;
     private isStoredInstrumentEnabled;
+    private applyStyles;
 }
 interface StorablePaymentMethodConfiguration extends StoreInstrumentElementOptions {
     showStoredInstruments?: boolean;
@@ -847,14 +905,20 @@ interface DropinOptions {
             fail?: string;
         };
         paypalButton?: PaypalDropinOptions['translations'];
+        genericRedirect?: GenericRedirectDropinOptions['translations'];
     };
     styles?: {
+        container?: {
+            styles?: Partial<CSSStyleDeclaration>;
+            className?: string;
+        };
         element?: DropinElementStyles;
         googlePayButton?: GooglePayButtonOptions['styles'];
         paypalButton?: PaypalDropinOptions['styles'];
         applePayButton?: ApplePayButtonOptions['styles'];
         cardForm?: CardFormOptions['styles'];
         cardPaymentButton?: CardPaymentButtonOptions['styles'];
+        genericRedirect?: GenericRedirectDropin['styles'];
     };
 }
 
@@ -898,6 +962,7 @@ declare class Payrails {
     private __cardPaymentButton;
     private __fraudNet;
     private __paypalButton;
+    private __genericRedirectButton;
     static preloadCardForm: () => void;
     static init(initResponse: InitOptions, options?: PayrailsClientOptions): Payrails;
     update(amount: PayrailsAmount): void;
@@ -914,6 +979,7 @@ declare class Payrails {
     getAvailablePaymentMethods(): PAYMENT_METHOD_CODES[];
     paymentButton(options: CardPaymentButtonOptions): CardPaymentButton;
     paypalButton(options?: PaypalButtonOptions): PaypalButton;
+    genericRedirectButton(options?: GenericRedirectButtonOptions): GenericRedirectButton;
     getSavedPaypalAccounts(): StoredPaymentInstrument<PayPalMetadata>[];
     fraudNet(pageId: FraudNetPageId): FraudNet;
     private logIntegrationMode;