@solidgate/vue-sdk 1.10.0 → 1.11.0

package/README.md

@@ -35,16 +35,18 @@ const merchantData: InitConfig['merchantData'] = {
 </script>
 ```
 
-In order to render google/apple button in custom container define Payment as async component and pass link to container element
+In order to render google/apple/paypal button in custom container define Payment as async component and pass link to container element
 ```vue
 <template>
   <Payment
     :merchan-data="merchantData"
     :google-pay-container-ref="googleButton"
     :apple-pay-container-ref="appleButton"
+    :paypal-container-ref="paypalButton"
   />
   <div ref="googleButton" />
   <div ref="appleButton" />
+  <div ref="paypalButton" />
 </template>
 
 <script lang="ts" setup>
@@ -54,6 +56,7 @@ const Payment = defineAsyncComponent(() => import('@solidgate/vue-sdk'))
 
 const googleButton = ref<HTMLDivElement>()
 const appleButton = ref<HTMLDivElement>()
+const paypalButton = ref<HTMLDivElement>()
 
 const merchantData: InitConfig['merchantData'] = {
   merchant: '<<--YOUR MERCHANT ID-->>',

package/dist/Payment.vue.d.ts

@@ -50,8 +50,17 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         color: string;
         type: string;
     }> | undefined, "containerId"> | undefined;
+    paypalButtonParams?: Omit<{
+        enabled?: boolean | undefined;
+        containerId?: string | undefined;
+        color?: "black" | "blue" | "gold" | "silver" | undefined;
+        shape?: "rect" | "pill" | "sharp" | undefined;
+        label?: "paypal" | "checkout" | "buynow" | "pay" | "installment" | undefined;
+        height?: number | undefined;
+    } | undefined, "containerId"> | undefined;
     googlePayContainerRef?: HTMLDivElement | undefined;
     applePayContainerRef?: HTMLDivElement | undefined;
+    paypalContainerRef?: HTMLDivElement | undefined;
     onReadyPaymentInstance?: ((paymentInstance: ClientSdkInstance) => void) | undefined;
     onMounted?: ((e: MountedMessage) => void) | undefined;
     onError?: ((e: ErrorMessage) => void) | undefined;
@@ -141,8 +150,17 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         color: string;
         type: string;
     }> | undefined, "containerId"> | undefined;
+    paypalButtonParams?: Omit<{
+        enabled?: boolean | undefined;
+        containerId?: string | undefined;
+        color?: "black" | "blue" | "gold" | "silver" | undefined;
+        shape?: "rect" | "pill" | "sharp" | undefined;
+        label?: "paypal" | "checkout" | "buynow" | "pay" | "installment" | undefined;
+        height?: number | undefined;
+    } | undefined, "containerId"> | undefined;
     googlePayContainerRef?: HTMLDivElement | undefined;
     applePayContainerRef?: HTMLDivElement | undefined;
+    paypalContainerRef?: HTMLDivElement | undefined;
     onReadyPaymentInstance?: ((paymentInstance: ClientSdkInstance) => void) | undefined;
     onMounted?: ((e: MountedMessage) => void) | undefined;
     onError?: ((e: ErrorMessage) => void) | undefined;

package/dist/constants/index.d.ts

@@ -1,4 +1,5 @@
 declare const IFRAME_CONTAINER_ID: string;
 declare const GOOGLE_PAY_BUTTON_CONTAINER_ID: string;
 declare const APPLE_PAY_BUTTON_CONTAINER_ID: string;
-export { IFRAME_CONTAINER_ID, GOOGLE_PAY_BUTTON_CONTAINER_ID, APPLE_PAY_BUTTON_CONTAINER_ID };
+declare const PAYPAL_BUTTON_CONTAINER_ID: string;
+export { IFRAME_CONTAINER_ID, GOOGLE_PAY_BUTTON_CONTAINER_ID, APPLE_PAY_BUTTON_CONTAINER_ID, PAYPAL_BUTTON_CONTAINER_ID };

package/dist/index.css

@@ -1 +1 @@
-.payment-form-container[data-v-1bdf8589] iframe,.payment-form-container[data-v-88c87bb0] iframe{border:none}
+.payment-form-container[data-v-068d34c2] iframe,.payment-form-container[data-v-88c87bb0] iframe{border:none}

package/dist/index.es.js

@@ -2,6 +2,7 @@ import { defineComponent, ref, onMounted, onUnmounted, watch, isReactive, openBl
 import './index.css';const IFRAME_CONTAINER_ID = `solid-payment-form-container_#${Math.random() * 1e4}`;
 const GOOGLE_PAY_BUTTON_CONTAINER_ID = `google-pay-button-container_#${Math.random() * 1e4}`;
 const APPLE_PAY_BUTTON_CONTAINER_ID = `apple-pay-button-container_#${Math.random() * 1e4}`;
+const PAYPAL_BUTTON_CONTAINER_ID = `paypal-button-container_#${Math.random() * 1e4}`;
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var dist = {};
 var MessageType$2 = {};
@@ -94,6 +95,7 @@ var PayableEntity$1;
   PayableEntity2["GooglePay"] = "googlebtn";
   PayableEntity2["Form"] = "form";
   PayableEntity2["Resign"] = "resign";
+  PayableEntity2["Paypal"] = "paypal";
 })(PayableEntity$1 || (PayableEntity$1 = {}));
 PayableEntity$2.default = PayableEntity$1;
 var InteractionType$2 = {};
@@ -185,6 +187,9 @@ var _a, _SdkLoader_CloudfrontSrc, _SdkLoader_loadAttempt;
 Object.defineProperty(SdkLoader$2, "__esModule", { value: true });
 class SdkLoader$1 {
   static load() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return Promise.resolve(null);
+    }
     if (window.PaymentFormSdk) {
       return Promise.resolve(window.PaymentFormSdk);
     }
@@ -251,6 +256,10 @@ const payButtonIds = {
   applePayButtonParams: {
     title: "ApplePay",
     id: APPLE_PAY_BUTTON_CONTAINER_ID
+  },
+  paypalButtonParams: {
+    title: "PayPal",
+    id: PAYPAL_BUTTON_CONTAINER_ID
   }
 };
 function getPayButtonParams(config, key, container) {
@@ -281,12 +290,16 @@ const initPaymentForm = async (props) => {
     styles,
     formParams,
     googlePayContainerRef,
-    applePayContainerRef
+    applePayContainerRef,
+    paypalContainerRef
   } = props;
   if (!merchantData) {
     throw new Error("Attribute 'merchantData' is required");
   }
   const clientSdk = await SdkLoader.load();
+  if (!clientSdk) {
+    return null;
+  }
   const initConfig = {
     merchantData,
     iframeParams: {
@@ -312,6 +325,14 @@ const initPaymentForm = async (props) => {
   if (appleButtonParams) {
     initConfig.applePayButtonParams = appleButtonParams;
   }
+  const paypalButtonParams = getPayButtonParams(
+    props,
+    "paypalButtonParams",
+    paypalContainerRef
+  );
+  if (paypalButtonParams) {
+    initConfig.paypalButtonParams = paypalButtonParams;
+  }
   return clientSdk.init(initConfig);
 };
 const onSubscribe = (sdkInstanceValue, callbacks) => {
@@ -377,8 +398,10 @@ const _sfc_main$1 = defineComponent({
     formParams: {},
     googlePayButtonParams: {},
     applePayButtonParams: {},
+    paypalButtonParams: {},
     googlePayContainerRef: {},
     applePayContainerRef: {},
+    paypalContainerRef: {},
     onReadyPaymentInstance: {},
     onMounted: { type: Function, default: () => {
     } },
@@ -416,8 +439,10 @@ const _sfc_main$1 = defineComponent({
       formParams: props.formParams,
       googlePayButtonParams: props.googlePayButtonParams,
       applePayButtonParams: props.applePayButtonParams,
+      paypalButtonParams: props.paypalButtonParams,
       googlePayContainerRef: props.googlePayContainerRef,
-      applePayContainerRef: props.applePayContainerRef
+      applePayContainerRef: props.applePayContainerRef,
+      paypalContainerRef: props.paypalContainerRef
     };
     const callbacks = {
       onMounted: (e) => props.onMounted && props.onMounted(e),
@@ -461,12 +486,15 @@ const _sfc_main$1 = defineComponent({
     };
   }
 });
-var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-1bdf8589"]]);
+var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-068d34c2"]]);
 const initResignForm = async (config) => {
   if (!config.resignRequest) {
     throw new Error("Attribute 'resignRequest' is required");
   }
   const clientSdk = await SdkLoader.load();
+  if (!clientSdk) {
+    return null;
+  }
   const { appearance, styles, container } = config;
   const formConfig = {
     container: {

package/dist/interfaces/PaymentProps.d.ts

@@ -7,8 +7,10 @@ interface PaymentProps extends Partial<ClientSdkEventsProvider> {
     formParams?: InitConfig['formParams'];
     googlePayButtonParams?: Omit<InitConfig['googlePayButtonParams'], 'containerId'>;
     applePayButtonParams?: Omit<InitConfig['applePayButtonParams'], 'containerId'>;
+    paypalButtonParams?: Omit<InitConfig['paypalButtonParams'], 'containerId'>;
     googlePayContainerRef?: HTMLDivElement;
     applePayContainerRef?: HTMLDivElement;
+    paypalContainerRef?: HTMLDivElement;
     onReadyPaymentInstance?: (paymentInstance: ClientSdkInstance) => void;
 }
 export default PaymentProps;

package/dist/utils/getPayButtonParams.d.ts

@@ -1,3 +1,3 @@
 import { InitConfig } from '@solidgate/client-sdk-loader';
-declare function getPayButtonParams<T extends 'googlePayButtonParams' | 'applePayButtonParams'>(config: InitConfig, key: T, container: HTMLElement | undefined): NonNullable<InitConfig[T]> | undefined;
+declare function getPayButtonParams<T extends 'googlePayButtonParams' | 'applePayButtonParams' | 'paypalButtonParams'>(config: InitConfig, key: T, container: HTMLElement | undefined): NonNullable<InitConfig[T]> | undefined;
 export default getPayButtonParams;

package/dist/utils/initPaymentForm.d.ts

@@ -1,4 +1,4 @@
 import { ClientSdkInstance } from '@solidgate/client-sdk-loader';
 import PaymentProps from '../interfaces/PaymentProps';
-declare const initPaymentForm: (props: PaymentProps) => Promise<ClientSdkInstance>;
+declare const initPaymentForm: (props: PaymentProps) => Promise<ClientSdkInstance | null>;
 export default initPaymentForm;

package/dist/utils/initResignForm.d.ts

@@ -4,5 +4,5 @@ declare const initResignForm: (config: {
     appearance?: ResignFormConfig['appearance'];
     container?: ResignFormConfig['container'];
     styles?: ResignFormConfig['styles'];
-}) => Promise<ClientSdkInstance>;
+}) => Promise<ClientSdkInstance | null>;
 export default initResignForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidgate/vue-sdk",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "repository": "https://github.com/solidgate-tech/vue-sdk",
   "files": [
     "dist"
@@ -28,7 +28,7 @@
     "vue": "^3.2.25"
   },
   "dependencies": {
-    "@solidgate/client-sdk-loader": "^1.8.0"
+    "@solidgate/client-sdk-loader": "^1.10.1"
   },
   "devDependencies": {
     "@babel/types": "^7.24.5",