@payrails/web-sdk 5.46.1 → 5.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payrails/web-sdk",
-  "version": "5.46.1",
+  "version": "5.47.0",
   "description": "SDK providing tokenization options on the client for merchants",
   "main": "index.js",
   "types": "payrails.d.ts",
@@ -13,8 +13,7 @@
     "@rollup/plugin-html": "2.0.0",
     "@types/applepayjs": "14.0.9",
     "@types/googlepay": "0.7.5",
-    "rollup-plugin-import-css": "3.5.8",
-    "vitest-fetch-mock": "0.4.5"
+    "rollup-plugin-import-css": "3.5.8"
   },
   "module": "index.mjs",
   "exports": {

package/payrails-styles.css

@@ -95,6 +95,213 @@
   }
 }
 
+.payrails-billing-address-form {
+  display: block;
+  margin-bottom: 16px;
+}
+
+.payrails-billing-address-form-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1f2733;
+  margin-bottom: 12px;
+}
+
+.payrails-billing-address-form .payrails-dynamic-element-form {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.payrails-billing-address-form .payrails-dynamic-element-form-field {
+  flex: 1 1 100%;
+  gap: 0;
+}
+
+.payrails-billing-address-form [id='payrails-dynamic-element-field:city'],
+.payrails-billing-address-form [id='payrails-dynamic-element-field:state'] {
+  flex: 1 1 calc(50% - 6px);
+}
+
+/* Placeholder-driven design: labels stay for accessibility but are hidden. */
+.payrails-billing-address-form .payrails-dynamic-element-form-field-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.payrails-billing-address-form .payrails-dynamic-element-input,
+.payrails-billing-address-form .payrails-dynamic-element-select {
+  background-color: #ffffff;
+  border: 1px solid #e6e8eb;
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-size: 14px;
+  color: #1f2733;
+}
+
+.payrails-billing-address-form .payrails-dynamic-element-input::placeholder {
+  color: #9aa0a6;
+}
+
+.payrails-billing-address-form
+  .payrails-dynamic-element-input:not(
+    .payrails-dynamic-element-input--readonly
+  ):focus,
+.payrails-billing-address-form
+  .payrails-dynamic-element-select:not(
+    .payrails-dynamic-element-select--readonly
+  ):focus {
+  outline: none;
+  border-color: #cdd2da;
+  background-color: #ffffff;
+  box-shadow: none;
+}
+
+.payrails-billing-address-form
+  .payrails-dynamic-element-form-field.error
+  .payrails-dynamic-element-input,
+.payrails-billing-address-form
+  .payrails-dynamic-element-form-field.error
+  .payrails-dynamic-element-select {
+  border-color: #f25226;
+  background-color: #fdecec;
+}
+
+.payrails-billing-address-form .payrails-dynamic-element-input--readonly,
+.payrails-billing-address-form .payrails-dynamic-element-select--readonly {
+  background-color: #f5f6f8;
+  color: #6b7280;
+  cursor: not-allowed;
+}
+
+.payrails-dynamic-element-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.payrails-dynamic-element-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.payrails-dynamic-element-form-field-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #000000;
+  margin-bottom: 4px;
+}
+
+.payrails-dynamic-element-form-field-component {
+  width: 100%;
+}
+
+.payrails-dynamic-element-form-field-error {
+  font-size: 12px;
+  color: #ff0000;
+  margin-top: 4px;
+  display: none;
+}
+
+.payrails-dynamic-element-form-field.error
+  .payrails-dynamic-element-form-field-error {
+  display: block;
+}
+
+.payrails-dynamic-element-input {
+  width: 100%;
+  padding: 10px 16px;
+  border: 1px solid #eae8ee;
+  font-size: 14px;
+  color: #1d1d1d;
+  background-color: #fff;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease;
+}
+
+.payrails-dynamic-element-input:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.payrails-dynamic-element-input:invalid {
+  border-color: #f25226;
+  background-color: #f9e1e1;
+}
+
+.payrails-dynamic-element-form-field.error .payrails-dynamic-element-input {
+  border-color: #f25226;
+  background-color: #f9e1e1;
+}
+
+.payrails-dynamic-element-input::placeholder {
+  color: grey;
+  opacity: 1;
+}
+
+.payrails-dynamic-element-select {
+  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;
+  width: 100%;
+  font-size: 14px;
+  color: #1d1d1d;
+  background-color: #fff;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease;
+  padding: 10px 16px;
+  margin: 0;
+  border: 1px solid #eae8ee;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.payrails-dynamic-element-tabs {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #eae8ee;
+  padding: 4px;
+  background: transparent;
+}
+
+.payrails-dynamic-element-tabs button.payrails-dynamic-element-tab {
+  border-radius: 0;
+  flex: 1;
+  background: white;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  font-weight: 500;
+  color: #000000;
+  padding: 4px;
+  text-transform: unset;
+  cursor: pointer;
+}
+
+.payrails-dynamic-element-tabs button.payrails-dynamic-element-tab.active {
+  background-color: #e0e5ed;
+}
+
+.payrails-dynamic-element-tabs button.payrails-dynamic-element-tab:hover {
+  background-color: unset;
+  color: unset;
+}
+
 .payrails-store-instrument-checkbox {
   margin-right: 4px;
 }
@@ -849,123 +1056,3 @@ button.payrails-lean-button {
 #payrails-paypal-button-wrapper {
   min-height: 44px;
 }
-
-.payrails-dynamic-element-form {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  width: 100%;
-}
-
-.payrails-dynamic-element-form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 100%;
-}
-
-.payrails-dynamic-element-form-field-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: #000000;
-  margin-bottom: 4px;
-}
-
-.payrails-dynamic-element-form-field-component {
-  width: 100%;
-}
-
-.payrails-dynamic-element-form-field-error {
-  font-size: 12px;
-  color: #ff0000;
-  margin-top: 4px;
-  display: none;
-}
-
-.payrails-dynamic-element-form-field.error
-  .payrails-dynamic-element-form-field-error {
-  display: block;
-}
-
-.payrails-dynamic-element-input {
-  width: 100%;
-  padding: 10px 16px;
-  border: 1px solid #eae8ee;
-  font-size: 14px;
-  color: #1d1d1d;
-  background-color: #fff;
-  box-sizing: border-box;
-  transition: border-color 0.2s ease;
-}
-
-.payrails-dynamic-element-input:focus {
-  outline: none;
-  border-color: #007bff;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-}
-
-.payrails-dynamic-element-input:invalid {
-  border-color: #f25226;
-  background-color: #f9e1e1;
-}
-
-.payrails-dynamic-element-form-field.error .payrails-dynamic-element-input {
-  border-color: #f25226;
-  background-color: #f9e1e1;
-}
-
-.payrails-dynamic-element-input::placeholder {
-  color: grey;
-  opacity: 1;
-}
-
-.payrails-dynamic-element-select {
-  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;
-  width: 100%;
-  font-size: 14px;
-  color: #1d1d1d;
-  background-color: #fff;
-  box-sizing: border-box;
-  transition: border-color 0.2s ease;
-  padding: 10px 16px;
-  margin: 0;
-  border: 1px solid #eae8ee;
-  box-shadow: none;
-  cursor: pointer;
-}
-
-.payrails-dynamic-element-tabs {
-  display: flex;
-  flex-direction: row;
-  border: 1px solid #eae8ee;
-  padding: 4px;
-  background: transparent;
-}
-
-.payrails-dynamic-element-tabs button.payrails-dynamic-element-tab {
-  border-radius: 0;
-  flex: 1;
-  background: white;
-  border: none;
-  outline: none;
-  font-size: 16px;
-  font-weight: 500;
-  color: #000000;
-  padding: 4px;
-  text-transform: unset;
-  cursor: pointer;
-}
-
-.payrails-dynamic-element-tabs button.payrails-dynamic-element-tab.active {
-  background-color: #e0e5ed;
-}
-
-.payrails-dynamic-element-tabs button.payrails-dynamic-element-tab:hover {
-  background-color: unset;
-  color: unset;
-}

package/payrails.d.ts

@@ -4,6 +4,10 @@ type JSONSchemaType = JSONSchemaProperty & {
     required?: string[];
     dependentSchemas?: Record<string, JSONSchemaDependentSchema>;
 };
+interface JSONSchemaOneOfOption {
+    const: string | number;
+    title: string;
+}
 interface JSONSchemaDependentSchema {
     oneOf: Array<{
         properties: Record<string, {
@@ -24,17 +28,14 @@ interface JSONSchemaProperty {
     [UI_POSITION_FIELD]?: number;
     properties?: Record<string, JSONSchemaType>;
 }
-interface JSONSchemaOneOfOption {
-    const: string | number;
-    title: string;
-}
-interface JSONSchemaOneOfOption {
-    const: string | number;
-    title: string;
-}
 interface DynamicElementEvents {
-    onReady: () => void;
-    onValidationChange: (isValid: boolean) => void;
+    onReady?: () => void;
+    onValidationChange?: (isValid: boolean) => void;
+}
+interface DynamicElementFieldEvents {
+    onChange: (value: any) => void;
+    onReady: (initialValue: any) => void;
+    onBlur: () => void;
 }
 interface DynamicElementFieldTranslation {
     label?: string;
@@ -183,6 +184,14 @@ declare class WorkflowExecution {
     private static _response;
     static get response(): WorkflowExecutionResponse;
     static setResponse(response: WorkflowExecutionResponse): typeof WorkflowExecution;
+    /**
+     * Non-throwing read of the current execution id. Returns `undefined` when
+     * the workflow execution hasn't been initialized yet. Prefer this over
+     * `WorkflowExecution.response.id` in observational code paths (event
+     * emission, logging, analytics) where the workflow not being loaded should
+     * degrade gracefully instead of throwing.
+     */
+    static get executionId(): string | undefined;
     static get workflowCode(): string;
     static get lookup(): {
         httpCode: number;
@@ -572,6 +581,19 @@ interface SdkConfiguration {
     };
     execution?: WorkflowExecutionResponse;
     featureConfig?: SdkFeatureConfig;
+    morData?: MorData;
+}
+interface MorData {
+    billingLines?: {
+        street?: string;
+        line2?: string;
+        city?: string;
+        state?: string;
+        postalCode?: string;
+        email?: string;
+        country?: string;
+        form?: JSONSchemaType;
+    };
 }
 interface SdkFeatureConfig {
     gpayIframeRollout?: number;
@@ -1501,6 +1523,18 @@ declare enum AuthorizationFailureReasons {
     USER_CANCELLED = "USER_CANCELLED"
 }
 
+type BillingAddressPrefill = Omit<NonNullable<MorData['billingLines']>, 'form'>;
+interface BillingAddressFormOptions {
+    schema: JSONSchemaType;
+    title?: string;
+    prefill?: BillingAddressPrefill;
+    styles?: DynamicElementStyles;
+    translations?: DynamicElementTranslations;
+    events?: {
+        onReady?: () => void;
+    };
+}
+
 interface AuthFailedMsgOptions {
     translations?: {
         label?: string;
@@ -1830,6 +1864,8 @@ declare class Dropin extends PayrailsElement {
     private paypal;
     private lean;
     private loadingScreen;
+    private billingAddressForm;
+    private billingValidationBlocked;
     constructor(collectContainer: PayrailsCollectContainer, clientConfig: PayrailsClientOptions, dropinConfig: DropinOptions);
     private get returnInfo();
     private isHppIntegration;
@@ -1847,6 +1883,7 @@ declare class Dropin extends PayrailsElement {
     private createApplePayButton;
     private createCardPaymentButton;
     private onAuthorizeSuccess;
+    private validateBillingAddress;
     private getElementEvents;
     private onAuthorizePending;
     private getErrorMessage;
@@ -1902,6 +1939,7 @@ interface DropinOptions {
         mercadoPago?: GenericRedirectDropinOptions['translations'];
         revolutPay?: GenericRedirectDropinOptions['translations'];
         addressSelector?: AddressSelectorElementOptions['translations'];
+        billingAddressForm?: BillingAddressFormOptions['translations'];
         applePayButton?: ApplePayDropinOptions['translations'];
         leanButton?: LeanDropinOptions['translations'];
         errorMessages?: {
@@ -1922,6 +1960,7 @@ interface DropinOptions {
         authFailed?: Partial<CSSStyleDeclaration>;
         loadingScreen?: LoadingScreenStyles;
         addressSelector?: AddressSelectorElementOptions['styles'];
+        billingAddressForm?: BillingAddressFormOptions['styles'];
         mercadoPago?: GenericRedirectDropinOptions['styles'];
         revolutPay?: GenericRedirectDropinOptions['styles'];
     };
@@ -1934,11 +1973,28 @@ interface ContainerStyles {
     styles?: Partial<CSSStyleDeclaration>;
 }
 
+interface DynamicElementFieldOptions {
+    id: string;
+    name: string;
+    required?: boolean;
+    property: JSONSchemaProperty;
+    label: string;
+    placeholder: string;
+    value?: string;
+    readOnly?: boolean;
+    errors: DynamicElementErrorTranslation;
+    styles?: DynamicElementFieldStyles;
+    events: DynamicElementFieldEvents;
+}
+
+type FieldOptionsWithoutEvents = Omit<DynamicElementFieldOptions, 'events'>;
+
 interface DynamicElementOptions {
     styles?: DynamicElementStyles;
     translations?: DynamicElementTranslations;
-    paymentMethod: BasePaymentMethodConfig;
+    paymentMethod?: BasePaymentMethodConfig;
     events?: DynamicElementEvents;
+    fieldOverrides?: Record<string, Partial<FieldOptionsWithoutEvents>>;
 }
 interface FormConfig {
     schema: JSONSchemaType;
@@ -1952,7 +2008,7 @@ declare class DynamicElementForm extends Tokenizable {
     private __schema;
     private _previousFormValidState;
     constructor(options: DynamicElementOptions, formConfig: FormConfig, returnInfo?: ReturnInfo | undefined);
-    protected collect(): Promise<Record<string, any>>;
+    collect(): Promise<Record<string, any>>;
     protected constructSaveInstrumentBody(tokens: any, opts?: TokenizeOptions): Promise<any>;
     private isFormValid;
     private isFormValidSilent;
@@ -2088,6 +2144,30 @@ interface PayPalScriptConfig {
     locale?: string;
 }
 
+interface PaymentAttemptContext {
+    readonly executionId: string;
+    readonly paymentMethodCode: PaymentMethodCode;
+}
+declare enum ACTION_REQUIRED_KIND {
+    GENERIC_REDIRECT = "genericRedirect",
+    THREE_DS = "3ds"
+}
+type ActionRequiredKind = `${ACTION_REQUIRED_KIND}`;
+interface ActionRequiredEvent extends PaymentAttemptContext {
+    readonly url: string;
+    readonly kind: ActionRequiredKind;
+    /**
+     * Call to take over the action. The SDK will not perform its default
+     * behavior (navigate, mount the 3DS popup).
+     */
+    preventDefault(): void;
+}
+type PayrailsEvents = {
+    actionRequired: ActionRequiredEvent;
+};
+type PayrailsEventName = keyof PayrailsEvents;
+type PayrailsEventHandler<K extends PayrailsEventName> = (event: PayrailsEvents[K]) => void | Promise<void>;
+
 interface QueryDefinition<T> {
     path: string[];
     returnType: T;
@@ -2151,11 +2231,13 @@ declare class Payrails {
     paypalButton(options?: PaypalButtonOptions): PaypalButton;
     leanButton(options: LeanButtonOptions): LeanButton;
     genericRedirectButton(options: GenericRedirectButtonOptions): GenericRedirectButton;
-    dynamicElement(options: DynamicElementOptions): DynamicElementForm;
+    dynamicElement(options: DynamicElementOptions & Required<Pick<DynamicElementOptions, 'paymentMethod'>>): DynamicElementForm;
     getSavedPaypalAccounts(): StoredPaymentInstrument<PayPalMetadata>[];
     private logIntegrationMode;
     private constructor();
     private getContainerLayout;
+    on<K extends PayrailsEventName>(name: K, handler: PayrailsEventHandler<K>): () => void;
+    off<K extends PayrailsEventName>(name: K, handler: PayrailsEventHandler<K>): void;
     binLookup(): Promise<any>;
 }
 interface ClientEvents {
@@ -2281,5 +2363,5 @@ interface PayrailsClientOptions {
     };
 }
 
-export { AuthorizationFailureReasons, ElementType, INTEGRATION_TYPE, PAYMENT_METHOD_CODES, Payrails, PayrailsCollectContainer, PayrailsEnvironment, REVOLUT_PAY_DEFAULT_LABEL, REVOLUT_PAY_DEFAULT_THEME };
-export type { ApplePayButtonOptions, CardFormOptions, CardListOptions, CardPaymentButtonOptions, CollectContainerOptions, DropinOptions, ExecutionMeta, ExecutionMetaCustomer, ExecutionMetaKey, GenericRedirectButtonOptions, GooglePayButtonOptions, InitOptions, LeanButtonOptions, PaymentEvents, PaypalButtonOptions, PayrailsAmount, PayrailsClientOptions, PayrailsContainerType, PayrailsSecureField, PayrailsSecureFieldEvent, ReturnInfo, RevolutPayButtonTheme, RevolutPayStyles, SaveInstrumentResponse, StorablePaymentCompositionOption, WorkflowExecutionResponse };
+export { ACTION_REQUIRED_KIND, AuthorizationFailureReasons, ElementType, INTEGRATION_TYPE, PAYMENT_METHOD_CODES, Payrails, PayrailsCollectContainer, PayrailsEnvironment, REVOLUT_PAY_DEFAULT_LABEL, REVOLUT_PAY_DEFAULT_THEME };
+export type { ActionRequiredEvent, ActionRequiredKind, ApplePayButtonOptions, CardFormOptions, CardListOptions, CardPaymentButtonOptions, CollectContainerOptions, DropinOptions, ExecutionMeta, ExecutionMetaCustomer, ExecutionMetaKey, GenericRedirectButtonOptions, GooglePayButtonOptions, InitOptions, LeanButtonOptions, PaymentAttemptContext, PaymentEvents, PaypalButtonOptions, PayrailsAmount, PayrailsClientOptions, PayrailsContainerType, PayrailsEventHandler, PayrailsEventName, PayrailsEvents, PayrailsSecureField, PayrailsSecureFieldEvent, ReturnInfo, RevolutPayButtonTheme, RevolutPayStyles, SaveInstrumentResponse, StorablePaymentCompositionOption, WorkflowExecutionResponse };