vue3-stripe-kit
Version:
Complete Vue 3 Stripe integration with Payment Elements, Checkout, Subscriptions. TypeScript support, composables, components, modular architecture for payments, billing, and e-commerce
384 lines (380 loc) • 17.2 kB
JavaScript
import { defineComponent, ref, computed, onMounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, unref, normalizeClass, toDisplayString, withDirectives, Fragment, renderList, vModelSelect, vModelText, createTextVNode, withModifiers } from 'vue';
import { u as useWebhooks } from './useWebhooks-CEsHK4en.mjs';
import { _ as _export_sfc } from './_plugin-vue_export-helper-pcqpp-6-.mjs';
const _hoisted_1 = { class: "webhook-monitor" };
const _hoisted_2 = { class: "webhook-header" };
const _hoisted_3 = { class: "webhook-controls" };
const _hoisted_4 = ["disabled"];
const _hoisted_5 = ["disabled"];
const _hoisted_6 = { class: "webhook-stats" };
const _hoisted_7 = { class: "stat-card" };
const _hoisted_8 = { class: "stat-number" };
const _hoisted_9 = { class: "stat-card success" };
const _hoisted_10 = { class: "stat-number" };
const _hoisted_11 = { class: "stat-card error" };
const _hoisted_12 = { class: "stat-number" };
const _hoisted_13 = { class: "stat-card" };
const _hoisted_14 = { class: "stat-number" };
const _hoisted_15 = { class: "webhook-filters" };
const _hoisted_16 = ["value"];
const _hoisted_17 = {
key: 0,
class: "error-message"
};
const _hoisted_18 = {
key: 1,
class: "loading"
};
const _hoisted_19 = { class: "webhook-events" };
const _hoisted_20 = ["onClick"];
const _hoisted_21 = { class: "event-header" };
const _hoisted_22 = { class: "event-type" };
const _hoisted_23 = { class: "event-time" };
const _hoisted_24 = { class: "event-id" };
const _hoisted_25 = {
key: 0,
class: "pending-webhooks"
};
const _hoisted_26 = { class: "event-modal-content" };
const _hoisted_27 = { class: "event-modal-header" };
const _hoisted_28 = { class: "event-modal-body" };
const _hoisted_29 = { class: "event-detail-section" };
const _hoisted_30 = { class: "event-details" };
const _hoisted_31 = { class: "event-detail-section" };
const _hoisted_32 = { class: "event-data" };
const _hoisted_33 = {
key: 0,
class: "event-detail-section"
};
const _hoisted_34 = { class: "event-data" };
const _hoisted_35 = {
key: 3,
class: "testing-panel"
};
const _hoisted_36 = { class: "testing-controls" };
const _hoisted_37 = ["value"];
const _hoisted_38 = ["disabled"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "StripeWebhookMonitor",
props: {
config: {},
maxEvents: { default: 100 },
autoStart: { type: Boolean, default: false },
showTesting: { type: Boolean, default: true }
},
setup(__props) {
const props = __props;
const {
loading,
error,
events,
stats,
isMonitoring,
startMonitoring,
stopMonitoring,
fetchEvents,
clearEvents,
exportEvents,
simulateEvent,
registerEventHandler
} = useWebhooks(props.config);
const selectedEvent = ref(null);
const selectedEventType = ref("");
const searchTerm = ref("");
const showTestingPanel = ref(props.showTesting);
const testEventType = ref("");
const customTestData = ref("");
const eventTypes = [
"customer.created",
"customer.updated",
"customer.deleted",
"customer.subscription.created",
"customer.subscription.updated",
"customer.subscription.deleted",
"customer.subscription.trial_will_end",
"invoice.created",
"invoice.finalized",
"invoice.payment_succeeded",
"invoice.payment_failed",
"payment_intent.created",
"payment_intent.succeeded",
"checkout.session.completed",
"checkout.session.expired"
];
const filteredEvents = computed(() => {
let filtered = events.value;
if (selectedEventType.value) {
filtered = filtered.filter((event) => event.type === selectedEventType.value);
}
if (searchTerm.value) {
const search = searchTerm.value.toLowerCase();
filtered = filtered.filter(
(event) => event.id.toLowerCase().includes(search) || event.type.toLowerCase().includes(search)
);
}
return filtered.slice(0, props.maxEvents);
});
const refreshEvents = async () => {
await fetchEvents(props.maxEvents);
};
const selectEvent = (event) => {
selectedEvent.value = event;
};
const closeEventModal = () => {
selectedEvent.value = null;
};
const getEventTypeClass = (eventType) => {
if (eventType.includes("failed") || eventType.includes("expired")) return "error";
if (eventType.includes("succeeded") || eventType.includes("completed")) return "success";
if (eventType.includes("trial") || eventType.includes("created")) return "info";
return "default";
};
const formatDate = (timestamp) => {
if (!timestamp) return "Never";
return new Date(timestamp * 1e3).toLocaleString();
};
const exportData = (format) => {
const data = exportEvents(format);
const blob = new Blob([data], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `webhook-events.${format}`;
a.click();
URL.revokeObjectURL(url);
};
const simulateTestEvent = async () => {
if (!testEventType.value) return;
let testData = void 0;
if (customTestData.value) {
try {
testData = JSON.parse(customTestData.value);
} catch (error2) {
console.error("Invalid JSON in test data:", error2);
return;
}
}
await simulateEvent(testEventType.value, testData);
};
const simulateSelectedEvent = async () => {
if (!selectedEvent.value) return;
await simulateEvent(selectedEvent.value.type, selectedEvent.value.data.object);
closeEventModal();
};
const copyEventData = () => {
if (!selectedEvent.value) return;
navigator.clipboard.writeText(JSON.stringify(selectedEvent.value, null, 2));
};
const setupDefaultHandlers = () => {
registerEventHandler({
eventType: "customer.subscription.created",
handler: (event) => {
console.log("🎉 New subscription created:", event.data.object.id);
},
description: "Log new subscription creations"
});
registerEventHandler({
eventType: "invoice.payment_failed",
handler: (event) => {
console.log("❌ Payment failed:", event.data.object.id);
},
description: "Log payment failures"
});
};
onMounted(() => {
setupDefaultHandlers();
refreshEvents();
if (props.autoStart) {
startMonitoring();
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
_cache[7] || (_cache[7] = createElementVNode("h3", null, "Stripe Webhook Monitor", -1)),
createElementVNode("div", _hoisted_3, [
createElementVNode("button", {
onClick: _cache[0] || (_cache[0] = ($event) => unref(isMonitoring) ? unref(stopMonitoring)() : unref(startMonitoring)()),
class: normalizeClass(["monitoring-btn", unref(isMonitoring) ? "stop" : "start"]),
disabled: unref(loading)
}, toDisplayString(unref(isMonitoring) ? "⏹️ Stop" : "▶️ Start") + " Monitoring ", 11, _hoisted_4),
createElementVNode("button", {
onClick: refreshEvents,
disabled: unref(loading),
class: "refresh-btn"
}, " 🔄 Refresh ", 8, _hoisted_5),
createElementVNode("button", {
onClick: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => unref(clearEvents) && unref(clearEvents)(...args)),
class: "clear-btn"
}, " 🗑️ Clear "),
createElementVNode("button", {
onClick: _cache[2] || (_cache[2] = ($event) => exportData("json")),
class: "export-btn"
}, " 📥 Export JSON ")
])
]),
createElementVNode("div", _hoisted_6, [
createElementVNode("div", _hoisted_7, [
createElementVNode("div", _hoisted_8, toDisplayString(unref(stats).totalEvents), 1),
_cache[8] || (_cache[8] = createElementVNode("div", { class: "stat-label" }, "Total Events", -1))
]),
createElementVNode("div", _hoisted_9, [
createElementVNode("div", _hoisted_10, toDisplayString(unref(stats).successfulEvents), 1),
_cache[9] || (_cache[9] = createElementVNode("div", { class: "stat-label" }, "Successful", -1))
]),
createElementVNode("div", _hoisted_11, [
createElementVNode("div", _hoisted_12, toDisplayString(unref(stats).failedEvents), 1),
_cache[10] || (_cache[10] = createElementVNode("div", { class: "stat-label" }, "Failed", -1))
]),
createElementVNode("div", _hoisted_13, [
createElementVNode("div", _hoisted_14, toDisplayString(formatDate(unref(stats).lastEventTime)), 1),
_cache[11] || (_cache[11] = createElementVNode("div", { class: "stat-label" }, "Last Event", -1))
])
]),
createElementVNode("div", _hoisted_15, [
withDirectives(createElementVNode("select", {
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selectedEventType.value = $event),
class: "filter-select"
}, [
_cache[12] || (_cache[12] = createElementVNode("option", { value: "" }, "All Event Types", -1)),
(openBlock(), createElementBlock(Fragment, null, renderList(eventTypes, (eventType) => {
return createElementVNode("option", {
key: eventType,
value: eventType
}, toDisplayString(eventType), 9, _hoisted_16);
}), 64))
], 512), [
[vModelSelect, selectedEventType.value]
]),
withDirectives(createElementVNode("input", {
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => searchTerm.value = $event),
type: "text",
placeholder: "Search events...",
class: "search-input"
}, null, 512), [
[vModelText, searchTerm.value]
])
]),
unref(error) ? (openBlock(), createElementBlock("div", _hoisted_17, [
_cache[13] || (_cache[13] = createElementVNode("strong", null, "Error:", -1)),
createTextVNode(" " + toDisplayString(unref(error).message), 1)
])) : createCommentVNode("", true),
unref(loading) && !unref(isMonitoring) ? (openBlock(), createElementBlock("div", _hoisted_18, " Loading webhook events... ")) : createCommentVNode("", true),
createElementVNode("div", _hoisted_19, [
(openBlock(true), createElementBlock(Fragment, null, renderList(filteredEvents.value, (event) => {
return openBlock(), createElementBlock("div", {
key: event.id,
class: normalizeClass(["event-card", getEventTypeClass(event.type)]),
onClick: ($event) => selectEvent(event)
}, [
createElementVNode("div", _hoisted_21, [
createElementVNode("span", _hoisted_22, toDisplayString(event.type), 1),
createElementVNode("span", _hoisted_23, toDisplayString(formatDate(event.created)), 1),
createElementVNode("span", {
class: normalizeClass(["event-status", event.livemode ? "live" : "test"])
}, toDisplayString(event.livemode ? "LIVE" : "TEST"), 3)
]),
createElementVNode("div", _hoisted_24, toDisplayString(event.id), 1),
event.pending_webhooks > 0 ? (openBlock(), createElementBlock("div", _hoisted_25, " ⏳ " + toDisplayString(event.pending_webhooks) + " pending ", 1)) : createCommentVNode("", true)
], 10, _hoisted_20);
}), 128))
]),
selectedEvent.value ? (openBlock(), createElementBlock("div", {
key: 2,
class: "event-modal",
onClick: withModifiers(closeEventModal, ["self"])
}, [
createElementVNode("div", _hoisted_26, [
createElementVNode("div", _hoisted_27, [
createElementVNode("h4", null, toDisplayString(selectedEvent.value.type), 1),
createElementVNode("button", {
onClick: closeEventModal,
class: "close-btn"
}, "✕")
]),
createElementVNode("div", _hoisted_28, [
createElementVNode("div", _hoisted_29, [
_cache[19] || (_cache[19] = createElementVNode("h5", null, "Event Information", -1)),
createElementVNode("div", _hoisted_30, [
createElementVNode("div", null, [
_cache[14] || (_cache[14] = createElementVNode("strong", null, "ID:", -1)),
createTextVNode(" " + toDisplayString(selectedEvent.value.id), 1)
]),
createElementVNode("div", null, [
_cache[15] || (_cache[15] = createElementVNode("strong", null, "Type:", -1)),
createTextVNode(" " + toDisplayString(selectedEvent.value.type), 1)
]),
createElementVNode("div", null, [
_cache[16] || (_cache[16] = createElementVNode("strong", null, "Created:", -1)),
createTextVNode(" " + toDisplayString(formatDate(selectedEvent.value.created)), 1)
]),
createElementVNode("div", null, [
_cache[17] || (_cache[17] = createElementVNode("strong", null, "Live Mode:", -1)),
createTextVNode(" " + toDisplayString(selectedEvent.value.livemode ? "Yes" : "No"), 1)
]),
createElementVNode("div", null, [
_cache[18] || (_cache[18] = createElementVNode("strong", null, "Pending Webhooks:", -1)),
createTextVNode(" " + toDisplayString(selectedEvent.value.pending_webhooks), 1)
])
])
]),
createElementVNode("div", _hoisted_31, [
_cache[20] || (_cache[20] = createElementVNode("h5", null, "Event Data", -1)),
createElementVNode("pre", _hoisted_32, toDisplayString(JSON.stringify(selectedEvent.value.data, null, 2)), 1)
]),
selectedEvent.value.data.previous_attributes ? (openBlock(), createElementBlock("div", _hoisted_33, [
_cache[21] || (_cache[21] = createElementVNode("h5", null, "Previous Attributes", -1)),
createElementVNode("pre", _hoisted_34, toDisplayString(JSON.stringify(selectedEvent.value.data.previous_attributes, null, 2)), 1)
])) : createCommentVNode("", true)
]),
createElementVNode("div", { class: "event-modal-actions" }, [
createElementVNode("button", {
onClick: simulateSelectedEvent,
class: "simulate-btn"
}, " 🧪 Simulate Event "),
createElementVNode("button", {
onClick: copyEventData,
class: "copy-btn"
}, " 📋 Copy Data ")
])
])
])) : createCommentVNode("", true),
showTestingPanel.value ? (openBlock(), createElementBlock("div", _hoisted_35, [
_cache[23] || (_cache[23] = createElementVNode("h4", null, "Webhook Testing", -1)),
createElementVNode("div", _hoisted_36, [
withDirectives(createElementVNode("select", {
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => testEventType.value = $event),
class: "test-select"
}, [
_cache[22] || (_cache[22] = createElementVNode("option", { value: "" }, "Select Event Type", -1)),
(openBlock(), createElementBlock(Fragment, null, renderList(eventTypes, (eventType) => {
return createElementVNode("option", {
key: eventType,
value: eventType
}, toDisplayString(eventType), 9, _hoisted_37);
}), 64))
], 512), [
[vModelSelect, testEventType.value]
]),
createElementVNode("button", {
onClick: simulateTestEvent,
disabled: !testEventType.value,
class: "test-btn"
}, " 🧪 Simulate Event ", 8, _hoisted_38)
]),
withDirectives(createElementVNode("textarea", {
"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => customTestData.value = $event),
placeholder: "Custom test data (JSON)...",
class: "test-data-input"
}, null, 512), [
[vModelText, customTestData.value]
])
])) : createCommentVNode("", true)
]);
};
}
});
const StripeWebhookMonitor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-90eafe81"]]);
export { StripeWebhookMonitor as S };
//# sourceMappingURL=StripeWebhookMonitor-C71OKIoD.mjs.map