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

package/package.json

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

@@ -130,19 +130,34 @@
 }
 
 .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;
+  width: 100% !important; /* Default width for all children */
 }
 
 .payrails-address-selector-wrapper > *.hidden {
   display: none;
 }
 
-.payrails-address-selector-wrapper .payrails-error {
-  border-color: red;
+.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 {

package/payrails.d.ts

@@ -531,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;
@@ -604,34 +645,6 @@ 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;
@@ -1198,7 +1211,10 @@ interface UIEvents {
     onSaveInstrumentCheckboxChanged?: ({ checked }: {
         checked: boolean;
     }) => void;
-    onBillingAddressChanged?: (e: any) => void;
+    onBillingAddressChanged?: (e: {
+        isValid: boolean;
+        billingAddress?: IAddress;
+    }) => void;
 }
 type onPaymentMethodSelectedParams = {
     paymentMethod?: StorablePaymentCompositionOption;
@@ -1206,7 +1222,6 @@ type onPaymentMethodSelectedParams = {
 };
 interface DropinEvents {
     onPaymentOptionSelected?: (e: onPaymentMethodSelectedParams) => void;
-    onBillingAddressChanged?: (e: any) => void;
 }
 type PayrailsSDKEvents = PaymentEvents & UIEvents & DropinEvents;
 interface SdkConfiguration {