@solidgate/vue-sdk 1.33.0 → 1.35.0

package/README.md

@@ -110,6 +110,52 @@ 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.
+
 ### 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 { 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;
@@ -118,6 +120,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         resetEnabled?: boolean | undefined;
     } | undefined, "containerId"> | undefined;
     pixAutomaticoContainerRef?: HTMLDivElement | undefined;
+    clickToPayButtonParams?: {
+        enabled?: boolean | undefined;
+        height?: number | undefined;
+        saveRecognitionToken?: boolean | undefined;
+        supportedCardNetworks?: ("visa" | "mastercard" | "discover" | "amex")[] | undefined;
+    } | undefined;
     onReadyPaymentInstance?: ((paymentInstance: ClientSdkInstance) => void) | undefined;
     onPaymentDetails?: ((e: PaymentDetailsMessage) => void) | undefined;
     onMounted?: ((e: MountedMessage) => void) | undefined;
@@ -132,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;
+    onWalletCardType?: WalletCardTypeCallback | undefined;
 }>, {
     onMounted: () => void;
     onError: () => void;
@@ -146,6 +155,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onOrderStatus: () => void;
     onResize: () => void;
     onCard: () => void;
+    onWalletCardType: () => void;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     mounted: (event: MountedMessage) => void;
     error: (payload: ErrorMessage) => void;
@@ -205,6 +215,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;
@@ -278,6 +289,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         resetEnabled?: boolean | undefined;
     } | undefined, "containerId"> | undefined;
     pixAutomaticoContainerRef?: HTMLDivElement | undefined;
+    clickToPayButtonParams?: {
+        enabled?: boolean | undefined;
+        height?: number | undefined;
+        saveRecognitionToken?: boolean | undefined;
+        supportedCardNetworks?: ("visa" | "mastercard" | "discover" | "amex")[] | undefined;
+    } | undefined;
     onReadyPaymentInstance?: ((paymentInstance: ClientSdkInstance) => void) | undefined;
     onPaymentDetails?: ((e: PaymentDetailsMessage) => void) | undefined;
     onMounted?: ((e: MountedMessage) => void) | undefined;
@@ -292,6 +309,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;
+    onWalletCardType?: WalletCardTypeCallback | undefined;
 }>, {
     onMounted: () => void;
     onError: () => void;
@@ -306,6 +324,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onOrderStatus: () => void;
     onResize: () => void;
     onCard: () => void;
+    onWalletCardType: () => void;
 }>>> & {
     onError?: ((payload: ErrorMessage) => any) | undefined;
     onSubmit?: ((payload: SubmitMessage) => any) | undefined;
@@ -335,6 +354,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onCustomStylesAppended: (e: CustomStylesAppendedMessage) => void;
     onCard: (e: CardMessage) => void;
     onPaymentDetails: (e: PaymentDetailsMessage) => 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-cb1259ac] iframe,.payment-form-container[data-v-77b30339] iframe{border:none}
+.payment-form-container[data-v-4eef598f] iframe,.payment-form-container[data-v-77b30339] 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

@@ -97,6 +97,7 @@ var PayableEntity;
   PayableEntity2["Mbway"] = "mbway";
   PayableEntity2["CashApp"] = "cashapp";
   PayableEntity2["PixAutomatico"] = "pix-automatico";
+  PayableEntity2["ClickToPay"] = "clicktopay";
 })(PayableEntity || (PayableEntity = {}));
 var PayableEntity$1 = PayableEntity;
 var InteractionType;
@@ -310,7 +311,8 @@ const initPaymentForm = async (props) => {
     mbwayContainerRef,
     pixQrContainerRef,
     cashAppContainerRef,
-    pixAutomaticoContainerRef
+    pixAutomaticoContainerRef,
+    clickToPayButtonParams
   } = props;
   if (!merchantData) {
     throw new Error("Attribute 'merchantData' is required");
@@ -326,7 +328,8 @@ const initPaymentForm = async (props) => {
       ...width && { width }
     },
     ...formParams && { formParams },
-    ...styles && { styles }
+    ...styles && { styles },
+    ...clickToPayButtonParams && { clickToPayButtonParams }
   };
   const googleButtonParams = getPayButtonParams(
     props,
@@ -418,6 +421,7 @@ const initPaymentForm = async (props) => {
   }
   return clientSdk.init(initConfig);
 };
+const WALLET_CARD_TYPE_EVENT = "walletCardType";
 const onSubscribe = (sdkInstanceValue, callbacks) => {
   const {
     onMounted: onMounted2 = () => {
@@ -445,6 +449,8 @@ const onSubscribe = (sdkInstanceValue, callbacks) => {
     onResize = () => {
     },
     onCard = () => {
+    },
+    onWalletCardType = () => {
     }
   } = callbacks;
   sdkInstanceValue.on(MessageType$1.Mounted, (e) => onMounted2(e.data));
@@ -466,6 +472,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(
+    WALLET_CARD_TYPE_EVENT,
+    (event, pauseUntil) => onWalletCardType(event.data, pauseUntil)
+  );
 };
 const sdkInitType = "vue";
 window.__SOLIDGATE_PRIVATE__SDK_INIT_TYPE = sdkInitType;
@@ -507,6 +517,7 @@ const _sfc_main$1 = defineComponent({
     cashAppContainerRef: {},
     pixAutomaticoButtonParams: {},
     pixAutomaticoContainerRef: {},
+    clickToPayButtonParams: {},
     onReadyPaymentInstance: {},
     onPaymentDetails: { type: Function, default: () => {
     } },
@@ -533,6 +544,8 @@ const _sfc_main$1 = defineComponent({
     onResize: { type: Function, default: () => {
     } },
     onCard: { type: Function, default: () => {
+    } },
+    onWalletCardType: { default: () => {
     } }
   },
   emits: ["mounted", "error", "success", "fail", "submit", "verify", "customStylesAppended", "paymentDetails", "formRedirect", "interaction", "orderStatus", "resize", "card", "readyPaymentInstance"],
@@ -555,6 +568,7 @@ const _sfc_main$1 = defineComponent({
       pixQrButtonParams: props.pixQrButtonParams,
       cashAppButtonParams: props.cashAppButtonParams,
       pixAutomaticoButtonParams: props.pixAutomaticoButtonParams,
+      clickToPayButtonParams: props.clickToPayButtonParams,
       googlePayContainerRef: props.googlePayContainerRef,
       applePayContainerRef: props.applePayContainerRef,
       paypalContainerRef: props.paypalContainerRef,
@@ -580,7 +594,8 @@ 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),
+      onWalletCardType: (data, pauseUntil) => props.onWalletCardType && props.onWalletCardType(data, pauseUntil)
     };
     onMounted(async () => {
       var _a2;
@@ -610,7 +625,7 @@ const _sfc_main$1 = defineComponent({
     };
   }
 });
-var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-cb1259ac"]]);
+var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4eef598f"]]);
 const initResignForm = async (config) => {
   if (!config.resignRequest) {
     throw new Error("Attribute 'resignRequest' is required");

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;
@@ -16,6 +16,7 @@ interface PaymentProps extends Partial<ClientSdkEventsProvider> {
     pixQrButtonParams?: Omit<InitConfig['pixQrButtonParams'], 'containerId'>;
     cashAppButtonParams?: Omit<InitConfig['cashAppButtonParams'], 'containerId'>;
     pixAutomaticoButtonParams?: Omit<InitConfig['pixAutomaticoButtonParams'], 'containerId'>;
+    clickToPayButtonParams?: InitConfig['clickToPayButtonParams'];
     googlePayContainerRef?: HTMLDivElement;
     applePayContainerRef?: HTMLDivElement;
     paypalContainerRef?: HTMLDivElement;
@@ -27,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/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.33.0",
+  "version": "1.35.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.33.0"
+    "@solidgate/client-sdk-loader": "^1.35.0"
   },
   "devDependencies": {
     "@babel/types": "^7.24.5",