@payrails/web-sdk 5.22.3-RC.0 → 5.23.0-RC.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payrails/web-sdk",
-  "version": "5.22.3-RC.0",
+  "version": "5.23.0-RC.0",
   "description": "SDK providing tokenization options on the client for merchants",
   "main": "index.js",
   "types": "payrails.d.ts",
@@ -10,7 +10,7 @@
   "dependencies": {
     "@payrails/fraud-sdk": "1.4.2",
     "@payrails/web-cse": "1.2.3",
-    "@types/applepayjs": "14.0.4",
+    "@types/applepayjs": "14.0.9",
     "@types/googlepay": "0.7.5"
   },
   "scripts": {}

package/payrails-styles.css

@@ -591,6 +591,62 @@
   }
 }
 
+.payrails-dropin-loader-wrapper {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  z-index: 200;
+  .loading-overlay {
+    background: rgba(252, 252, 252, 0.7);
+    width: 100%;
+    height: 100%;
+    display: block;
+    .lds-ring {
+      display: inline-block;
+      position: relative;
+      width: 80px;
+      height: 80px;
+      top: 45%;
+      left: 40%;
+
+      div {
+        box-sizing: border-box;
+        display: block;
+        position: absolute;
+        width: 64px;
+        height: 64px;
+        margin: 8px;
+        border: 8px solid #fff;
+        border-radius: 50%;
+        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+      }
+      div:nth-child(1) {
+        animation-delay: -0.45s;
+      }
+      div:nth-child(2) {
+        animation-delay: -0.3s;
+      }
+      div:nth-child(3) {
+        animation-delay: -0.15s;
+      }
+      div:nth-child(4) {
+        border-color: rgb(0, 0, 0) transparent transparent transparent;
+      }
+    }
+  }
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 button.payrails-generic-button {
     border: none;
     outline: none;

package/payrails.d.ts

@@ -523,7 +523,7 @@ declare class PayrailsElement implements Mountable {
     get parentElement(): HTMLElement | null;
     get selector(): string;
     mount(location: string): void;
-    private clean;
+    protected clean(): void;
     unmount(): void;
 }
 
@@ -918,6 +918,15 @@ interface AuthFailedMsgOptions {
     };
 }
 
+declare enum StyleKeys {
+    overlay = "overlay",
+    loader = "loader"
+}
+interface LoadingScreenStyles {
+    [StyleKeys.overlay]?: Partial<CSSStyleDeclaration>;
+    [StyleKeys.loader]?: Partial<CSSStyleDeclaration>;
+}
+
 interface GooglePayButtonOptions extends StoreInstrumentElementOptions {
     environment?: PayrailsEnvironment;
     merchantInfo?: google.payments.api.MerchantInfo;
@@ -936,7 +945,7 @@ interface GooglePayButtonOptions extends StoreInstrumentElementOptions {
 }
 declare class GooglePayButton extends PayrailsElementWithStoreInstrumentCheckbox {
     protected options: GooglePayButtonOptions;
-    private googleButton;
+    private static instance;
     private readonly paymentExecutor;
     private static googleSDKClient;
     private static getSDKClient;
@@ -1059,6 +1068,7 @@ interface PaypalButtonOptions extends StoreInstrumentElementOptions {
 }
 declare class PaypalButton extends PayrailsElementWithStoreInstrumentCheckbox {
     protected options?: PaypalButtonOptions | undefined;
+    private static instance;
     constructor(options?: PaypalButtonOptions | undefined);
     private paymentExecutor;
     private button;
@@ -1077,6 +1087,7 @@ declare class PaypalButton extends PayrailsElementWithStoreInstrumentCheckbox {
     private approvePayment;
     private get fraudNetGuid();
     mount(location: string): void;
+    private renderButton;
     unmount(): void;
 }
 
@@ -1102,6 +1113,7 @@ declare class Dropin extends PayrailsElement {
     private applePay;
     private cardForm;
     private paypal;
+    private loadingScreen;
     constructor(collectContainer: PayrailsCollectContainer, clientConfig: PayrailsClientOptions, dropinConfig: DropinOptions);
     private isHppIntegration;
     private createStoredInstrumentElement;
@@ -1175,6 +1187,7 @@ interface DropinOptions {
         cardPaymentButton?: CardPaymentButtonOptions['styles'];
         authSuccess?: Partial<CSSStyleDeclaration>;
         authFailed?: Partial<CSSStyleDeclaration>;
+        loadingScreen?: LoadingScreenStyles;
         addressSelector?: AddressSelectorElementOptions['styles'];
         mercadoPago?: GenericRedirectDropinOptions['styles'];
     };
@@ -1203,7 +1216,7 @@ interface PayPalScriptConfig {
     intent: 'tokenize' | 'capture' | 'authorize';
 }
 declare enum ThirdPartySDK {
-    ApplePay = "https://applepay.cdn-apple.com/jsapi/v1.2.0/apple-pay-sdk.js",
+    ApplePay = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js",
     GooglePay = "https://pay.google.com/gp/p/js/pay.js",
     PayPal = "paypal-sdk"
 }