@solidgate/vue-sdk 1.0.0

package/README.md

@@ -0,0 +1,75 @@
+# Solidgate Vue3 SDK
+
+This is a wrapper for Solidgate Client SDK
+
+## Installation
+
+Run inside Vue3 project
+
+```
+npm i @solidagate/vue-sdk
+``` 
+
+## Usage
+Render a payment component in your vue3 project
+
+Component inputs and outputs are similar to described in the docs https://dev.solidgate.cm/developers/d
+```vue
+<template>
+  <Payment :merchant-data="merchantData" />
+</template>
+
+<script lang="ts" setup>
+import Payment, { InitConfig } from '@solidgate/vue-sdk'
+
+const merchantData: InitConfig['merchantData'] = {
+  merchant: '<<--YOUR MERCHANT ID-->>',
+  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
+  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
+}
+</script>
+```
+
+In order to render google/apple button in custom container define Payment as async component and pass l
+```vue
+<template>
+  <Payment
+    :merchan-data="merchantData"
+    :google-pay-container-ref="googleButton"
+    :apple-pay-container-ref="appleButton"
+  />
+  <div ref="googleButton" />
+  <div ref="appleButton" />
+</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 merchantData: InitConfig['merchantData'] = {
+  merchant: '<<--YOUR MERCHANT ID-->>',
+  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
+  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
+}
+</script>
+```
+
+## Development server (Vue3 + Typescript + Vite)
+
+1. cd vue-sdk
+2. npm i
+3. npm run start
+4. Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the 
+
+## Build
+
+1. cd vue-sdk
+2. npm run build
+3. cd dist
+4. solid-payment.es.js is a js bundle.
+
+

package/dist/lib/Payment.vue.d.ts

@@ -0,0 +1,239 @@
+import { OrderStatusMessage, InteractionMessage, MountedMessage, SuccessMessage, ResizeMessage, SubmitMessage, ErrorMessage, FailMessage, SdkMessage, MessageType } from '@solidgate/client-sdk-loader';
+declare const _default: import("vue").DefineComponent<{
+    merchantData: {
+        type: import("vue").PropType<{
+            merchant: string;
+            signature: string;
+            paymentIntent: string;
+            version?: string | undefined;
+        }>;
+        required: true;
+    };
+    width: {
+        type: import("vue").PropType<string>;
+    };
+    styles: {
+        type: import("vue").PropType<Record<string, unknown>>;
+    };
+    formParams: {
+        type: import("vue").PropType<Partial<{
+            enabled: false;
+            submitButtonText: string;
+            isCardHolderVisible: boolean;
+            headerText: string;
+            titleText: string;
+            formTypeClass: import("@solidgate/client-sdk-loader/dist/enums/FormType").default;
+            isSolidLogoVisible: boolean;
+            cardBrands: import("@solidgate/client-sdk-loader").CardBrand[];
+            secureBrands: import("@solidgate/client-sdk-loader/dist/enums/SecureBrand").default[];
+            allowSubmit: boolean;
+            allowedAdditionalFields: import("@solidgate/client-sdk-loader/dist/enums/AdditionalField").default[];
+            googleFontLink: string;
+        }>>;
+    };
+    googlePayButtonParams: {
+        type: import("vue").PropType<Omit<Partial<{
+            enabled: false;
+            containerId: string;
+            color: string;
+            type: string;
+        }> | undefined, "containerId">>;
+    };
+    applePayButtonParams: {
+        type: import("vue").PropType<Omit<Partial<{
+            enabled: false;
+            containerId: string;
+            color: string;
+            type: string;
+        }> | undefined, "containerId">>;
+    };
+    googlePayContainerRef: {
+        type: import("vue").PropType<HTMLDivElement>;
+    };
+    applePayContainerRef: {
+        type: import("vue").PropType<HTMLDivElement>;
+    };
+    onReadyPaymentInstance: {
+        type: import("vue").PropType<(paymentInstance: import("@solidgate/client-sdk-loader").ClientSdkInstance) => void>;
+    };
+    onMounted: {
+        type: import("vue").PropType<(e: MountedMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onError: {
+        type: import("vue").PropType<(e: ErrorMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onSuccess: {
+        type: import("vue").PropType<(e: SuccessMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onFail: {
+        type: import("vue").PropType<(e: FailMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onSubmit: {
+        type: import("vue").PropType<(e: SubmitMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onVerify: {
+        type: import("vue").PropType<(e: SdkMessage[MessageType.Verify]) => void>;
+    } & {
+        default: () => void;
+    };
+    onCustomStylesAppended: {
+        type: import("vue").PropType<(e: SdkMessage[MessageType.CustomStylesAppended]) => void>;
+    } & {
+        default: () => void;
+    };
+    onFormRedirect: {
+        type: import("vue").PropType<(e: SdkMessage[MessageType.Redirect]) => void>;
+    } & {
+        default: () => void;
+    };
+    onInteraction: {
+        type: import("vue").PropType<(e: InteractionMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onOrderStatus: {
+        type: import("vue").PropType<(e: OrderStatusMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onResize: {
+        type: import("vue").PropType<(e: ResizeMessage) => void>;
+    } & {
+        default: () => void;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    merchantData: {
+        type: import("vue").PropType<{
+            merchant: string;
+            signature: string;
+            paymentIntent: string;
+            version?: string | undefined;
+        }>;
+        required: true;
+    };
+    width: {
+        type: import("vue").PropType<string>;
+    };
+    styles: {
+        type: import("vue").PropType<Record<string, unknown>>;
+    };
+    formParams: {
+        type: import("vue").PropType<Partial<{
+            enabled: false;
+            submitButtonText: string;
+            isCardHolderVisible: boolean;
+            headerText: string;
+            titleText: string;
+            formTypeClass: import("@solidgate/client-sdk-loader/dist/enums/FormType").default;
+            isSolidLogoVisible: boolean;
+            cardBrands: import("@solidgate/client-sdk-loader").CardBrand[];
+            secureBrands: import("@solidgate/client-sdk-loader/dist/enums/SecureBrand").default[];
+            allowSubmit: boolean;
+            allowedAdditionalFields: import("@solidgate/client-sdk-loader/dist/enums/AdditionalField").default[];
+            googleFontLink: string;
+        }>>;
+    };
+    googlePayButtonParams: {
+        type: import("vue").PropType<Omit<Partial<{
+            enabled: false;
+            containerId: string;
+            color: string;
+            type: string;
+        }> | undefined, "containerId">>;
+    };
+    applePayButtonParams: {
+        type: import("vue").PropType<Omit<Partial<{
+            enabled: false;
+            containerId: string;
+            color: string;
+            type: string;
+        }> | undefined, "containerId">>;
+    };
+    googlePayContainerRef: {
+        type: import("vue").PropType<HTMLDivElement>;
+    };
+    applePayContainerRef: {
+        type: import("vue").PropType<HTMLDivElement>;
+    };
+    onReadyPaymentInstance: {
+        type: import("vue").PropType<(paymentInstance: import("@solidgate/client-sdk-loader").ClientSdkInstance) => void>;
+    };
+    onMounted: {
+        type: import("vue").PropType<(e: MountedMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onError: {
+        type: import("vue").PropType<(e: ErrorMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onSuccess: {
+        type: import("vue").PropType<(e: SuccessMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onFail: {
+        type: import("vue").PropType<(e: FailMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onSubmit: {
+        type: import("vue").PropType<(e: SubmitMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onVerify: {
+        type: import("vue").PropType<(e: SdkMessage[MessageType.Verify]) => void>;
+    } & {
+        default: () => void;
+    };
+    onCustomStylesAppended: {
+        type: import("vue").PropType<(e: SdkMessage[MessageType.CustomStylesAppended]) => void>;
+    } & {
+        default: () => void;
+    };
+    onFormRedirect: {
+        type: import("vue").PropType<(e: SdkMessage[MessageType.Redirect]) => void>;
+    } & {
+        default: () => void;
+    };
+    onInteraction: {
+        type: import("vue").PropType<(e: InteractionMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onOrderStatus: {
+        type: import("vue").PropType<(e: OrderStatusMessage) => void>;
+    } & {
+        default: () => void;
+    };
+    onResize: {
+        type: import("vue").PropType<(e: ResizeMessage) => void>;
+    } & {
+        default: () => void;
+    };
+}>>, {
+    onError: (e: ErrorMessage) => void;
+    onSubmit: (e: SubmitMessage) => void;
+    onFail: (e: FailMessage) => void;
+    onMounted: (e: MountedMessage) => void;
+    onOrderStatus: (e: OrderStatusMessage) => void;
+    onResize: (e: ResizeMessage) => void;
+    onSuccess: (e: SuccessMessage) => void;
+    onInteraction: (e: InteractionMessage) => void;
+    onVerify: (e: SdkMessage[MessageType.Verify]) => void;
+    onFormRedirect: (e: SdkMessage[MessageType.Redirect]) => void;
+    onCustomStylesAppended: (e: SdkMessage[MessageType.CustomStylesAppended]) => void;
+}>;
+export default _default;

package/dist/lib/constants/index.d.ts

@@ -0,0 +1,4 @@
+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 };

package/dist/lib/index.d.ts

@@ -0,0 +1,3 @@
+import Payment from './Payment.vue';
+export * from '@solidgate/client-sdk-loader';
+export default Payment;

package/dist/lib/interfaces/PaymentProps.d.ts

@@ -0,0 +1,14 @@
+import { ClientSdkInstance, InitConfig } from '@solidgate/client-sdk-loader';
+import ClientSdkEventsProvider from '../types/ClientSdkEventsProvider';
+interface PaymentProps extends Partial<ClientSdkEventsProvider> {
+    merchantData: InitConfig['merchantData'];
+    width?: string;
+    styles?: InitConfig['styles'];
+    formParams?: InitConfig['formParams'];
+    googlePayButtonParams?: Omit<InitConfig['googlePayButtonParams'], 'containerId'>;
+    applePayButtonParams?: Omit<InitConfig['applePayButtonParams'], 'containerId'>;
+    googlePayContainerRef?: HTMLDivElement;
+    applePayContainerRef?: HTMLDivElement;
+    onReadyPaymentInstance?: (paymentInstance: ClientSdkInstance) => void;
+}
+export default PaymentProps;

package/dist/lib/types/ClientSdkEventsProvider.d.ts

@@ -0,0 +1,5 @@
+import { SdkMessage } from '@solidgate/client-sdk-loader';
+declare type ClientSdkEventsProvider = {
+    [key in keyof SdkMessage as `on${Capitalize<key>}`]: (e: SdkMessage[key]) => void;
+};
+export default ClientSdkEventsProvider;

package/dist/lib/utils/getPayButtonParams.d.ts

@@ -0,0 +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;
+export default getPayButtonParams;

package/dist/lib/utils/initClientSdk.d.ts

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

package/dist/lib/utils/onSubscribe.d.ts

@@ -0,0 +1,4 @@
+import { ClientSdkInstance } from '@solidgate/client-sdk-loader';
+import ClientSdkEventsProvider from '../types/ClientSdkEventsProvider';
+declare const onSubscribe: (sdkInstanceValue: ClientSdkInstance, props: ClientSdkEventsProvider) => void;
+export default onSubscribe;