@payrails/web-sdk 5.23.0 → 5.24.0-RC.1

package/package.json

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

package/payrails-styles.css

@@ -148,7 +148,6 @@
   display: flex;
   width: 100% !important;
   gap: 8px;
-  margin-top: 8px;
   position: relative;
 }
 .payrails-country-select-element {
@@ -726,10 +725,11 @@ button.payrails-generic-button {
 
 #payrails-container-wrapper {
   width: 100%;
-  height: 90px;
+  min-height: 90px;
 }
 
 .with-card-holder #payrails-container-wrapper {
   width: 100%;
-  height: 120px;
+  height: min-content;
+  min-height: 120px;
 }

package/payrails.d.ts

@@ -436,6 +436,7 @@ declare class CollectContainer extends Container {
     private iframe;
     constructor(options: any, metaData: any, skyflowElements: any, context: any);
     create: (input: CollectElementInput$1, options?: any) => CollectElement;
+    validate: () => Promise<unknown>;
     collect: (options?: ICollectOptions$1) => Promise<unknown>;
     unmount: () => void;
 }
@@ -476,6 +477,7 @@ declare class ComposableContainer extends Container {
     on: (eventName: string, handler: any) => void;
     mount: (domElement: any) => void;
     unmount: () => void;
+    validate: () => Promise<unknown>;
     collect: (options?: ICollectOptions) => Promise<unknown>;
 }
 
@@ -536,6 +538,10 @@ declare enum ElementType {
     EXPIRATION_DATE = "EXPIRATION_DATE"
 }
 
+type ValidateCardFormResult = {
+    isValid: boolean;
+    errors: string;
+};
 interface EncryptedCollectResult {
     vaultProviderConfigId: string;
     encryptedData: string;
@@ -597,6 +603,7 @@ declare class PayrailsCollectContainer implements Mountable {
     createCollectElement(options: CollectElementOptions): PayrailsSecureField;
     mount(selector: string): void;
     unmount(): void;
+    validate(): Promise<ValidateCardFormResult>;
     collect(): Promise<EncryptedCollectResult>;
     private collectPayrailsData;
     tokenize(opts: TokenizeOptions): Promise<SaveInstrumentResponse>;
@@ -707,6 +714,7 @@ declare class PayrailsElementWithPaymentInstallmentsDropdown extends PayrailsEle
 interface StoreInstrumentElementOptions extends ElementOptions {
     showStoreInstrumentCheckbox?: boolean;
     alwaysStoreInstrument?: boolean;
+    defaultStoreInstrumentState?: 'checked' | 'unchecked';
     translations?: {
         labels?: {
             storeInstrument?: string;
@@ -739,10 +747,13 @@ interface OnChange {
     bin?: string;
     billingAddress?: IAddress;
 }
+type cardFormField = keyof typeof ElementType;
+type CardFormLayout = cardFormField[][];
 interface CardFormOptions extends StoreInstrumentElementOptions {
     showCardHolderName?: boolean;
     showSingleExpiryDateField?: boolean;
     enrollInstrumentToNetworkOffers?: boolean;
+    layout?: CardFormLayout;
     translations?: {
         placeholders?: {
             [key in ElementType]?: string;
@@ -754,6 +765,11 @@ interface CardFormOptions extends StoreInstrumentElementOptions {
             storeInstrument?: string;
             paymentInstallments?: string;
         };
+        error?: {
+            default?: {
+                [key in ElementType]?: string;
+            };
+        };
         addressSelector?: AddressSelectorElementOptions['translations'];
     };
     events?: {
@@ -790,7 +806,13 @@ declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
     private lastBin;
     private lastBinLookup;
     constructor(collectContainer: PayrailsCollectContainer, options?: CardFormOptions | undefined);
-    throttledFetchBinLookupIfChanged(): Promise<BinLookupResponse | null>;
+    private initializeFormFields;
+    getErrorTextStyles(errorTextStyles: any): any;
+    private createFormField;
+    private initializeCustomLayout;
+    private hasFieldBeenUsed;
+    private initializeDefaultLayout;
+    private throttledFetchBinLookupIfChanged;
     tokenize(opts: TokenizeOptions): Promise<SaveInstrumentResponse>;
     private createAddressSelector;
     show(): void;
@@ -798,6 +820,10 @@ declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
     private triggerOnReady;
     private prepareLabelStyles;
     private prepareInputStyles;
+    validate(): Promise<{
+        isValid: boolean;
+        errors: string;
+    }>;
     get isValid(): boolean;
     get cardNetwork(): "" | "visa" | "mastercard" | "amex" | "diners" | "discover" | "jcb" | "hipercard" | "unionpay" | "maestro";
     onChange(): void;
@@ -871,6 +897,7 @@ interface CardPaymentButtonOptions {
         label: string;
     };
     redirectFor3DS?: boolean;
+    disabledByDefault?: boolean;
     styles?: {
         base?: Partial<CSSStyleDeclaration>;
         disabled?: Partial<CSSStyleDeclaration>;
@@ -886,6 +913,7 @@ declare class CardPaymentButton extends PayrailsElement {
     get bin(): string | undefined;
     private readonly paymentExecutor;
     private cardForm;
+    disabledByDefault: boolean;
     constructor(options: CardPaymentButtonOptions, returnInfo?: ReturnInfo | undefined);
     setDisabled(isDisabled: boolean): void;
     setSavedCreditCard(savedCard: StoredPaymentInstrument<CardMetadata>): void;
@@ -1069,6 +1097,9 @@ interface PaypalButtonOptions extends StoreInstrumentElementOptions {
 declare class PaypalButton extends PayrailsElementWithStoreInstrumentCheckbox {
     protected options?: PaypalButtonOptions | undefined;
     private static instance;
+    private renderDebounceTimeout;
+    private currentAbortController;
+    private isRendering;
     constructor(options?: PaypalButtonOptions | undefined);
     private paymentExecutor;
     private button;
@@ -1076,6 +1107,7 @@ declare class PaypalButton extends PayrailsElementWithStoreInstrumentCheckbox {
     private buttonWrapperId;
     private checkboxWrapperId;
     private loadPaypal;
+    private debouncedRender;
     private get paypalScriptConfig();
     private createPaypalButton;
     private createPayPalButtonConfig;
@@ -1150,6 +1182,8 @@ interface DropinOptions {
             showCardHolderName?: boolean;
             showExistingCards?: boolean;
             showSingleExpiryDateField?: boolean;
+            layout?: CardFormLayout;
+            disablePaymentButton?: boolean;
         } & StorablePaymentMethodConfiguration;
         payPal?: StorablePaymentMethodConfiguration;
         googlePay?: StorablePaymentMethodConfiguration & {