@solidgate/vue-sdk 1.34.0 → 1.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -110,6 +110,52 @@ To render <a href="https://docs.solidgate.com/payments/integrate/payment-form/go
110
110
  </script>
111
111
  ```
112
112
 
113
+ #### Wallet card type
114
+
115
+ Apple Pay and Google Pay report the payer's card funding type before the charge. Handle
116
+ `walletCardType` to inspect it and, optionally, pause the wallet flow with `pauseUntil`
117
+ while you call an update intent method (`update`, `updateCheckout`). The side effect has
118
+ a 25 s budget, measured from the moment the event fired.
119
+
120
+ ```vue
121
+ <template>
122
+ <Payment
123
+ :merchant-data="merchantData"
124
+ :google-pay-button-params="googlePayButtonParams"
125
+ :on-wallet-card-type="onWalletCardType"
126
+ @ready-payment-instance="form = $event"
127
+ />
128
+ </template>
129
+
130
+ <script lang="ts" setup>
131
+ import { ref } from 'vue'
132
+ import Payment, {
133
+ ClientSdkInstance,
134
+ InitConfig,
135
+ WalletCardTypeCallback
136
+ } from '@solidgate/vue-sdk'
137
+
138
+ const form = ref<ClientSdkInstance>()
139
+
140
+ // required when you update the intent inside the event
141
+ const googlePayButtonParams: InitConfig['googlePayButtonParams'] = {
142
+ totalPriceStatus: 'TOTAL_PRICE_STATUS_ESTIMATED'
143
+ }
144
+
145
+ const onWalletCardType: WalletCardTypeCallback = (data, pauseUntil) => {
146
+ if (data.card.type === 'unknown') {
147
+ return // no intent update - the wallet continues immediately
148
+ }
149
+
150
+ pauseUntil(async () => {
151
+ await form.value?.update({ partialIntent: intentFor(data.card.type) })
152
+ })
153
+ }
154
+ </script>
155
+ ```
156
+
157
+ `@wallet-card-type="onWalletCardType"` binds the same prop, so either style works.
158
+
113
159
  ### Resign form
114
160
 
115
161
  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.
@@ -1,5 +1,6 @@
1
1
  /** __vue_virtual_code_placeholder */
2
2
  import { CustomStylesAppendedMessage, PaymentDetailsMessage, OrderStatusMessage, InteractionMessage, RedirectMessage, MountedMessage, SuccessMessage, ResizeMessage, VerifyMessage, SubmitMessage, ErrorMessage, FailMessage, CardMessage, ClientSdkInstance } from '@solidgate/client-sdk-loader';
3
+ import { WalletCardTypeCallback } from './types/ClientSdkEventsProvider';
3
4
  import './boot';
4
5
  declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
5
6
  merchantData: {
@@ -45,6 +46,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
45
46
  containerId: string;
46
47
  color: string;
47
48
  type: string;
49
+ totalPriceStatus: "TOTAL_PRICE_STATUS_FINAL" | "TOTAL_PRICE_STATUS_ESTIMATED";
48
50
  }> | undefined, "containerId"> | undefined;
49
51
  applePayButtonParams?: Omit<Partial<{
50
52
  enabled: boolean;
@@ -138,6 +140,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
138
140
  onOrderStatus?: ((e: OrderStatusMessage) => void) | undefined;
139
141
  onResize?: ((e: ResizeMessage) => void) | undefined;
140
142
  onCard?: ((e: CardMessage) => void) | undefined;
143
+ onWalletCardType?: WalletCardTypeCallback | undefined;
141
144
  }>, {
142
145
  onMounted: () => void;
143
146
  onError: () => void;
@@ -152,6 +155,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
152
155
  onOrderStatus: () => void;
153
156
  onResize: () => void;
154
157
  onCard: () => void;
158
+ onWalletCardType: () => void;
155
159
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
156
160
  mounted: (event: MountedMessage) => void;
157
161
  error: (payload: ErrorMessage) => void;
@@ -211,6 +215,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
211
215
  containerId: string;
212
216
  color: string;
213
217
  type: string;
218
+ totalPriceStatus: "TOTAL_PRICE_STATUS_FINAL" | "TOTAL_PRICE_STATUS_ESTIMATED";
214
219
  }> | undefined, "containerId"> | undefined;
215
220
  applePayButtonParams?: Omit<Partial<{
216
221
  enabled: boolean;
@@ -304,6 +309,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
304
309
  onOrderStatus?: ((e: OrderStatusMessage) => void) | undefined;
305
310
  onResize?: ((e: ResizeMessage) => void) | undefined;
306
311
  onCard?: ((e: CardMessage) => void) | undefined;
312
+ onWalletCardType?: WalletCardTypeCallback | undefined;
307
313
  }>, {
308
314
  onMounted: () => void;
309
315
  onError: () => void;
@@ -318,6 +324,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
318
324
  onOrderStatus: () => void;
319
325
  onResize: () => void;
320
326
  onCard: () => void;
327
+ onWalletCardType: () => void;
321
328
  }>>> & {
322
329
  onError?: ((payload: ErrorMessage) => any) | undefined;
323
330
  onSubmit?: ((payload: SubmitMessage) => any) | undefined;
@@ -347,6 +354,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
347
354
  onCustomStylesAppended: (e: CustomStylesAppendedMessage) => void;
348
355
  onCard: (e: CardMessage) => void;
349
356
  onPaymentDetails: (e: PaymentDetailsMessage) => void;
357
+ onWalletCardType: WalletCardTypeCallback;
350
358
  }, {}>;
351
359
  export default _default;
352
360
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .payment-form-container[data-v-5dc2e41f] iframe,.payment-form-container[data-v-77b30339] iframe{border:none}
1
+ .payment-form-container[data-v-4eef598f] iframe,.payment-form-container[data-v-77b30339] iframe{border:none}
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import Payment from './Payment.vue';
2
2
  export * from '@solidgate/client-sdk-loader';
3
+ export type { WalletCardTypeCallback } from './types/ClientSdkEventsProvider';
3
4
  export default Payment;
4
5
  export { default as Resign } from './Resign.vue';
package/dist/index.es.js CHANGED
@@ -421,6 +421,7 @@ const initPaymentForm = async (props) => {
421
421
  }
422
422
  return clientSdk.init(initConfig);
423
423
  };
424
+ const WALLET_CARD_TYPE_EVENT = "walletCardType";
424
425
  const onSubscribe = (sdkInstanceValue, callbacks) => {
425
426
  const {
426
427
  onMounted: onMounted2 = () => {
@@ -448,6 +449,8 @@ const onSubscribe = (sdkInstanceValue, callbacks) => {
448
449
  onResize = () => {
449
450
  },
450
451
  onCard = () => {
452
+ },
453
+ onWalletCardType = () => {
451
454
  }
452
455
  } = callbacks;
453
456
  sdkInstanceValue.on(MessageType$1.Mounted, (e) => onMounted2(e.data));
@@ -469,6 +472,10 @@ const onSubscribe = (sdkInstanceValue, callbacks) => {
469
472
  sdkInstanceValue.on(MessageType$1.OrderStatus, (e) => onOrderStatus(e.data));
470
473
  sdkInstanceValue.on(MessageType$1.Resize, (e) => onResize(e.data));
471
474
  sdkInstanceValue.on(MessageType$1.Card, (e) => onCard(e.data));
475
+ sdkInstanceValue.on(
476
+ WALLET_CARD_TYPE_EVENT,
477
+ (event, pauseUntil) => onWalletCardType(event.data, pauseUntil)
478
+ );
472
479
  };
473
480
  const sdkInitType = "vue";
474
481
  window.__SOLIDGATE_PRIVATE__SDK_INIT_TYPE = sdkInitType;
@@ -537,6 +544,8 @@ const _sfc_main$1 = defineComponent({
537
544
  onResize: { type: Function, default: () => {
538
545
  } },
539
546
  onCard: { type: Function, default: () => {
547
+ } },
548
+ onWalletCardType: { default: () => {
540
549
  } }
541
550
  },
542
551
  emits: ["mounted", "error", "success", "fail", "submit", "verify", "customStylesAppended", "paymentDetails", "formRedirect", "interaction", "orderStatus", "resize", "card", "readyPaymentInstance"],
@@ -585,7 +594,8 @@ const _sfc_main$1 = defineComponent({
585
594
  onInteraction: (e) => props.onInteraction && props.onInteraction(e),
586
595
  onOrderStatus: (e) => props.onOrderStatus && props.onOrderStatus(e),
587
596
  onResize: (e) => props.onResize && props.onResize(e),
588
- onCard: (e) => props.onCard && props.onCard(e)
597
+ onCard: (e) => props.onCard && props.onCard(e),
598
+ onWalletCardType: (data, pauseUntil) => props.onWalletCardType && props.onWalletCardType(data, pauseUntil)
589
599
  };
590
600
  onMounted(async () => {
591
601
  var _a2;
@@ -615,7 +625,7 @@ const _sfc_main$1 = defineComponent({
615
625
  };
616
626
  }
617
627
  });
618
- var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-5dc2e41f"]]);
628
+ var Payment = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4eef598f"]]);
619
629
  const initResignForm = async (config) => {
620
630
  if (!config.resignRequest) {
621
631
  throw new Error("Attribute 'resignRequest' is required");
@@ -1,5 +1,5 @@
1
1
  import { ClientSdkInstance, InitConfig } from '@solidgate/client-sdk-loader';
2
- import ClientSdkEventsProvider from '../types/ClientSdkEventsProvider';
2
+ import ClientSdkEventsProvider, { WalletCardTypeCallback } from '../types/ClientSdkEventsProvider';
3
3
  interface PaymentProps extends Partial<ClientSdkEventsProvider> {
4
4
  merchantData: InitConfig['merchantData'];
5
5
  width?: string;
@@ -28,6 +28,7 @@ interface PaymentProps extends Partial<ClientSdkEventsProvider> {
28
28
  pixQrContainerRef?: HTMLDivElement;
29
29
  cashAppContainerRef?: HTMLDivElement;
30
30
  pixAutomaticoContainerRef?: HTMLDivElement;
31
+ onWalletCardType?: WalletCardTypeCallback;
31
32
  onReadyPaymentInstance?: (paymentInstance: ClientSdkInstance) => void;
32
33
  }
33
34
  export default PaymentProps;
@@ -1,5 +1,6 @@
1
- import { SdkMessage } from '@solidgate/client-sdk-loader';
1
+ import { SdkMessage, WalletCardTypeEventData, WalletCardTypeSideEffect } from '@solidgate/client-sdk-loader';
2
2
  type ClientSdkEventsProvider = {
3
3
  [key in keyof SdkMessage as `on${Capitalize<key>}`]: (e: SdkMessage[key]) => void;
4
4
  };
5
+ export type WalletCardTypeCallback = (data: WalletCardTypeEventData, pauseUntil: (sideEffect: WalletCardTypeSideEffect) => void) => void;
5
6
  export default ClientSdkEventsProvider;
@@ -1,4 +1,7 @@
1
1
  import { ClientSdkInstance } from '@solidgate/client-sdk-loader';
2
- import ClientSdkEventsProvider from '../types/ClientSdkEventsProvider';
3
- declare const onSubscribe: (sdkInstanceValue: ClientSdkInstance, callbacks: Partial<ClientSdkEventsProvider>) => void;
2
+ import ClientSdkEventsProvider, { WalletCardTypeCallback } from '../types/ClientSdkEventsProvider';
3
+ export declare const WALLET_CARD_TYPE_EVENT = "walletCardType";
4
+ declare const onSubscribe: (sdkInstanceValue: ClientSdkInstance, callbacks: Partial<ClientSdkEventsProvider> & {
5
+ onWalletCardType?: WalletCardTypeCallback;
6
+ }) => void;
4
7
  export default onSubscribe;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solidgate/vue-sdk",
3
- "version": "1.34.0",
3
+ "version": "1.35.0",
4
4
  "repository": "https://github.com/solidgate-tech/vue-sdk",
5
5
  "files": [
6
6
  "dist"
@@ -28,7 +28,7 @@
28
28
  "vue": "^3.2.25"
29
29
  },
30
30
  "dependencies": {
31
- "@solidgate/client-sdk-loader": "^1.34.0"
31
+ "@solidgate/client-sdk-loader": "^1.35.0"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@babel/types": "^7.24.5",