@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 +46 -0
- package/dist/Payment.vue.d.ts +8 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +12 -2
- package/dist/interfaces/PaymentProps.d.ts +2 -1
- package/dist/types/ClientSdkEventsProvider.d.ts +2 -1
- package/dist/utils/onSubscribe.d.ts +5 -2
- package/package.json +2 -2
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.
|
package/dist/Payment.vue.d.ts
CHANGED
|
@@ -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-
|
|
1
|
+
.payment-form-container[data-v-4eef598f] iframe,.payment-form-container[data-v-77b30339] iframe{border:none}
|
package/dist/index.d.ts
CHANGED
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-
|
|
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
|
|
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.
|
|
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.
|
|
31
|
+
"@solidgate/client-sdk-loader": "^1.35.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@babel/types": "^7.24.5",
|