@solidgate/vue-sdk 1.24.0 → 1.26.0

package/README.md

@@ -2,7 +2,7 @@
 
 This repository is a Vue 3 wrapper for the Solidgate Client Software Development Kit (SDK).
 
-It supports rendering payment forms and resign forms, including custom container elements for <a href="https://docs.solidgate.com/payments/integrate/payment-form/google-pay-button/" target="_blank">Google Pay</a>, <a href="https://docs.solidgate.com/payments/integrate/payment-form/apple-pay-button/" target="_blank">Apple Pay</a>, or <a href="https://docs.solidgate.com/payments/integrate/payment-form/paypal-button/" target="_blank">PayPal</a> buttons.
+It supports rendering payment forms and resign forms, including custom container elements for <a href="https://docs.solidgate.com/payments/integrate/payment-form/google-pay-button/" target="_blank">Google Pay</a>, <a href="https://docs.solidgate.com/payments/integrate/payment-form/apple-pay-button/" target="_blank">Apple Pay</a>, or alternative payment method (<a href="https://docs.solidgate.com/payments/integrate/payment-form/apm-buttons/" target="_blank">APM</a>) buttons.
 
 Check our
 * <a href="https://docs.solidgate.com/" target="_blank">Payment guide</a> to understand business value better
@@ -72,35 +72,38 @@ const merchantData: InitConfig['merchantData'] = {
 
 #### Custom containers
 
-To render <a href="https://docs.solidgate.com/payments/integrate/payment-form/google-pay-button/" target="_blank">Google Pay</a>, <a href="https://docs.solidgate.com/payments/integrate/payment-form/apple-pay-button/" target="_blank">Apple Pay</a>, or <a href="https://docs.solidgate.com/payments/integrate/payment-form/paypal-button/" target="_blank">PayPal</a> buttons in separate containers, define Payment as an asynchronous component and pass references to the container elements.
+To render <a href="https://docs.solidgate.com/payments/integrate/payment-form/google-pay-button/" target="_blank">Google Pay</a>, <a href="https://docs.solidgate.com/payments/integrate/payment-form/apple-pay-button/" target="_blank">Apple Pay</a>, or <a href="https://docs.solidgate.com/payments/integrate/payment-form/apm-buttons/#paypal-button" target="_blank">PayPal</a> buttons in separate containers, define payment as an asynchronous component and pass references to the container elements.
 
 ```vue
 <template>
   <Payment
-    :merchan-data="merchantData"
+    :merchant-data="merchantData"
     :google-pay-container-ref="googleButton"
     :apple-pay-container-ref="appleButton"
     :paypal-container-ref="paypalButton"
+    :mbway-container-ref="mbwayButton"
   />
   <div ref="googleButton" />
   <div ref="appleButton" />
   <div ref="paypalButton" />
+  <div ref="mbwayButton" />
 </template>
 
 <script lang="ts" setup>
-import { ref, defineAsyncComponent } from 'vue'
-import { InitConfig } from '@solidgate/vue-sdk'
-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-->>',
-  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
-  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
-}
+  import { ref, defineAsyncComponent } from 'vue'
+  import { InitConfig } from '@solidgate/vue-sdk'
+  const Payment = defineAsyncComponent(() => import('@solidgate/vue-sdk'))
+
+  const googleButton = ref<HTMLDivElement>()
+  const appleButton = ref<HTMLDivElement>()
+  const paypalButton = ref<HTMLDivElement>()
+  const mbwayButton = ref<HTMLDivElement>()
+
+  const merchantData: InitConfig['merchantData'] = {
+    merchant: '<<--YOUR MERCHANT ID-->>',
+    signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
+    paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
+  }
 </script>
 ```
 
@@ -114,13 +117,13 @@ Render a <a href="https://docs.solidgate.com/payments/integrate/payment-form/res
 </template>
 
 <script lang="ts" setup>
-import { Resign, ResignRequest } from '@solidgate/vue-sdk'
+  import { Resign, ResignRequest } from '@solidgate/vue-sdk'
 
-const resignRequest: ResignRequest = {
-  merchant: '<<--YOUR MERCHANT ID-->>',
-  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
-  resignIntent: '<<--YOUR RESIGN INTENT-->>'
-}
+  const resignRequest: ResignRequest = {
+    merchant: '<<--YOUR MERCHANT ID-->>',
+    signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
+    resignIntent: '<<--YOUR RESIGN INTENT-->>'
+  }
 </script>
 ```
 

package/dist/Payment.vue.d.ts

@@ -69,11 +69,24 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         enabled?: boolean | undefined;
         height?: number | undefined;
     } | undefined, "containerId"> | undefined;
+    blikButtonParams?: Omit<{
+        containerId?: string | undefined;
+        enabled?: boolean | undefined;
+        theme?: "dark" | "light" | undefined;
+        height?: number | undefined;
+    } | undefined, "containerId"> | undefined;
+    mbwayButtonParams?: Omit<{
+        containerId?: string | undefined;
+        enabled?: boolean | undefined;
+        height?: number | undefined;
+    } | undefined, "containerId"> | undefined;
     googlePayContainerRef?: HTMLDivElement | undefined;
     applePayContainerRef?: HTMLDivElement | undefined;
     paypalContainerRef?: HTMLDivElement | undefined;
     pixContainerRef?: HTMLDivElement | undefined;
     bizumContainerRef?: HTMLDivElement | undefined;
+    blikContainerRef?: HTMLDivElement | undefined;
+    mbwayContainerRef?: HTMLDivElement | undefined;
     onReadyPaymentInstance?: ((paymentInstance: ClientSdkInstance) => void) | undefined;
     onPaymentDetails?: ((e: PaymentDetailsMessage) => void) | undefined;
     onMounted?: ((e: MountedMessage) => void) | undefined;
@@ -185,11 +198,24 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         enabled?: boolean | undefined;
         height?: number | undefined;
     } | undefined, "containerId"> | undefined;
+    blikButtonParams?: Omit<{
+        containerId?: string | undefined;
+        enabled?: boolean | undefined;
+        theme?: "dark" | "light" | undefined;
+        height?: number | undefined;
+    } | undefined, "containerId"> | undefined;
+    mbwayButtonParams?: Omit<{
+        containerId?: string | undefined;
+        enabled?: boolean | undefined;
+        height?: number | undefined;
+    } | undefined, "containerId"> | undefined;
     googlePayContainerRef?: HTMLDivElement | undefined;
     applePayContainerRef?: HTMLDivElement | undefined;
     paypalContainerRef?: HTMLDivElement | undefined;
     pixContainerRef?: HTMLDivElement | undefined;
     bizumContainerRef?: HTMLDivElement | undefined;
+    blikContainerRef?: HTMLDivElement | undefined;
+    mbwayContainerRef?: HTMLDivElement | undefined;
     onReadyPaymentInstance?: ((paymentInstance: ClientSdkInstance) => void) | undefined;
     onPaymentDetails?: ((e: PaymentDetailsMessage) => void) | undefined;
     onMounted?: ((e: MountedMessage) => void) | undefined;

package/dist/constants/index.d.ts

@@ -4,4 +4,6 @@ declare const APPLE_PAY_BUTTON_CONTAINER_ID: string;
 declare const PAYPAL_BUTTON_CONTAINER_ID: string;
 declare const PIX_BUTTON_CONTAINER_ID: string;
 declare const BIZUM_BUTTON_CONTAINER_ID: string;
-export { IFRAME_CONTAINER_ID, GOOGLE_PAY_BUTTON_CONTAINER_ID, APPLE_PAY_BUTTON_CONTAINER_ID, PAYPAL_BUTTON_CONTAINER_ID, PIX_BUTTON_CONTAINER_ID, BIZUM_BUTTON_CONTAINER_ID };
+declare const BLIK_BUTTON_CONTAINER_ID: string;
+declare const MBWAY_BUTTON_CONTAINER_ID: string;
+export { IFRAME_CONTAINER_ID, GOOGLE_PAY_BUTTON_CONTAINER_ID, APPLE_PAY_BUTTON_CONTAINER_ID, PAYPAL_BUTTON_CONTAINER_ID, PIX_BUTTON_CONTAINER_ID, BIZUM_BUTTON_CONTAINER_ID, BLIK_BUTTON_CONTAINER_ID, MBWAY_BUTTON_CONTAINER_ID };

package/dist/index.css

@@ -1 +1 @@
-.payment-form-container[data-v-728c7d1e] iframe,.payment-form-container[data-v-77b30339] iframe{border:none}
+.payment-form-container[data-v-757b2e2e] iframe,.payment-form-container[data-v-77b30339] iframe{border:none}

package/dist/index.es.js

@@ -5,6 +5,8 @@ const APPLE_PAY_BUTTON_CONTAINER_ID = `apple-pay-button-container_#${Math.random
 const PAYPAL_BUTTON_CONTAINER_ID = `paypal-button-container_#${Math.random() * 1e4}`;
 const PIX_BUTTON_CONTAINER_ID = `pix-button-container_#${Math.random() * 1e4}`;
 const BIZUM_BUTTON_CONTAINER_ID = `bizum-button-container_#${Math.random() * 1e4}`;
+const BLIK_BUTTON_CONTAINER_ID = `blik-button-container_#${Math.random() * 1e4}`;
+const MBWAY_BUTTON_CONTAINER_ID = `mbway-button-container_#${Math.random() * 1e4}`;
 var MessageType;
 (function(MessageType2) {
   MessageType2["Mounted"] = "mounted";
@@ -85,6 +87,8 @@ var PayableEntity;
   PayableEntity2["Paypal"] = "paypal";
   PayableEntity2["Pix"] = "pix";
   PayableEntity2["Bizum"] = "bizum";
+  PayableEntity2["Blik"] = "blik";
+  PayableEntity2["Mbway"] = "mbway";
 })(PayableEntity || (PayableEntity = {}));
 var PayableEntity$1 = PayableEntity;
 var InteractionType;
@@ -234,6 +238,14 @@ const payButtonIds = {
   bizumButtonParams: {
     title: "Bizum",
     id: BIZUM_BUTTON_CONTAINER_ID
+  },
+  blikButtonParams: {
+    title: "Blik",
+    id: BLIK_BUTTON_CONTAINER_ID
+  },
+  mbwayButtonParams: {
+    title: "MBWay",
+    id: MBWAY_BUTTON_CONTAINER_ID
   }
 };
 function getPayButtonParams(config, key, container) {
@@ -267,7 +279,9 @@ const initPaymentForm = async (props) => {
     applePayContainerRef,
     paypalContainerRef,
     pixContainerRef,
-    bizumContainerRef
+    bizumContainerRef,
+    blikContainerRef,
+    mbwayContainerRef
   } = props;
   if (!merchantData) {
     throw new Error("Attribute 'merchantData' is required");
@@ -325,6 +339,22 @@ const initPaymentForm = async (props) => {
   if (bizumButtonParams) {
     initConfig.bizumButtonParams = bizumButtonParams;
   }
+  const blikButtonParams = getPayButtonParams(
+    props,
+    "blikButtonParams",
+    blikContainerRef
+  );
+  if (blikButtonParams) {
+    initConfig.blikButtonParams = blikButtonParams;
+  }
+  const mbwayButtonParams = getPayButtonParams(
+    props,
+    "mbwayButtonParams",
+    mbwayContainerRef
+  );
+  if (mbwayButtonParams) {
+    initConfig.mbwayButtonParams = mbwayButtonParams;
+  }
   return clientSdk.init(initConfig);
 };
 const onSubscribe = (sdkInstanceValue, callbacks) => {
@@ -399,11 +429,15 @@ const _sfc_main$1 = defineComponent({
     paypalButtonParams: {},
     pixButtonParams: {},
     bizumButtonParams: {},
+    blikButtonParams: {},
+    mbwayButtonParams: {},
     googlePayContainerRef: {},
     applePayContainerRef: {},
     paypalContainerRef: {},
     pixContainerRef: {},
     bizumContainerRef: {},
+    blikContainerRef: {},
+    mbwayContainerRef: {},
     onReadyPaymentInstance: {},
     onPaymentDetails: { type: Function, default: () => {
     } },
@@ -446,11 +480,15 @@ const _sfc_main$1 = defineComponent({
       paypalButtonParams: props.paypalButtonParams,
       pixButtonParams: props.pixButtonParams,
       bizumButtonParams: props.bizumButtonParams,
+      blikButtonParams: props.blikButtonParams,
+      mbwayButtonParams: props.mbwayButtonParams,
       googlePayContainerRef: props.googlePayContainerRef,
       applePayContainerRef: props.applePayContainerRef,
       paypalContainerRef: props.paypalContainerRef,
       pixContainerRef: props.pixContainerRef,
-      bizumContainerRef: props.bizumContainerRef
+      bizumContainerRef: props.bizumContainerRef,
+      blikContainerRef: props.blikContainerRef,
+      mbwayContainerRef: props.mbwayContainerRef
     };
     const callbacks = {
       onMounted: (e) => props.onMounted && props.onMounted(e),
@@ -495,7 +533,7 @@ const _sfc_main$1 = defineComponent({
     };
   }
 });
-var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-728c7d1e"]]);
+var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-757b2e2e"]]);
 const initResignForm = async (config) => {
   if (!config.resignRequest) {
     throw new Error("Attribute 'resignRequest' is required");

package/dist/interfaces/PaymentProps.d.ts

@@ -10,11 +10,15 @@ interface PaymentProps extends Partial<ClientSdkEventsProvider> {
     paypalButtonParams?: Omit<InitConfig['paypalButtonParams'], 'containerId'>;
     pixButtonParams?: Omit<InitConfig['pixButtonParams'], 'containerId'>;
     bizumButtonParams?: Omit<InitConfig['bizumButtonParams'], 'containerId'>;
+    blikButtonParams?: Omit<InitConfig['blikButtonParams'], 'containerId'>;
+    mbwayButtonParams?: Omit<InitConfig['mbwayButtonParams'], 'containerId'>;
     googlePayContainerRef?: HTMLDivElement;
     applePayContainerRef?: HTMLDivElement;
     paypalContainerRef?: HTMLDivElement;
     pixContainerRef?: HTMLDivElement;
     bizumContainerRef?: HTMLDivElement;
+    blikContainerRef?: HTMLDivElement;
+    mbwayContainerRef?: 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' | 'paypalButtonParams' | 'pixButtonParams' | 'bizumButtonParams'>(config: InitConfig, key: T, container: HTMLElement | undefined): NonNullable<InitConfig[T]> | undefined;
+declare function getPayButtonParams<T extends 'googlePayButtonParams' | 'applePayButtonParams' | 'paypalButtonParams' | 'pixButtonParams' | 'bizumButtonParams' | 'blikButtonParams' | 'mbwayButtonParams'>(config: InitConfig, key: T, container: HTMLElement | undefined): NonNullable<InitConfig[T]> | undefined;
 export default getPayButtonParams;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidgate/vue-sdk",
-  "version": "1.24.0",
+  "version": "1.26.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.24.0"
+    "@solidgate/client-sdk-loader": "^1.26.0"
   },
   "devDependencies": {
     "@babel/types": "^7.24.5",
@@ -51,4 +51,4 @@
     "vue": "^3.2.25",
     "vue-tsc": "^1.5.1"
   }
-}
+}