@solidgate/vue-sdk 1.5.2 → 1.6.0

package/README.md

@@ -11,6 +11,9 @@ npm i @solidagate/vue-sdk
 ``` 
 
 ## Usage
+
+### Payment form
+
 Render a payment component in your vue3 project
 
 Component inputs and outputs are described in the docs 
@@ -60,6 +63,29 @@ const merchantData: InitConfig['merchantData'] = {
 </script>
 ```
 
+### Resign form
+
+Render a resign component in your vue3 project
+
+Component inputs and outputs are described in the docs
+https://docs.solidgate.com/payments/integrate/payment-form/resign-payment-form/
+
+```vue
+<template>
+  <Resign :resign-request="resignRequest" />
+</template>
+
+<script lang="ts" setup>
+import { Resign, ResignRequest } from '@solidgate/vue-sdk'
+
+const resignRequest: ResignRequest = {
+  merchant: '<<--YOUR MERCHANT ID-->>',
+  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
+  resignIntent: '<<--YOUR RESIGN INTENT-->>'
+}
+</script>
+```
+
 ## Development server (Vue3 + Typescript + Vite)
 
 1. cd vue-sdk

package/dist/solid-payment.es.js

@@ -1976,6 +1976,7 @@ var PayableEntity$1;
   PayableEntity2["ApplePay"] = "applebtn";
   PayableEntity2["GooglePay"] = "googlebtn";
   PayableEntity2["Form"] = "form";
+  PayableEntity2["Resign"] = "resign";
 })(PayableEntity$1 || (PayableEntity$1 = {}));
 PayableEntity$2.default = PayableEntity$1;
 var InteractionType$2 = {};
@@ -2156,7 +2157,7 @@ function getPayButtonParams(config, key, container) {
     return payParams;
   }
 }
-const initClientSdk = async (props) => {
+const initPaymentForm = async (props) => {
   const {
     merchantData,
     width,
@@ -2196,32 +2197,52 @@ const initClientSdk = async (props) => {
   }
   return clientSdk.init(initConfig);
 };
-const onSubscribe = (sdkInstanceValue, props) => {
-  sdkInstanceValue.on(MessageType.Mounted, (e) => props.onMounted(e.data));
-  sdkInstanceValue.on(MessageType.Success, (e) => props.onSuccess(e.data));
-  sdkInstanceValue.on(MessageType.Error, (e) => props.onError(e.data));
-  sdkInstanceValue.on(MessageType.Fail, (e) => props.onFail(e.data));
-  sdkInstanceValue.on(MessageType.Submit, (e) => props.onSubmit(e.data));
-  sdkInstanceValue.on(MessageType.Verify, (e) => props.onVerify(e.data));
+const onSubscribe = (sdkInstanceValue, callbacks) => {
+  const {
+    onMounted: onMounted2 = () => {
+    },
+    onError = () => {
+    },
+    onSuccess = () => {
+    },
+    onFail = () => {
+    },
+    onSubmit = () => {
+    },
+    onVerify = () => {
+    },
+    onCustomStylesAppended = () => {
+    },
+    onFormRedirect = () => {
+    },
+    onInteraction = () => {
+    },
+    onOrderStatus = () => {
+    },
+    onResize = () => {
+    },
+    onCard = () => {
+    }
+  } = callbacks;
+  sdkInstanceValue.on(MessageType.Mounted, (e) => onMounted2(e.data));
+  sdkInstanceValue.on(MessageType.Success, (e) => onSuccess(e.data));
+  sdkInstanceValue.on(MessageType.Error, (e) => onError(e.data));
+  sdkInstanceValue.on(MessageType.Fail, (e) => onFail(e.data));
+  sdkInstanceValue.on(MessageType.Submit, (e) => onSubmit(e.data));
+  sdkInstanceValue.on(MessageType.Verify, (e) => onVerify(e.data));
   sdkInstanceValue.on(
     MessageType.CustomStylesAppended,
-    (e) => props.onCustomStylesAppended(e.data)
-  );
-  sdkInstanceValue.on(MessageType.Redirect, (e) => props.onFormRedirect(e.data));
-  sdkInstanceValue.on(
-    MessageType.Interaction,
-    (e) => props.onInteraction(e.data)
+    (e) => onCustomStylesAppended(e.data)
   );
-  sdkInstanceValue.on(
-    MessageType.OrderStatus,
-    (e) => props.onOrderStatus(e.data)
-  );
-  sdkInstanceValue.on(MessageType.Resize, (e) => props.onResize(e.data));
-  sdkInstanceValue.on(MessageType.Card, (e) => props.onCard(e.data));
+  sdkInstanceValue.on(MessageType.Redirect, (e) => onFormRedirect(e.data));
+  sdkInstanceValue.on(MessageType.Interaction, (e) => onInteraction(e.data));
+  sdkInstanceValue.on(MessageType.OrderStatus, (e) => onOrderStatus(e.data));
+  sdkInstanceValue.on(MessageType.Resize, (e) => onResize(e.data));
+  sdkInstanceValue.on(MessageType.Card, (e) => onCard(e.data));
 };
 const sdkInitType = "vue";
 window.__SOLIDGATE_PRIVATE__SDK_INIT_TYPE = sdkInitType;
-const _sfc_main = defineComponent({
+const _sfc_main$1 = defineComponent({
   __name: "Payment",
   props: {
     merchantData: {},
@@ -2293,7 +2314,7 @@ const _sfc_main = defineComponent({
     };
     onMounted(async () => {
       var _a2;
-      sdkInstance.value = await initClientSdk(config);
+      sdkInstance.value = await initPaymentForm(config);
       if (sdkInstance.value) {
         onSubscribe(sdkInstance.value, callbacks);
         (_a2 = props.onReadyPaymentInstance) == null ? void 0 : _a2.call(props, sdkInstance.value);
@@ -2308,7 +2329,7 @@ const _sfc_main = defineComponent({
         (value) => isReactive(value) ? value : () => value
       ),
       async () => {
-        sdkInstance.value = await initClientSdk(config);
+        sdkInstance.value = await initPaymentForm(config);
       }
     );
     return (_ctx, _cache) => {
@@ -2321,4 +2342,113 @@ const _sfc_main = defineComponent({
     };
   }
 });
-export { AdditionalFieldName, CardBrand, FieldName, FormButtonType, FormType, InteractionTargetType, InteractionType, MessageType, PayableEntity, SdkLoader, SecureBrand, _sfc_main as default };
+const initResignForm = async (config) => {
+  if (!config.resignRequest) {
+    throw new Error("Attribute 'resignRequest' is required");
+  }
+  const clientSdk = await SdkLoader.load();
+  const { appearance, styles, container } = config;
+  const formConfig = {
+    container: {
+      ...container,
+      id: IFRAME_CONTAINER_ID
+    }
+  };
+  if (appearance) {
+    formConfig.appearance = appearance;
+  }
+  if (styles) {
+    formConfig.styles = styles;
+  }
+  return clientSdk.resign(config.resignRequest, formConfig);
+};
+const _sfc_main = defineComponent({
+  __name: "Resign",
+  props: {
+    resignRequest: {},
+    container: {},
+    appearance: {},
+    styles: {},
+    onReadyResignInstance: {},
+    onMounted: { type: Function, default: () => {
+    } },
+    onError: { type: Function, default: () => {
+    } },
+    onSuccess: { type: Function, default: () => {
+    } },
+    onFail: { type: Function, default: () => {
+    } },
+    onSubmit: { type: Function, default: () => {
+    } },
+    onVerify: { type: Function, default: () => {
+    } },
+    onCustomStylesAppended: { type: Function, default: () => {
+    } },
+    onFormRedirect: { type: Function, default: () => {
+    } },
+    onInteraction: { type: Function, default: () => {
+    } },
+    onOrderStatus: { type: Function, default: () => {
+    } },
+    onResize: { type: Function, default: () => {
+    } }
+  },
+  emits: ["mounted", "error", "success", "fail", "submit", "verify", "customStylesAppended", "formRedirect", "interaction", "orderStatus", "resize", "readyResignInstance"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const StyledResign = styled.div`
+  iframe {
+    border: none;
+  }
+`;
+    const sdkInstance = ref();
+    const resignConfig = {
+      resignRequest: props.resignRequest,
+      container: props.container,
+      appearance: props.appearance,
+      styles: props.styles
+    };
+    const callbacks = {
+      onMounted: (e) => props.onMounted && props.onMounted(e),
+      onError: (e) => props.onError && props.onError(e),
+      onSuccess: (e) => props.onSuccess && props.onSuccess(e),
+      onFail: (e) => props.onFail && props.onFail(e),
+      onSubmit: (e) => props.onSubmit && props.onSubmit(e),
+      onVerify: (e) => props.onVerify && props.onVerify(e),
+      onCustomStylesAppended: (e) => props.onCustomStylesAppended && props.onCustomStylesAppended(e),
+      onFormRedirect: (e) => props.onFormRedirect && props.onFormRedirect(e),
+      onInteraction: (e) => props.onInteraction && props.onInteraction(e),
+      onOrderStatus: (e) => props.onOrderStatus && props.onOrderStatus(e),
+      onResize: (e) => props.onResize && props.onResize(e)
+    };
+    onMounted(async () => {
+      var _a2;
+      sdkInstance.value = await initResignForm(resignConfig);
+      if (sdkInstance.value) {
+        onSubscribe(sdkInstance.value, callbacks);
+        (_a2 = props.onReadyResignInstance) == null ? void 0 : _a2.call(props, sdkInstance.value);
+      }
+    });
+    onUnmounted(() => {
+      var _a2;
+      (_a2 = sdkInstance == null ? void 0 : sdkInstance.value) == null ? void 0 : _a2.destroy();
+    });
+    watch(
+      Object.values(resignConfig).map(
+        (value) => isReactive(value) ? value : () => value
+      ),
+      async () => {
+        sdkInstance.value = await initResignForm(resignConfig);
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ThemeProvider), { theme: {} }, {
+        default: withCtx(() => [
+          createVNode(StyledResign, { id: unref(IFRAME_CONTAINER_ID) }, null, 8, ["id"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export { AdditionalFieldName, CardBrand, FieldName, FormButtonType, FormType, InteractionTargetType, InteractionType, MessageType, PayableEntity, _sfc_main as Resign, SdkLoader, SecureBrand, _sfc_main$1 as default };

package/package.json

@@ -10,7 +10,7 @@
       "import": "./dist/solid-payment.es.js"
     }
   },
-  "version": "1.5.2",
+  "version": "1.6.0",
   "typings": "./dist/lib/index.d.ts",
   "license": "Apache-2.0",
   "scripts": {
@@ -25,7 +25,7 @@
     "vue": "^3.2.25"
   },
   "dependencies": {
-    "@solidgate/client-sdk-loader": "^1.6.0",
+    "@solidgate/client-sdk-loader": "^1.7.0",
     "vue3-styled-components": "^1.2.1"
   },
   "devDependencies": {
@@ -40,11 +40,11 @@
     "eslint-plugin-vue": "^8.4.1",
     "husky": "^7.0.4",
     "lint-staged": "^11.2.6",
+    "path": "^0.12.7",
     "prettier": "^2.5.1",
     "typescript": "5.0.4",
     "vite": "^2.8.0",
-    "vue-tsc": "^0.29.8",
-    "path": "^0.12.7",
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-tsc": "^0.29.8"
   }
 }