@solidgate/vue-sdk 1.35.0 → 1.36.0

package/README.md

@@ -156,6 +156,49 @@ const onWalletCardType: WalletCardTypeCallback = (data, pauseUntil) => {
 
 `@wallet-card-type="onWalletCardType"` binds the same prop, so either style works.
 
+#### Checkout updates
+
+Change the checkout line items, discounts or subscription data after the form is mounted
+with `updateCheckout`.
+
+The invoice preview itself arrives through the `invoicePreview` event. It is sent by the
+SDK during the form initialization process.
+
+```vue
+<template>
+  <Payment
+    :merchant-data="merchantData"
+    @invoice-preview="onInvoicePreview"
+    @ready-payment-instance="form = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Payment, {
+  ClientSdkInstance,
+  InvoicePreviewMessage,
+  UpdateCheckoutConfig
+} from '@solidgate/vue-sdk'
+
+const form = ref<ClientSdkInstance>()
+
+const onInvoicePreview = (e: InvoicePreviewMessage) => {
+  console.log(e.invoicePreview.total, e.invoicePreview.currency)
+}
+
+const changeQuantity = async (quantity: number) => {
+  const config: UpdateCheckoutConfig = {
+    lineItems: [{ productPriceId: 'price_id', quantity }]
+  }
+
+  await form.value!.updateCheckout(config)
+}
+</script>
+```
+
+`:on-invoice-preview="onInvoicePreview"` binds the same prop, so either style works.
+
 ### Resign form
 
 Render a <a href="https://docs.solidgate.com/payments/integrate/payment-form/resign-payment-form/" target="_blank">resign payment form</a> component in your Vue3 project.

package/dist/Payment.vue.d.ts

@@ -1,5 +1,5 @@
 /** __vue_virtual_code_placeholder */
-import { CustomStylesAppendedMessage, PaymentDetailsMessage, OrderStatusMessage, InteractionMessage, RedirectMessage, MountedMessage, SuccessMessage, ResizeMessage, VerifyMessage, SubmitMessage, ErrorMessage, FailMessage, CardMessage, ClientSdkInstance } from '@solidgate/client-sdk-loader';
+import { CustomStylesAppendedMessage, PaymentDetailsMessage, OrderStatusMessage, InteractionMessage, RedirectMessage, MountedMessage, SuccessMessage, ResizeMessage, VerifyMessage, SubmitMessage, ErrorMessage, FailMessage, CardMessage, InvoicePreviewMessage, ClientSdkInstance } from '@solidgate/client-sdk-loader';
 import { WalletCardTypeCallback } from './types/ClientSdkEventsProvider';
 import './boot';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -140,6 +140,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onOrderStatus?: ((e: OrderStatusMessage) => void) | undefined;
     onResize?: ((e: ResizeMessage) => void) | undefined;
     onCard?: ((e: CardMessage) => void) | undefined;
+    onInvoicePreview?: ((e: InvoicePreviewMessage) => void) | undefined;
     onWalletCardType?: WalletCardTypeCallback | undefined;
 }>, {
     onMounted: () => void;
@@ -155,6 +156,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onOrderStatus: () => void;
     onResize: () => void;
     onCard: () => void;
+    onInvoicePreview: () => void;
     onWalletCardType: () => void;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     mounted: (event: MountedMessage) => void;
@@ -170,6 +172,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     orderStatus: (payload: OrderStatusMessage) => void;
     resize: (payload: ResizeMessage) => void;
     card: (payload: CardMessage) => void;
+    invoicePreview: (payload: InvoicePreviewMessage) => void;
     readyPaymentInstance: (payload: ClientSdkInstance) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     merchantData: {
@@ -309,6 +312,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onOrderStatus?: ((e: OrderStatusMessage) => void) | undefined;
     onResize?: ((e: ResizeMessage) => void) | undefined;
     onCard?: ((e: CardMessage) => void) | undefined;
+    onInvoicePreview?: ((e: InvoicePreviewMessage) => void) | undefined;
     onWalletCardType?: WalletCardTypeCallback | undefined;
 }>, {
     onMounted: () => void;
@@ -324,6 +328,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onOrderStatus: () => void;
     onResize: () => void;
     onCard: () => void;
+    onInvoicePreview: () => void;
     onWalletCardType: () => void;
 }>>> & {
     onError?: ((payload: ErrorMessage) => any) | undefined;
@@ -339,6 +344,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onCustomStylesAppended?: ((payload: CustomStylesAppendedMessage) => any) | undefined;
     onCard?: ((payload: CardMessage) => any) | undefined;
     onPaymentDetails?: ((payload: PaymentDetailsMessage) => any) | undefined;
+    onInvoicePreview?: ((payload: InvoicePreviewMessage) => any) | undefined;
     onReadyPaymentInstance?: ((payload: ClientSdkInstance) => any) | undefined;
 }, {
     onError: (e: ErrorMessage) => void;
@@ -354,6 +360,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onCustomStylesAppended: (e: CustomStylesAppendedMessage) => void;
     onCard: (e: CardMessage) => void;
     onPaymentDetails: (e: PaymentDetailsMessage) => void;
+    onInvoicePreview: (e: InvoicePreviewMessage) => void;
     onWalletCardType: WalletCardTypeCallback;
 }, {}>;
 export default _default;

package/dist/index.css

@@ -1 +1 @@
-.payment-form-container[data-v-4eef598f] iframe,.payment-form-container[data-v-77b30339] iframe{border:none}
+.payment-form-container[data-v-0ee8f352] iframe,.payment-form-container[data-v-0726288b] iframe{border:none}

package/dist/index.es.js

@@ -26,6 +26,7 @@ var MessageType;
   MessageType2["CustomStylesAppended"] = "customStylesAppended";
   MessageType2["Card"] = "card";
   MessageType2["PaymentDetails"] = "paymentDetails";
+  MessageType2["InvoicePreview"] = "invoicePreview";
 })(MessageType || (MessageType = {}));
 var MessageType$1 = MessageType;
 var FieldName;
@@ -450,6 +451,8 @@ const onSubscribe = (sdkInstanceValue, callbacks) => {
     },
     onCard = () => {
     },
+    onInvoicePreview = () => {
+    },
     onWalletCardType = () => {
     }
   } = callbacks;
@@ -472,6 +475,10 @@ const onSubscribe = (sdkInstanceValue, callbacks) => {
   sdkInstanceValue.on(MessageType$1.OrderStatus, (e) => onOrderStatus(e.data));
   sdkInstanceValue.on(MessageType$1.Resize, (e) => onResize(e.data));
   sdkInstanceValue.on(MessageType$1.Card, (e) => onCard(e.data));
+  sdkInstanceValue.on(
+    MessageType$1.InvoicePreview,
+    (e) => onInvoicePreview(e.data)
+  );
   sdkInstanceValue.on(
     WALLET_CARD_TYPE_EVENT,
     (event, pauseUntil) => onWalletCardType(event.data, pauseUntil)
@@ -545,10 +552,12 @@ const _sfc_main$1 = defineComponent({
     } },
     onCard: { type: Function, default: () => {
     } },
+    onInvoicePreview: { type: Function, default: () => {
+    } },
     onWalletCardType: { default: () => {
     } }
   },
-  emits: ["mounted", "error", "success", "fail", "submit", "verify", "customStylesAppended", "paymentDetails", "formRedirect", "interaction", "orderStatus", "resize", "card", "readyPaymentInstance"],
+  emits: ["mounted", "error", "success", "fail", "submit", "verify", "customStylesAppended", "paymentDetails", "formRedirect", "interaction", "orderStatus", "resize", "card", "invoicePreview", "readyPaymentInstance"],
   setup(__props, { emit }) {
     const props = __props;
     const sdkInstance = ref();
@@ -595,6 +604,7 @@ const _sfc_main$1 = defineComponent({
       onOrderStatus: (e) => props.onOrderStatus && props.onOrderStatus(e),
       onResize: (e) => props.onResize && props.onResize(e),
       onCard: (e) => props.onCard && props.onCard(e),
+      onInvoicePreview: (e) => props.onInvoicePreview && props.onInvoicePreview(e),
       onWalletCardType: (data, pauseUntil) => props.onWalletCardType && props.onWalletCardType(data, pauseUntil)
     };
     onMounted(async () => {
@@ -625,7 +635,7 @@ const _sfc_main$1 = defineComponent({
     };
   }
 });
-var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4eef598f"]]);
+var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-0ee8f352"]]);
 const initResignForm = async (config) => {
   if (!config.resignRequest) {
     throw new Error("Attribute 'resignRequest' is required");
@@ -746,5 +756,5 @@ const _sfc_main = defineComponent({
     };
   }
 });
-var Resign = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-77b30339"]]);
+var Resign = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0726288b"]]);
 export { AdditionalFieldName$1 as AdditionalFieldName, CardBrand$1 as CardBrand, CardBrandIconStyle$1 as CardBrandIconStyle, FieldName$1 as FieldName, FormButtonType$1 as FormButtonType, FormType$1 as FormType, InteractionTargetType$1 as InteractionTargetType, InteractionType$1 as InteractionType, MessageType$1 as MessageType, PayableEntity$1 as PayableEntity, Resign, SdkLoader, SecureBrand$1 as SecureBrand, Payment as default };

package/dist/interfaces/ResignProps.d.ts

@@ -1,6 +1,6 @@
 import { ClientSdkInstance, ResignFormConfig, ResignRequest } from '@solidgate/client-sdk-loader';
 import ClientSdkEventsProvider from '../types/ClientSdkEventsProvider';
-interface ResignProps extends Partial<Omit<ClientSdkEventsProvider, 'onCard'>> {
+interface ResignProps extends Partial<Omit<ClientSdkEventsProvider, 'onCard' | 'onInvoicePreview'>> {
     resignRequest: ResignRequest;
     container?: ResignFormConfig['container'];
     appearance?: ResignFormConfig['appearance'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidgate/vue-sdk",
-  "version": "1.35.0",
+  "version": "1.36.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.35.0"
+    "@solidgate/client-sdk-loader": "^1.36.0"
   },
   "devDependencies": {
     "@babel/types": "^7.24.5",