@payrails/web-sdk 5.29.0-RC.0 → 5.29.1-rc

package/package.json

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

package/payrails-styles.css

@@ -683,6 +683,126 @@
   }
 }
 
+.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;
+}
+
 button.payrails-generic-button {
   border: none;
   outline: none;

package/payrails.d.ts

@@ -2,6 +2,85 @@ import * as _payrails_iframe_event_bus from '@payrails/iframe-event-bus';
 import { LogLevel as LogLevel$1 } from '@payrails/logger';
 import { FraudProvider } from '@payrails/fraud-sdk';
 
+type JSONSchemaType = JSONSchemaProperty & {
+    required?: string[];
+    dependentSchemas?: Record<string, JSONSchemaDependentSchema>;
+};
+interface JSONSchemaDependentSchema {
+    oneOf: Array<{
+        properties: Record<string, {
+            const: string | number;
+        }>;
+        required: string[];
+    }>;
+}
+interface JSONSchemaProperty {
+    type?: 'string' | 'number' | 'boolean' | 'array' | 'object';
+    title?: string;
+    oneOf?: JSONSchemaOneOfOption[];
+    pattern?: string;
+    minLength?: number;
+    maxLength?: number;
+    errorMessage?: Record<string, string>;
+    $ref?: string;
+    properties?: Record<string, JSONSchemaType>;
+}
+interface JSONSchemaOneOfOption {
+    const: string | number;
+    title: string;
+}
+interface JSONSchemaOneOfOption {
+    const: string | number;
+    title: string;
+}
+interface DynamicElementFieldTranslation {
+    label?: string;
+    placeholder?: string;
+    errors?: Partial<DynamicElementErrorTranslation>;
+}
+interface DynamicElementErrorTranslation {
+    required: string;
+    minLength: string;
+    maxLength: string;
+    pattern: string;
+    oneOf: string;
+}
+type DynamicElementTranslations = {
+    labels?: {
+        submitButton?: string;
+    };
+    fields?: Record<string, DynamicElementFieldTranslation>;
+    errors?: Partial<DynamicElementErrorTranslation>;
+};
+interface DynamicElementElementStyles {
+    base?: Partial<CSSStyleDeclaration>;
+    complete?: Partial<CSSStyleDeclaration>;
+    empty?: Partial<CSSStyleDeclaration>;
+    focus?: Partial<CSSStyleDeclaration>;
+    invalid?: Partial<CSSStyleDeclaration>;
+}
+type DynamicElementInputFieldStyles = DynamicElementElementStyles;
+type DynamicElementSelectFieldStyles = DynamicElementElementStyles;
+interface DynamicElementTabsFieldStyles {
+    tab: {
+        base?: Partial<CSSStyleDeclaration>;
+        active?: Partial<CSSStyleDeclaration>;
+    };
+    container?: DynamicElementElementStyles;
+}
+interface DynamicElementFieldStyles {
+    base?: Partial<CSSStyleDeclaration>;
+    label?: Partial<CSSStyleDeclaration>;
+    errors?: Partial<CSSStyleDeclaration>;
+    input?: DynamicElementInputFieldStyles;
+    select?: DynamicElementSelectFieldStyles;
+    tabs?: DynamicElementTabsFieldStyles;
+}
+interface DynamicElementStyles {
+    all: Omit<DynamicElementFieldStyles, 'label'>;
+    fields?: Record<string, DynamicElementFieldStyles>;
+}
+
 declare enum PAYMENT_METHOD_CODES {
     'CARD' = "card",
     'GOOGLE_PAY' = "googlePay",
@@ -9,7 +88,8 @@ declare enum PAYMENT_METHOD_CODES {
     'APPLE_PAY' = "applePay",
     'GENERIC_REDIRECT' = "genericRedirect",
     'MERCADO_PAGO' = "mercadoPago",
-    'PIX' = "pix"
+    'PIX' = "pix",
+    'BANK_ACCOUNT' = "bankAccount"
 }
 declare enum PAYMENT_INSTRUMENT_STATUS {
     'ENABLED' = "enabled",
@@ -45,7 +125,7 @@ declare class WorkflowExecution {
     static get savedGooglePayAccounts(): StoredPaymentInstrument<CardMetadata>[];
     static get savedApplePayAccounts(): StoredPaymentInstrument<CardMetadata>[];
     static get paypalConfig(): PayPalConfig;
-    static get googlePayConfig(): GooglePayConfig[];
+    static get googlePayConfig(): any;
     static isPaymentMethodAvailable(paymentMethod: PAYMENT_METHOD_CODES): boolean;
     static get applePayConfig(): {
         merchantIdentifier: string;
@@ -90,6 +170,8 @@ declare class WorkflowExecution {
             supportsInstallments?: boolean;
             installments?: PaymentInstallmentsConfig;
             supportsBillingInfo?: boolean;
+            schema?: JSONSchemaType;
+            additionalConfig?: any;
         };
         paymentMethodCode: PAYMENT_METHOD_CODES;
     } | undefined;
@@ -104,6 +186,8 @@ declare class WorkflowExecution {
             supportsInstallments?: boolean;
             installments?: PaymentInstallmentsConfig;
             supportsBillingInfo?: boolean;
+            schema?: JSONSchemaType;
+            additionalConfig?: any;
         };
         paymentMethodCode: PAYMENT_METHOD_CODES;
     };
@@ -191,6 +275,8 @@ interface StorablePaymentCompositionOption<I = CardMetadata | PayPalMetadata, C
         supportsInstallments?: boolean;
         installments?: PaymentInstallmentsConfig;
         supportsBillingInfo?: boolean;
+        schema?: JSONSchemaType;
+        additionalConfig?: any;
     };
     paymentInstruments?: Array<StoredPaymentInstrument<I>>;
 }
@@ -198,9 +284,21 @@ interface GooglePayConfig {
     parameters: {
         allowedAuthMethods: google.payments.api.CardAuthMethod[];
         allowedCardNetworks: google.payments.api.CardNetwork[];
+        billingAddressParameters?: {
+            format?: string;
+        };
+        billingAddressRequired?: boolean;
     };
     tokenizationSpecification: google.payments.api.PaymentMethodTokenizationSpecification;
     type: google.payments.api.PaymentMethodType;
+    apiVersion?: number;
+    apiVersionMinor?: number;
+    allowedPaymentMethods?: google.payments.api.PaymentMethodSpecification[];
+    emailRequired?: boolean;
+    shippingAddressRequired?: boolean;
+    shippingAddressParameters?: google.payments.api.ShippingAddressParameters;
+    merchantInfo?: google.payments.api.MerchantInfo;
+    existingPaymentMethodRequired?: boolean;
 }
 interface PayPalConfig {
     clientId: string;
@@ -242,7 +340,8 @@ interface CardMetadata {
 }
 declare enum PAYMENT_CLIENT_FLOW {
     'REDIRECT' = "redirect",
-    'DIRECT' = "direct"
+    'DIRECT' = "direct",
+    'EMBEDDED' = "embedded"
 }
 declare enum INTEGRATION_TYPE {
     API = "api",
@@ -633,6 +732,16 @@ declare class PayrailsElement implements Mountable {
     unmount(): void;
 }
 
+interface TokenizeOptions {
+    futureUsage?: 'CardOnFile' | 'Subscription' | 'UnscheduledCardOnFile';
+    storeInstrument?: boolean;
+}
+declare abstract class Tokenizable extends PayrailsElement {
+    abstract collect(): Promise<any>;
+    protected abstract constructSaveInstrumentBody(tokens: any, opts?: TokenizeOptions): Promise<any>;
+    tokenize(_opts?: TokenizeOptions): Promise<any>;
+}
+
 declare enum ElementType {
     CARD_NUMBER = "CARD_NUMBER",
     CARDHOLDER_NAME = "CARDHOLDER_NAME",
@@ -697,7 +806,7 @@ interface PayrailsSecureField {
     resetError?: () => void;
     setValue?: (elementValue: string) => void;
     clearValue?: () => void;
-    update: (data: CollectElementOptions) => void;
+    update?: (data: Partial<CollectElementOptions>) => void;
 }
 declare class PayrailsCollectContainer implements Mountable {
     bin: string;
@@ -728,10 +837,6 @@ declare class PayrailsCollectContainer implements Mountable {
         bin: string;
     }>;
 }
-interface TokenizeOptions {
-    futureUsage?: 'CardOnFile' | 'Subscription' | 'UnscheduledCardOnFile';
-    storeInstrument?: boolean;
-}
 
 interface IAddress {
     country?: {
@@ -989,6 +1094,13 @@ declare class CardList extends PayrailsElement {
     reset(): void;
 }
 
+declare enum RequestMethod {
+    GET = "GET",
+    POST = "POST",
+    DELETE = "DELETE",
+    PATCH = "PATCH"
+}
+
 interface SdkConfiguration {
     token: string;
     amount: PayrailsAmount;
@@ -1010,6 +1122,7 @@ interface SdkConfiguration {
         links: {
             saveInstrument: {
                 href: string;
+                method: RequestMethod;
             };
         };
     };
@@ -1112,6 +1225,7 @@ interface LoadingScreenStyles {
     [StyleKeys.loader]?: Partial<CSSStyleDeclaration>;
 }
 
+type GooglePayConfigInput = google.payments.api.IsReadyToPayPaymentMethodSpecification[] | GooglePayConfig;
 interface GooglePayButtonOptions extends StoreInstrumentElementOptions {
     environment?: PayrailsEnvironment;
     merchantInfo?: google.payments.api.MerchantInfo;
@@ -1134,8 +1248,9 @@ declare class GooglePayButton extends PayrailsElementWithStoreInstrumentCheckbox
     private static googleSDKClient;
     private sdkLoadedCalled;
     private buttonElement;
+    private static getGooglePayConfigAsArray;
     private static getSDKClient;
-    static isGooglePayAvailable(allowedPaymentMethods: google.payments.api.IsReadyToPayPaymentMethodSpecification[], environment?: PayrailsEnvironment, merchantInfo?: google.payments.api.MerchantInfo): Promise<boolean>;
+    static isGooglePayAvailable(allowedPaymentMethods: GooglePayConfigInput, environment?: PayrailsEnvironment, merchantInfo?: google.payments.api.MerchantInfo): Promise<boolean>;
     constructor(options: GooglePayButtonOptions);
     private sdkLoaded;
     private onLoadPaymentData;
@@ -1327,6 +1442,7 @@ declare class Dropin extends PayrailsElement {
     private loadingScreen;
     constructor(collectContainer: PayrailsCollectContainer, clientConfig: PayrailsClientOptions, dropinConfig: DropinOptions);
     private isHppIntegration;
+    private isEmbeddedElement;
     private createStoredInstrumentElement;
     private createInstallmentsDropdown;
     private getInstallmentOptionsForInstrument;
@@ -1338,6 +1454,7 @@ declare class Dropin extends PayrailsElement {
     private createCardForm;
     private createApplePayButton;
     private createCardPaymentButton;
+    private createEmbeddedElement;
     private onAuthorizeSuccess;
     private getElementEvents;
     private onAuthorizePending;
@@ -1417,11 +1534,36 @@ interface ContainerStyles {
     styles?: Partial<CSSStyleDeclaration>;
 }
 
-declare enum RequestMethod {
-    GET = "GET",
-    POST = "POST",
-    DELETE = "DELETE",
-    PATCH = "PATCH"
+interface DynamicElementOptions {
+    styles?: DynamicElementStyles;
+    translations?: DynamicElementTranslations;
+    events?: PaymentEvents;
+    paymentMethod: BasePaymentMethodConfig;
+}
+interface FormConfig {
+    schema: JSONSchemaType;
+}
+declare class DynamicElementForm extends Tokenizable {
+    protected options: DynamicElementOptions;
+    protected readonly formConfig: FormConfig;
+    private readonly returnInfo?;
+    private formFields;
+    private formData;
+    private __schema;
+    constructor(options: DynamicElementOptions, formConfig: FormConfig, returnInfo?: ReturnInfo | undefined);
+    collect(): Promise<Record<string, any>>;
+    protected constructSaveInstrumentBody(tokens: any, opts?: TokenizeOptions): Promise<any>;
+    private isFormValid;
+    mount(location: string): Promise<void>;
+    private makeForm;
+    private createField;
+    private createFieldSync;
+    private createOneOfField;
+    private createStringField;
+    private createFieldByType;
+    private extractStyles;
+    private makeFieldEvents;
+    private evaluateDependencies;
 }
 
 type Operations = {
@@ -1547,6 +1689,7 @@ declare class Payrails {
     private __cardPaymentButton;
     private __paypalButton;
     private __genericRedirectButton;
+    private __dynamicElementForm;
     private __dropin;
     static preloadCardForm: typeof SdkLoader.preloadCardForm;
     static init(initResponse: InitOptions, options?: PayrailsClientOptions): Payrails;
@@ -1571,6 +1714,7 @@ declare class Payrails {
     paymentButton(options: CardPaymentButtonOptions): CardPaymentButton;
     paypalButton(options?: PaypalButtonOptions): PaypalButton;
     genericRedirectButton(options: GenericRedirectButtonOptions): GenericRedirectButton;
+    dynamicElement(options: DynamicElementOptions): DynamicElementForm;
     getSavedPaypalAccounts(): StoredPaymentInstrument<PayPalMetadata>[];
     private logIntegrationMode;
     private constructor();
@@ -1588,7 +1732,7 @@ interface PaymentEvents {
     onPaymentButtonClicked?: (e?: {
         bin?: string;
     }) => Promise<boolean>;
-    onAuthorizeRequestStart?: () => void;
+    onAuthorizeRequestStart?: () => Promise<boolean>;
     onPaymentSessionExpired?: () => void;
     onThreeDSecureChallenge?: () => void;
 }