@payrails/web-sdk 5.15.0 → 5.16.0-RC.1

package/package.json

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

package/payrails-styles.css

@@ -122,6 +122,29 @@
   margin-bottom: 4px;
 }
 
+.payrails-address-selector-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+}
+
+.payrails-address-selector-wrapper > * {
+  width: 48% !important; /* Default width for all children */
+}
+/* Styles for when there's only one child */
+.payrails-address-selector-wrapper > *:first-child:last-child {
+  width: 100% !important;
+}
+
+.payrails-address-selector-wrapper > *.hidden {
+  display: none;
+}
+
+.payrails-address-selector-wrapper .payrails-error {
+  border-color: red;
+}
+
 .payrails-payment-installments-dropdown {
   display: flex;
   flex-wrap: wrap;

package/payrails.d.ts

@@ -48,6 +48,7 @@ declare class WorkflowExecution {
         supportedNetworks: string[];
         countryCode: string;
         merchantCapabilities: ApplePayJS.ApplePayMerchantCapability[];
+        requiredBillingContactFields?: ApplePayJS.ApplePayContactField[];
     };
     get url(): string;
     get response(): WorkflowExecutionResponse;
@@ -69,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;
@@ -82,6 +84,7 @@ declare class WorkflowExecution {
             flow?: PAYMENT_CLIENT_FLOW;
             supportsInstallments?: boolean;
             installments?: PaymentInstallmentsConfig;
+            supportsBillingInfo?: boolean;
         };
         paymentMethodCode: PAYMENT_METHOD_CODES;
     } | undefined;
@@ -95,6 +98,7 @@ declare class WorkflowExecution {
             flow?: PAYMENT_CLIENT_FLOW;
             supportsInstallments?: boolean;
             installments?: PaymentInstallmentsConfig;
+            supportsBillingInfo?: boolean;
         };
         paymentMethodCode: PAYMENT_METHOD_CODES;
     };
@@ -181,6 +185,7 @@ interface StorablePaymentCompositionOption<I = CardMetadata | PayPalMetadata, C
         flow?: PAYMENT_CLIENT_FLOW;
         supportsInstallments?: boolean;
         installments?: PaymentInstallmentsConfig;
+        supportsBillingInfo?: boolean;
     };
     paymentInstruments?: Array<StoredPaymentInstrument<I>>;
 }
@@ -203,6 +208,7 @@ interface ApplePayConfig {
         supportedNetworks: string[];
         countryCode: string;
         merchantCapabilities: ApplePayJS.ApplePayMerchantCapability[];
+        requiredBillingContactFields?: ApplePayJS.ApplePayContactField[];
     };
     type: string;
 }
@@ -598,6 +604,34 @@ declare const regexes: {
 };
 type CardNetwork = keyof typeof regexes;
 
+interface IAddress {
+    country?: {
+        code?: string;
+        fullName?: string;
+        iso3?: string;
+    };
+    postalCode?: string;
+}
+interface IOnChange {
+    isValid: boolean;
+    billingAddress?: IAddress;
+}
+interface AddressSelectorElementOptions extends ElementOptions {
+    translations?: {
+        COUNTRY_SELECTOR?: string;
+        POSTAL_CODE_INPUT?: string;
+    };
+    styles?: {
+        wrapper?: Partial<CSSStyleDeclaration>;
+        countrySelector?: Partial<CSSStyleDeclaration>;
+        postalCodeInput?: Partial<CSSStyleDeclaration>;
+    };
+    events?: {
+        onBillingAddressChanged?: (address: IAddress) => void;
+        onChange?: (e: IOnChange) => void;
+    };
+}
+
 interface PaymentInstallmentsElementOptions extends ElementOptions {
     showPaymentInstallmentsDropdown?: boolean;
     installmentOptions?: BaseInstallmentOption[] | null;
@@ -639,6 +673,7 @@ interface OnChange {
     isValid: boolean;
     cardNetwork: CardNetwork | '';
     bin?: string;
+    billingAddress?: IAddress;
 }
 interface CardFormOptions extends StoreInstrumentElementOptions {
     showCardHolderName?: boolean;
@@ -655,13 +690,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>;
@@ -675,6 +711,7 @@ interface CardFormOptions extends StoreInstrumentElementOptions {
         labels?: {
             [key in ElementType | 'all']?: Partial<CSSStyleDeclaration>;
         };
+        addressSelector?: AddressSelectorElementOptions['styles'];
     } & StoreInstrumentElementOptions['styles'] & PaymentInstallmentsElementOptions['styles'];
 }
 declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
@@ -684,12 +721,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;
@@ -704,8 +743,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;
@@ -1027,6 +1068,7 @@ interface DropinOptions {
         };
         paypalButton?: PaypalDropinOptions['translations'];
         mercadoPago?: GenericRedirectDropinOptions['translations'];
+        addressSelector?: AddressSelectorElementOptions['translations'];
     };
     styles?: {
         [key: string]: any;
@@ -1039,6 +1081,7 @@ interface DropinOptions {
         cardPaymentButton?: CardPaymentButtonOptions['styles'];
         authSuccess?: Partial<CSSStyleDeclaration>;
         authFailed?: Partial<CSSStyleDeclaration>;
+        addressSelector?: AddressSelectorElementOptions['styles'];
         mercadoPago?: GenericRedirectDropinOptions['styles'];
     };
 }
@@ -1155,6 +1198,7 @@ interface UIEvents {
     onSaveInstrumentCheckboxChanged?: ({ checked }: {
         checked: boolean;
     }) => void;
+    onBillingAddressChanged?: (e: any) => void;
 }
 type onPaymentMethodSelectedParams = {
     paymentMethod?: StorablePaymentCompositionOption;
@@ -1162,6 +1206,7 @@ type onPaymentMethodSelectedParams = {
 };
 interface DropinEvents {
     onPaymentOptionSelected?: (e: onPaymentMethodSelectedParams) => void;
+    onBillingAddressChanged?: (e: any) => void;
 }
 type PayrailsSDKEvents = PaymentEvents & UIEvents & DropinEvents;
 interface SdkConfiguration {