@payrails/web-sdk 5.1.0 → 5.3.0

package/package.json

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

package/payrails-styles.css

@@ -34,7 +34,9 @@
 }
 
 #payrails-card-payment-button .dot-flashing {
-  position: relative;
+  position: absolute;
+  left: auto;
+  right: auto;
   width: 10px;
   height: 10px;
   border-radius: 5px;
@@ -73,11 +75,11 @@
 
 @keyframes dot-flashing {
   0% {
-    background-color: #015bbb;
+    opacity: 1;
   }
   50%,
   100% {
-    background-color: rgba(152, 128, 255, 0.2);
+    opacity: .2;
   }
 }
 
@@ -157,6 +159,15 @@
   font-weight: bolder;
 }
 
+.payment-option-text {
+  display: inline-flex;
+  align-items: center;
+}
+
+.payment-option-icon {
+  width: 24px;
+  margin-right: 7px;
+}
 #payrails-dropin-component {
   border-radius: 0;
   box-shadow: none;
@@ -250,6 +261,11 @@
   align-items: center;
 }
 
+.payrails-dropin-item .payrails-store-instrument-icon {
+  width: 24px;
+  margin-right: 7px;
+}
+
 .payrails-dropin-item.payrails-store-instrument {
   display: block;
   margin-top: 20px !important;
@@ -460,6 +476,72 @@
   }
 }
 
+.payrails-generic-button * {
+    box-sizing: border-box;
+}
+
+.payrails-generic-button .dot-flashing-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.payrails-generic-button .dot-flashing-text {
+    visibility: hidden;
+}
+
+.payrails-generic-button .dot-flashing {
+    position: absolute;
+    left: auto;
+    right: auto;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: currentColor;
+    color: currentColor;
+    animation: dot-flashing 1s infinite linear alternate;
+    animation-delay: 0.5s;
+}
+.payrails-generic-button .dot-flashing::before,
+.payrails-generic-button .dot-flashing::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+}
+.payrails-generic-button .dot-flashing::before {
+    left: -15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: currentColor;
+    color: currentColor;
+    animation: dot-flashing 1s infinite alternate;
+    animation-delay: 0s;
+}
+.payrails-generic-button .dot-flashing::after {
+    left: 15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: currentColor;
+    color: currentColor;
+    animation: dot-flashing 1s infinite alternate;
+    animation-delay: 1s;
+}
+
+@keyframes dot-flashing {
+    0% {
+        opacity: 1;
+    }
+    50%,
+    100% {
+        opacity: .2;
+    }
+}
+
 #payrails-paypal-button-wrapper {
   min-height: 44px;
   margin: 8px 4px;

package/payrails.d.ts

@@ -167,6 +167,7 @@ interface StoredPaymentInstrument<T = CardMetadata | PayPalMetadata> {
     id: string;
     status: PAYMENT_INSTRUMENT_STATUS;
     paymentMethod: PAYMENT_METHOD_CODES;
+    displayName?: string;
     data?: T;
 }
 interface PayPalMetadata {
@@ -175,6 +176,7 @@ interface PayPalMetadata {
 interface CardMetadata {
     bin?: string;
     suffix?: string;
+    network?: string;
 }
 
 interface SaveInstrumentResponse {
@@ -538,12 +540,11 @@ declare class ApplePayButton extends PayrailsElementWithStoreInstrumentCheckbox
     private execution;
     protected options: ApplePayButtonOptions;
     private appleButton;
-    private loadScript;
     private paymentExecutor;
+    static isApplePayAvailable(): Promise<boolean>;
     constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options: ApplePayButtonOptions);
     mount(location: string): void;
     unmount(): void;
-    private isApplePayAvailable;
     private mountApplePayButton;
     private createApplePaySession;
     private onApplePayAuthorized;
@@ -698,11 +699,8 @@ declare enum AuthorizationFailureReasons {
 }
 
 interface GooglePayButtonOptions extends StoreInstrumentElementOptions {
-    environment?: 'TEST' | 'PRODUCTION';
-    merchantInfo?: {
-        merchantId: string;
-        merchantName?: string;
-    };
+    environment?: PayrailsEnvironment;
+    merchantInfo?: google.payments.api.MerchantInfo;
     events?: PaymentEvents & UIEvents & {
         onGooglePayAvailable?: () => void;
     };
@@ -719,7 +717,9 @@ declare class GooglePayButton extends PayrailsElementWithStoreInstrumentCheckbox
     protected options: GooglePayButtonOptions;
     private googleButton;
     private readonly paymentExecutor;
-    private loadScript;
+    private static googleSDKClient;
+    private static getSDKClient;
+    static isGooglePayAvailable(allowedPaymentMethods: google.payments.api.IsReadyToPayPaymentMethodSpecification[], environment?: PayrailsEnvironment, merchantInfo?: google.payments.api.MerchantInfo): Promise<boolean>;
     constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options: GooglePayButtonOptions);
     private sdkLoaded;
     private onLoadPaymentData;
@@ -735,24 +735,25 @@ interface DropinElementEvents extends PaymentEvents {
 interface DropinElementStyles {
     base?: Partial<CSSStyleDeclaration>;
     active?: Partial<CSSStyleDeclaration>;
-}
-declare abstract class DropinElement extends PayrailsElement {
-    protected events?: DropinElementEvents | undefined;
-    protected styles?: DropinElementStyles | undefined;
-    protected abstract component: PayrailsElement;
-    protected isActive: boolean;
-    input: HTMLInputElement;
-    protected label: HTMLLabelElement;
-    protected constructor(id: string, label: string, events?: DropinElementEvents | undefined, styles?: DropinElementStyles | undefined);
-    get identifier(): string;
-    deactivate(): void;
-    protected applyBaseStyles(): void;
-    protected applyActiveStyles(): void;
-    activate(): void;
+}
+
+interface ButtonOptions {
+    id: string;
+    events?: PayrailsSDKEvents & {
+        onClick?: () => Promise<void>;
+    };
+    translations: {
+        label: string;
+    };
+    styles?: {
+        base?: Partial<CSSStyleDeclaration>;
+        loading?: Partial<CSSStyleDeclaration>;
+        hover?: Partial<CSSStyleDeclaration>;
+    };
 }
 
 interface GenericRedirectButtonOptions {
-    styles?: Partial<CSSStyleDeclaration>;
+    styles?: ButtonOptions['styles'];
     translations?: {
         label?: string;
     };
@@ -760,33 +761,22 @@ interface GenericRedirectButtonOptions {
 }
 declare class GenericRedirectButton extends PayrailsElement {
     private sdkConfig;
-    private execution;
     protected options: GenericRedirectButtonOptions;
     private readonly returnInfo?;
-    private button;
     constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options: GenericRedirectButtonOptions, returnInfo?: ReturnInfo | undefined);
+    private buildRedirectButton;
     private paymentExecutor;
     private onClick;
-    private configureButton;
     mount(location: string): void;
 }
 
 interface GenericRedirectDropinOptions {
-    styles?: {
-        button?: GenericRedirectButtonOptions['styles'];
-    } & DropinElementStyles;
+    styles?: DropinElementStyles;
     translations?: {
         label?: string;
         button?: GenericRedirectButtonOptions['translations'];
     };
     events?: DropinElementEvents & PaymentEvents;
-}
-declare class MercadoPagoDropin extends DropinElement {
-    private sdkConfig;
-    private execution;
-    private readonly returnInfo?;
-    protected component: GenericRedirectButton;
-    constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options?: GenericRedirectDropinOptions, returnInfo?: ReturnInfo | undefined);
 }
 
 interface GooglePayDropinOptions extends GooglePayButtonOptions {
@@ -820,11 +810,11 @@ declare class PaypalButton extends PayrailsElementWithStoreInstrumentCheckbox {
     fraudNetGuid: string | undefined;
     private paymentExecutor;
     private button;
-    private paypalLoader;
     private confirmLink;
     private buttonWrapperId;
     private checkboxWrapperId;
     private loadPaypal;
+    private get paypalScriptConfig();
     private createPaypalButton;
     private createPayPalButtonConfig;
     private createBillingAgreementConfig;
@@ -915,10 +905,32 @@ interface DropinOptions {
         applePayButton?: ApplePayButtonOptions['styles'];
         cardForm?: CardFormOptions['styles'];
         cardPaymentButton?: CardPaymentButtonOptions['styles'];
-        mercadoPago?: MercadoPagoDropin['styles'];
+        mercadoPago?: GenericRedirectDropinOptions['styles'];
     };
 }
 
+declare class SdkLoader {
+    static load<T = void>(sdk: ThirdPartySDK, params?: PayPalScriptConfig): Promise<T>;
+    static reset(): void;
+    static preloadCardForm(): void;
+    private static loadScript;
+    private static loadPayPalScript;
+    private static readonly scriptMap;
+    private constructor();
+    private static logLoadError;
+}
+interface PayPalScriptConfig {
+    clientId: string;
+    currency: string;
+    vault: boolean;
+    intent: 'tokenize' | 'capture' | 'authorize';
+}
+declare enum ThirdPartySDK {
+    ApplePay = "https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js",
+    GooglePay = "https://pay.google.com/gp/p/js/pay.js",
+    PayPal = "paypal-sdk"
+}
+
 type FraudNetPageId = 'home-page' | 'search-result-page' | 'category-page' | 'product-detail-page' | 'cart-page' | 'inline-cart-page' | 'checkout-page';
 declare class FraudNet implements Mountable {
     private pageId;
@@ -938,7 +950,7 @@ declare class FraudNet implements Mountable {
 }
 
 interface PayrailsClientOptions {
-    environment?: 'TEST' | 'PRODUCTION';
+    environment?: PayrailsEnvironment;
     events?: {
         onClientInitialized: (execution: WorkflowExecution) => void;
     };
@@ -960,12 +972,14 @@ declare class Payrails {
     private __fraudNet;
     private __paypalButton;
     private __genericRedirectButton;
-    static preloadCardForm: () => void;
+    static preloadCardForm: typeof SdkLoader.preloadCardForm;
     static init(initResponse: InitOptions, options?: PayrailsClientOptions): Payrails;
     update(amount: PayrailsAmount): void;
     collectContainer(containerOptions: CollectContainerOptions): PayrailsCollectContainer;
     googlePayButton(options: GooglePayButtonOptions): GooglePayButton;
+    isGooglePayAvailable(merchantInfo: google.payments.api.MerchantInfo): Promise<boolean>;
     applePayButton(options: ApplePayButtonOptions): ApplePayButton;
+    isApplePayAvailable(): Promise<boolean>;
     cardList(options?: CardListOptions): CardList;
     cardForm(options?: CardFormOptions): CardForm;
     dropin(options: DropinOptions): Dropin;
@@ -1027,6 +1041,10 @@ interface SdkConfiguration {
 interface PayrailsAmount {
     value: string;
     currency: string;
+}
+declare enum PayrailsEnvironment {
+    TEST = "TEST",
+    PRODUCTION = "PRODUCTION"
 }
 
 type TokenizedCollectResult = {