Zaptime Docs

Appearance

Paid event types ​

An event type can require payment through Stripe. The remote configuration then contains stripeConfig, and the booking becomes a three-step sequence: reserve the slot, take the payment, confirm.

WARNING

Paying requires Zaptime's Stripe publishable key and Stripe Elements on your page. The key is baked into the @zaptime/vue3 bundle but is not part of @zaptime/core. If you do not have it, embed ZaptimeCalendar for paid event types and keep the headless UI for the free ones.

useStripeConfig ​

ts
import { useStripeConfig } from "@zaptime/core";

const { stripeConfig, setStripeConfig } = useStripeConfig(calendarId?);

setStripeConfig(remote.stripeConfig); // during initialization

stripeConfig.value; // { price: number; currency: string; stripeAccountId: string } | undefined

stripeConfig.value !== undefined means the event type is paid.

useBillingAddress ​

Holds the billing details collected for the payment.

ts
import { useBillingAddress } from "@zaptime/core";

const { billingAddress, updateBillingAddressField, setBillingAddress } = useBillingAddress(calendarId?);

updateBillingAddressField("country", "DE");

Payment sequence ​

  1. reserve({ ...collectFormValues(), calendarId, location }) → res.data.uuid.
  2. POST {apiBaseUrl}api/reservations/{uuid}/payments with Authorization: Bearer {token} and the billing fields (email, name, country are required) → data.clientSecret.
  3. stripe.confirmCardPayment(clientSecret, { payment_method: { card, billing_details } }), where stripe = Stripe(publishableKey, { stripeAccount: stripeConfig.stripeAccountId }).
  4. confirm({ calendarId }).

On any failure after step 1 call cancel(calendarId) to release the slot.

The labels for the billing form live in locale.confirmationForm.payments (price, cardNumber, name, email, company, address, city, zip, country, vatId, crn, showBillingDetails).