@payrails/web-sdk 5.16.0-RC.0 → 5.16.0

package/package.json

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

package/payrails-styles.css

@@ -122,6 +122,44 @@
   margin-bottom: 4px;
 }
 
+.payrails-address-selector-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+}
+
+.payrails-address-selector-wrapper > * {
+  width: 100% !important; /* Default width for all children */
+}
+
+.payrails-address-selector-wrapper > *.hidden {
+  display: none;
+}
+
+.payrails-address-selector-wrapper .error {
+  border: 1px solid;
+  border-color: #f25226;
+  background-color: #f9e1e1;
+}
+
+.payrails-country-selector-wrapper,
+.payrails-postal-code-wrapper {
+  display: flex;
+  width: 100% !important;
+  gap: 8px;
+  margin-top: 8px;
+  position: relative;
+}
+.payrails-country-select-element {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+
 .payrails-payment-installments-dropdown {
   display: flex;
   flex-wrap: wrap;

package/payrails.d.ts

@@ -70,6 +70,7 @@ declare class WorkflowExecution {
     get authorizeLink(): string | undefined;
     get createSessionLink(): string | undefined;
     get storedPaymentInstruments(): StoredPaymentInstrument<PayPalMetadata & CardMetadata>[];
+    getFullPaymentMethodConfig(paymentMethod: PAYMENT_METHOD_CODES): StorablePaymentCompositionOption<CardMetadata | PayPalMetadata, ApplePayConfig | PayPalConfig | GooglePayConfig | undefined> | undefined;
     isPaymentInstallmentsEnabled(paymentMethod: PAYMENT_METHOD_CODES): boolean | undefined;
     getPaymentInstallmentOptions(paymentMethod: PAYMENT_METHOD_CODES): PaymentInstallmentsConfig;
     private getStoredInstrumentForPaymentMethod;
@@ -83,6 +84,7 @@ declare class WorkflowExecution {
             flow?: PAYMENT_CLIENT_FLOW;
             supportsInstallments?: boolean;
             installments?: PaymentInstallmentsConfig;
+            supportsBillingInfo?: boolean;
         };
         paymentMethodCode: PAYMENT_METHOD_CODES;
     } | undefined;
@@ -96,6 +98,7 @@ declare class WorkflowExecution {
             flow?: PAYMENT_CLIENT_FLOW;
             supportsInstallments?: boolean;
             installments?: PaymentInstallmentsConfig;
+            supportsBillingInfo?: boolean;
         };
         paymentMethodCode: PAYMENT_METHOD_CODES;
     };
@@ -182,6 +185,7 @@ interface StorablePaymentCompositionOption<I = CardMetadata | PayPalMetadata, C
         flow?: PAYMENT_CLIENT_FLOW;
         supportsInstallments?: boolean;
         installments?: PaymentInstallmentsConfig;
+        supportsBillingInfo?: boolean;
     };
     paymentInstruments?: Array<StoredPaymentInstrument<I>>;
 }
@@ -527,6 +531,47 @@ declare class PayrailsElement implements Mountable {
     unmount(): void;
 }
 
+interface IAddress {
+    country?: {
+        code?: string;
+        fullName?: string;
+        iso3?: string;
+    };
+    postalCode?: string;
+}
+interface IOnChange {
+    isValid: boolean;
+    billingAddress?: IAddress;
+}
+interface AddressSelectorElementOptions extends ElementOptions {
+    translations?: {
+        labels?: {
+            countrySelector?: string;
+            postalCodeInput?: string;
+        };
+        placeholders?: {
+            postalCodeInput?: string;
+            countrySelector?: string;
+        };
+    };
+    styles?: {
+        wrapper?: Partial<CSSStyleDeclaration>;
+        countrySelector?: {
+            wrapper?: Partial<CSSStyleDeclaration>;
+            element?: Partial<CSSStyleDeclaration>;
+            label?: Partial<CSSStyleDeclaration>;
+        };
+        postalCodeInput?: {
+            wrapper?: Partial<CSSStyleDeclaration>;
+            element?: Partial<CSSStyleDeclaration>;
+            label?: Partial<CSSStyleDeclaration>;
+        };
+    };
+    events?: {
+        onBillingAddressChanged?: (e: IOnChange) => void;
+    };
+}
+
 interface StoreInstrumentElementOptions extends ElementOptions {
     showStoreInstrumentCheckbox?: boolean;
     alwaysStoreInstrument?: boolean;
@@ -641,6 +686,7 @@ interface OnChange {
     isValid: boolean;
     cardNetwork: CardNetwork | '';
     bin?: string;
+    billingAddress?: IAddress;
 }
 interface CardFormOptions extends StoreInstrumentElementOptions {
     showCardHolderName?: boolean;
@@ -657,13 +703,14 @@ interface CardFormOptions extends StoreInstrumentElementOptions {
             storeInstrument?: string;
             paymentInstallments?: string;
         };
+        addressSelector?: AddressSelectorElementOptions['translations'];
     };
     events?: {
         onFocus?: () => void;
         onChange?: (e: OnChange) => void;
         onSaveInstrumentCheckboxChanged?: PayrailsSDKEvents['onSaveInstrumentCheckboxChanged'];
         onReady?: () => void;
-    };
+    } & AddressSelectorElementOptions['events'];
     styles?: {
         wrapper?: Partial<CSSStyleDeclaration>;
         base?: Partial<CSSStyleDeclaration>;
@@ -677,6 +724,7 @@ interface CardFormOptions extends StoreInstrumentElementOptions {
         labels?: {
             [key in ElementType | 'all']?: Partial<CSSStyleDeclaration>;
         };
+        addressSelector?: AddressSelectorElementOptions['styles'];
     } & StoreInstrumentElementOptions['styles'] & PaymentInstallmentsElementOptions['styles'];
 }
 declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
@@ -686,12 +734,14 @@ declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
     get isBinLookupEnabled(): boolean;
     private readonly formFields;
     private readonly paymentInstallmentsDropdown;
+    private readonly addressComponent;
     private throttledFetchBinLookup;
     private lastBin;
     private lastBinLookup;
     constructor(collectContainer: PayrailsCollectContainer, options?: CardFormOptions | undefined);
     throttledFetchBinLookupIfChanged(): Promise<BinLookupResponse | null>;
     tokenize(opts: TokenizeOptions): Promise<SaveInstrumentResponse>;
+    private createAddressSelector;
     show(): void;
     hide(): void;
     private triggerOnReady;
@@ -706,8 +756,10 @@ declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
         storeInstrument: boolean;
         selectedInstallment: number | undefined;
         enrollInstrumentToNetworkOffers: boolean;
+        billingInfo: IAddress | undefined;
     }>;
     protected get selectedInstallment(): number | undefined;
+    protected get billingAddress(): IAddress | undefined;
     private enforceEnrollInstrumentToNetworkOffersForMasterCard;
     fetchBinLookup(): Promise<string | {
         bin: string;
@@ -1029,6 +1081,7 @@ interface DropinOptions {
         };
         paypalButton?: PaypalDropinOptions['translations'];
         mercadoPago?: GenericRedirectDropinOptions['translations'];
+        addressSelector?: AddressSelectorElementOptions['translations'];
     };
     styles?: {
         [key: string]: any;
@@ -1041,6 +1094,7 @@ interface DropinOptions {
         cardPaymentButton?: CardPaymentButtonOptions['styles'];
         authSuccess?: Partial<CSSStyleDeclaration>;
         authFailed?: Partial<CSSStyleDeclaration>;
+        addressSelector?: AddressSelectorElementOptions['styles'];
         mercadoPago?: GenericRedirectDropinOptions['styles'];
     };
 }
@@ -1157,6 +1211,10 @@ interface UIEvents {
     onSaveInstrumentCheckboxChanged?: ({ checked }: {
         checked: boolean;
     }) => void;
+    onBillingAddressChanged?: (e: {
+        isValid: boolean;
+        billingAddress?: IAddress;
+    }) => void;
 }
 type onPaymentMethodSelectedParams = {
     paymentMethod?: StorablePaymentCompositionOption;