@solidgate/vue-sdk 1.34.0 → 1.36.0

package/README.md

@@ -110,6 +110,95 @@ To render <a href="https://docs.solidgate.com/payments/integrate/payment-form/go
 </script>
 ```
 
+#### Wallet card type
+
+Apple Pay and Google Pay report the payer's card funding type before the charge. Handle
+`walletCardType` to inspect it and, optionally, pause the wallet flow with `pauseUntil`
+while you call an update intent method (`update`, `updateCheckout`). The side effect has
+a 25 s budget, measured from the moment the event fired.
+
+```vue
+<template>
+  <Payment
+    :merchant-data="merchantData"
+    :google-pay-button-params="googlePayButtonParams"
+    :on-wallet-card-type="onWalletCardType"
+    @ready-payment-instance="form = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Payment, {
+  ClientSdkInstance,
+  InitConfig,
+  WalletCardTypeCallback
+} from '@solidgate/vue-sdk'
+
+const form = ref<ClientSdkInstance>()
+
+// required when you update the intent inside the event
+const googlePayButtonParams: InitConfig['googlePayButtonParams'] = {
+  totalPriceStatus: 'TOTAL_PRICE_STATUS_ESTIMATED'
+}
+
+const onWalletCardType: WalletCardTypeCallback = (data, pauseUntil) => {
+  if (data.card.type === 'unknown') {
+    return // no intent update - the wallet continues immediately
+  }
+
+  pauseUntil(async () => {
+    await form.value?.update({ partialIntent: intentFor(data.card.type) })
+  })
+}
+</script>
+```
+
+`@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,6 @@
 /** __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<{
     merchantData: {
@@ -45,6 +46,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         containerId: string;
         color: string;
         type: string;
+        totalPriceStatus: "TOTAL_PRICE_STATUS_FINAL" | "TOTAL_PRICE_STATUS_ESTIMATED";
     }> | undefined, "containerId"> | undefined;
     applePayButtonParams?: Omit<Partial<{
         enabled: boolean;
@@ -138,6 +140,8 @@ 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;
     onError: () => void;
@@ -152,6 +156,8 @@ 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;
     error: (payload: ErrorMessage) => void;
@@ -166,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: {
@@ -211,6 +218,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         containerId: string;
         color: string;
         type: string;
+        totalPriceStatus: "TOTAL_PRICE_STATUS_FINAL" | "TOTAL_PRICE_STATUS_ESTIMATED";
     }> | undefined, "containerId"> | undefined;
     applePayButtonParams?: Omit<Partial<{
         enabled: boolean;
@@ -304,6 +312,8 @@ 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;
     onError: () => void;
@@ -318,6 +328,8 @@ 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;
     onSubmit?: ((payload: SubmitMessage) => any) | undefined;
@@ -332,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;
@@ -347,6 +360,8 @@ 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;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/index.css

@@ -1 +1 @@
-.payment-form-container[data-v-5dc2e41f] 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.d.ts

@@ -1,4 +1,5 @@
 import Payment from './Payment.vue';
 export * from '@solidgate/client-sdk-loader';
+export type { WalletCardTypeCallback } from './types/ClientSdkEventsProvider';
 export default Payment;
 export { default as Resign } from './Resign.vue';

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;
@@ -421,6 +422,7 @@ const initPaymentForm = async (props) => {
   }
   return clientSdk.init(initConfig);
 };
+const WALLET_CARD_TYPE_EVENT = "walletCardType";
 const onSubscribe = (sdkInstanceValue, callbacks) => {
   const {
     onMounted: onMounted2 = () => {
@@ -448,6 +450,10 @@ const onSubscribe = (sdkInstanceValue, callbacks) => {
     onResize = () => {
     },
     onCard = () => {
+    },
+    onInvoicePreview = () => {
+    },
+    onWalletCardType = () => {
     }
   } = callbacks;
   sdkInstanceValue.on(MessageType$1.Mounted, (e) => onMounted2(e.data));
@@ -469,6 +475,14 @@ 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)
+  );
 };
 const sdkInitType = "vue";
 window.__SOLIDGATE_PRIVATE__SDK_INIT_TYPE = sdkInitType;
@@ -537,9 +551,13 @@ const _sfc_main$1 = defineComponent({
     onResize: { type: Function, default: () => {
     } },
     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();
@@ -585,7 +603,9 @@ const _sfc_main$1 = defineComponent({
       onInteraction: (e) => props.onInteraction && props.onInteraction(e),
       onOrderStatus: (e) => props.onOrderStatus && props.onOrderStatus(e),
       onResize: (e) => props.onResize && props.onResize(e),
-      onCard: (e) => props.onCard && props.onCard(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 () => {
       var _a2;
@@ -615,7 +635,7 @@ const _sfc_main$1 = defineComponent({
     };
   }
 });
-var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-5dc2e41f"]]);
+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");
@@ -736,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/PaymentProps.d.ts

@@ -1,5 +1,5 @@
 import { ClientSdkInstance, InitConfig } from '@solidgate/client-sdk-loader';
-import ClientSdkEventsProvider from '../types/ClientSdkEventsProvider';
+import ClientSdkEventsProvider, { WalletCardTypeCallback } from '../types/ClientSdkEventsProvider';
 interface PaymentProps extends Partial<ClientSdkEventsProvider> {
     merchantData: InitConfig['merchantData'];
     width?: string;
@@ -28,6 +28,7 @@ interface PaymentProps extends Partial<ClientSdkEventsProvider> {
     pixQrContainerRef?: HTMLDivElement;
     cashAppContainerRef?: HTMLDivElement;
     pixAutomaticoContainerRef?: HTMLDivElement;
+    onWalletCardType?: WalletCardTypeCallback;
     onReadyPaymentInstance?: (paymentInstance: ClientSdkInstance) => void;
 }
 export default PaymentProps;

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/dist/types/ClientSdkEventsProvider.d.ts

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

package/dist/utils/onSubscribe.d.ts

@@ -1,4 +1,7 @@
 import { ClientSdkInstance } from '@solidgate/client-sdk-loader';
-import ClientSdkEventsProvider from '../types/ClientSdkEventsProvider';
-declare const onSubscribe: (sdkInstanceValue: ClientSdkInstance, callbacks: Partial<ClientSdkEventsProvider>) => void;
+import ClientSdkEventsProvider, { WalletCardTypeCallback } from '../types/ClientSdkEventsProvider';
+export declare const WALLET_CARD_TYPE_EVENT = "walletCardType";
+declare const onSubscribe: (sdkInstanceValue: ClientSdkInstance, callbacks: Partial<ClientSdkEventsProvider> & {
+    onWalletCardType?: WalletCardTypeCallback;
+}) => void;
 export default onSubscribe;

package/package.json

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