@payrails/web-sdk 5.11.0 → 5.12.0-RC.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payrails/web-sdk",
-  "version": "5.11.0",
+  "version": "5.12.0-RC.0",
   "description": "SDK providing tokenization options on the client for merchants",
   "main": "index.js",
   "types": "payrails.d.ts",
@@ -8,6 +8,7 @@
   "author": "Payrails GitHub Bot <github@payrails.com>",
   "license": "MIT",
   "dependencies": {
+    "@payrails/fraud-sdk": "1.0.0",
     "@payrails/web-cse": "1.2.3",
     "@types/applepayjs": "14.0.4",
     "@types/googlepay": "0.7.5"

package/payrails-styles.css

@@ -122,6 +122,41 @@
   margin-bottom: 4px;
 }
 
+.payrails-payment-installments-dropdown {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.payrails-payment-installments-dropdown select {
+  width: 100%;
+  padding: 10px 15px;
+  border: 1px solid #eae8ee;
+  border-radius: 4px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+}
+
+.payrails-payment-installments-dropdown::after {
+  content: '\25BC';
+  position: absolute;
+  top: 18px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: rgba(25, 25, 25, 1);
+  right: 20px;
+}
+
+.payrails-card-form-payment-installments-container {
+  position: relative;
+  width: 100%;
+  margin-bottom: 8px;
+}
+
 #payrails-card-list * {
   line-height: 1;
 }

package/payrails.d.ts

@@ -1,4 +1,5 @@
 import { LogLevel as LogLevel$1 } from '@payrails/logger';
+import { FraudProvider } from '@payrails/fraud-sdk';
 
 declare enum PAYMENT_METHOD_CODES {
     'CARD' = "card",
@@ -68,6 +69,8 @@ declare class WorkflowExecution {
     get authorizeLink(): string | undefined;
     get createSessionLink(): string | undefined;
     get storedPaymentInstruments(): StoredPaymentInstrument<PayPalMetadata & CardMetadata>[];
+    isPaymentInstallmentsEnabled(paymentMethod: PAYMENT_METHOD_CODES): boolean | undefined;
+    getPaymentInstallmentOptions(paymentMethod: PAYMENT_METHOD_CODES): PaymentInstallmentsConfig;
     private getStoredInstrumentForPaymentMethod;
     getPaymentMethodForStoredInstrument<T extends CardMetadata | PayPalMetadata>(instrument: StoredPaymentInstrument<T>): {
         id: string;
@@ -77,6 +80,8 @@ declare class WorkflowExecution {
         config: ApplePayConfig | PayPalConfig | GooglePayConfig | undefined;
         clientConfig?: {
             flow?: PAYMENT_CLIENT_FLOW;
+            supportsInstallments?: boolean;
+            installments?: PaymentInstallmentsConfig;
         };
         paymentMethodCode: PAYMENT_METHOD_CODES;
     } | undefined;
@@ -88,6 +93,8 @@ declare class WorkflowExecution {
         config: ApplePayConfig | PayPalConfig | GooglePayConfig | undefined;
         clientConfig?: {
             flow?: PAYMENT_CLIENT_FLOW;
+            supportsInstallments?: boolean;
+            installments?: PaymentInstallmentsConfig;
         };
         paymentMethodCode: PAYMENT_METHOD_CODES;
     };
@@ -157,6 +164,13 @@ interface WorkflowExecutionResponse {
 interface BasePaymentMethodConfig {
     paymentMethodCode: PAYMENT_METHOD_CODES;
 }
+interface BaseInstallmentOption {
+    count: number;
+    amount: number;
+}
+interface PaymentInstallmentsConfig {
+    [key: string]: BaseInstallmentOption[];
+}
 interface StorablePaymentCompositionOption<I = CardMetadata | PayPalMetadata, C = undefined | ApplePayConfig | PayPalConfig | GooglePayConfig> extends BasePaymentMethodConfig {
     id: string;
     description?: string;
@@ -165,6 +179,8 @@ interface StorablePaymentCompositionOption<I = CardMetadata | PayPalMetadata, C
     config: C;
     clientConfig?: {
         flow?: PAYMENT_CLIENT_FLOW;
+        supportsInstallments?: boolean;
+        installments?: PaymentInstallmentsConfig;
     };
     paymentInstruments?: Array<StoredPaymentInstrument<I>>;
 }
@@ -204,6 +220,13 @@ interface CardMetadata {
     bin?: string;
     suffix?: string;
     network?: string;
+    binLookup?: {
+        issuerCountry: {
+            code: string;
+            name: string;
+            iso3: string;
+        };
+    };
 }
 declare enum PAYMENT_CLIENT_FLOW {
     'REDIRECT' = "redirect",
@@ -243,6 +266,18 @@ interface SaveInstrumentResponse {
     futureUsage?: string;
 }
 
+interface BinLookupResponse {
+    bin: string;
+    network: string;
+    issuer?: string;
+    issuerCountry?: {
+        code?: string;
+        name?: string;
+        iso3?: string;
+    };
+    type?: string;
+}
+
 declare enum ElementType$1 {
     CVV = "CVV",
     EXPIRATION_DATE = "EXPIRATION_DATE",
@@ -562,6 +597,40 @@ declare const regexes: {
 };
 type CardNetwork = keyof typeof regexes;
 
+interface PaymentInstallmentsElementOptions extends ElementOptions {
+    showPaymentInstallmentsDropdown?: boolean;
+    installmentOptions?: BaseInstallmentOption[] | null;
+    installmentCurrency?: string;
+    translations?: {
+        labels?: {
+            paymentInstallments?: string;
+        };
+    };
+    styles?: {
+        paymentInstallmentsDropdown?: Partial<CSSStyleDeclaration>;
+    };
+    events?: PayrailsSDKEvents;
+}
+declare class PaymentInstallmentsDropdown extends PayrailsElement {
+    private options;
+    constructor(options: PaymentInstallmentsElementOptions);
+    private generateOptionsHTML;
+    updateOptions(installmentOptions: BaseInstallmentOption[]): void;
+    private createHTML;
+    private applyStyles;
+    private addListeners;
+    get selectedInstallmentValue(): string | undefined;
+    setDisabled(state: boolean): void;
+}
+declare class PayrailsElementWithPaymentInstallmentsDropdown extends PayrailsElement {
+    protected options?: PaymentInstallmentsElementOptions | undefined;
+    protected paymentInstallmentsDropdown: PaymentInstallmentsDropdown | null;
+    constructor(elementType: string, options?: PaymentInstallmentsElementOptions | undefined);
+    get selectedInstallmentValue(): number;
+    updateInstallmentOptions(installmentOptions: BaseInstallmentOption[]): void;
+    setDisabled(state: boolean): void;
+}
+
 interface OnChange {
     isValid: boolean;
     cardNetwork: CardNetwork | '';
@@ -570,6 +639,7 @@ interface OnChange {
 interface CardFormOptions extends StoreInstrumentElementOptions {
     showCardHolderName?: boolean;
     enrollInstrumentToNetworkOffers?: boolean;
+    execution?: WorkflowExecution;
     translations?: {
         placeholders?: {
             [key in ElementType]?: string;
@@ -579,6 +649,7 @@ interface CardFormOptions extends StoreInstrumentElementOptions {
         } & {
             saveInstrument?: string;
             storeInstrument?: string;
+            paymentInstallments?: string;
         };
     };
     events?: {
@@ -600,14 +671,20 @@ interface CardFormOptions extends StoreInstrumentElementOptions {
         labels?: {
             [key in ElementType | 'all']?: Partial<CSSStyleDeclaration>;
         };
-    } & StoreInstrumentElementOptions['styles'];
+    } & StoreInstrumentElementOptions['styles'] & PaymentInstallmentsElementOptions['styles'];
 }
 declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
     private readonly collectContainer;
     protected readonly options?: CardFormOptions | undefined;
     get bin(): string;
+    get isBinLookupEnabled(): boolean;
     private readonly formFields;
+    private readonly paymentInstallmentsDropdown;
+    private throttledFetchBinLookup;
+    private lastBin;
+    private lastBinLookup;
     constructor(collectContainer: PayrailsCollectContainer, options?: CardFormOptions | undefined);
+    throttledFetchBinLookupIfChanged(): Promise<BinLookupResponse | null>;
     tokenize(opts: TokenizeOptions): Promise<SaveInstrumentResponse>;
     show(): void;
     hide(): void;
@@ -617,12 +694,18 @@ declare class CardForm extends PayrailsElementWithStoreInstrumentCheckbox {
     get isValid(): boolean;
     get cardNetwork(): "" | "visa" | "mastercard" | "amex" | "diners" | "discover" | "jcb" | "hipercard" | "unionpay" | "maestro";
     onChange(): void;
+    private updateInstallments;
     collectValues(): Promise<{
         cardData: EncryptedCollectResult | TokenizedCollectResult;
         storeInstrument: boolean;
+        selectedInstallment: number | undefined;
         enrollInstrumentToNetworkOffers: boolean;
     }>;
+    protected get selectedInstallment(): number | undefined;
     private enforceEnrollInstrumentToNetworkOffersForMasterCard;
+    fetchBinLookup(): Promise<string | BinLookupResponse>;
+    get isPaymentInstallmentsEnabled(): boolean | undefined;
+    private getinstallmentOptions;
 }
 interface LabelStyles {
     base?: Partial<CSSStyleDeclaration>;
@@ -651,6 +734,15 @@ interface ReturnInfo {
     cancel?: string;
     error?: string;
 }
+declare global {
+    interface Window {
+        Payrails: {
+            riskIds: {
+                [key in FraudProvider]?: string;
+            };
+        };
+    }
+}
 
 interface CardPaymentButtonOptions {
     events?: PayrailsSDKEvents & {
@@ -673,6 +765,7 @@ declare class CardPaymentButton extends PayrailsElement {
     private readonly options;
     private readonly returnInfo?;
     selectedInstrument: StoredPaymentInstrument | null;
+    paymentInstallmentElement: PayrailsElementWithPaymentInstallmentsDropdown | null;
     get bin(): string | undefined;
     private paymentExecutor;
     private cardForm;
@@ -684,6 +777,7 @@ declare class CardPaymentButton extends PayrailsElement {
     private removeStyles;
     setLabel(label: string): void;
     setCardForm(cardForm: CardForm): void;
+    setPaymentInstallmentsDropdown(paymentInsallmentsDropdown: PayrailsElementWithPaymentInstallmentsDropdown): void;
     triggerLoading(isLoading: boolean): void;
     private onAuthorizationFailed;
     private onPay;
@@ -858,9 +952,12 @@ declare class Dropin extends PayrailsElement {
     private applePay;
     private cardForm;
     private paypal;
+    private paymentInstallmentsDropdown;
     constructor(collectContainer: PayrailsCollectContainer, clientConfig: PayrailsClientOptions, dropinConfig: DropinOptions, execution: WorkflowExecution, sdkConfig: SdkConfiguration);
     private isHppIntegration;
     private createStoredInstrumentElement;
+    private createInstallmentsDropdown;
+    private getInstallmentOptionsForInstrument;
     private createHppIntegrationElement;
     private get totalPaymentOptions();
     private createCreditCardButton;
@@ -874,6 +971,7 @@ declare class Dropin extends PayrailsElement {
     private onAuthorizeFailed;
     private isStoredInstrumentEnabled;
     private applyStyles;
+    fetchBinLookup(): Promise<string | BinLookupResponse | undefined>;
 }
 interface StorablePaymentMethodConfiguration extends StoreInstrumentElementOptions {
     showStoredInstruments?: boolean;
@@ -1014,6 +1112,7 @@ declare class Payrails {
     private logIntegrationMode;
     private constructor();
     private getContainerLayout;
+    binLookup(): Promise<any>;
 }
 interface InitOptions {
     version: string;
@@ -1046,6 +1145,12 @@ interface SdkConfiguration {
     amount: PayrailsAmount;
     holderReference: string;
     usePayrailsFrames: boolean;
+    links?: {
+        binLookup: {
+            method: 'GET' | 'POST';
+            href: string;
+        };
+    };
     vaultConfiguration: {
         cardTableName: string;
         token: string;
@@ -1131,6 +1236,7 @@ interface PayrailsSecureField {
 declare class PayrailsCollectContainer implements Mountable {
     private sdkConfig;
     bin: string;
+    isBinLookupEnabled: boolean;
     readonly id = "payrails-container-wrapper";
     private static instance;
     private readonly __container;
@@ -1150,6 +1256,7 @@ declare class PayrailsCollectContainer implements Mountable {
     private attachCustomEventHandler;
     private formatBin;
     private get elementToFieldMap();
+    fetchBinLookup: (bin: string) => Promise<string | BinLookupResponse>;
 }
 interface TokenizeOptions {
     futureUsage?: 'CardOnFile' | 'Subscription' | 'UnscheduledCardOnFile';