Saved Cards

Let signed-in customers save cards for future checkouts and manage the cards they have saved. Requires DOM Package 1.12.0 or later.

Card details are entered in Tiquo's secure Stripe form inside an iframe on book.tiquo.app, so card numbers never touch your page or your servers. Your code only receives a saved card's display details (brand, last 4 digits, expiry) and its pm_... ID.

Saved cards are the same ones the customer sees in the customer portal and that staff see on the customer's profile. They can be used for bookings, orders and memberships.

Choose an embed

Both embeds use the organization of your public key and, unless you pass theme, its active theme.

Embed the card form

<div id="card-form"></div>

await tiquo.embedCardForm('#card-form', {
  setAsDefault: true,
  onSaved: (card) => {
    console.log('Saved', card.brand, card.last4, card.id);
  },
});

After a card is saved, the form confirms it and offers Add another card. onSaved runs once for each saved card.

Embed the saved-card manager

<div id="saved-cards"></div>

await tiquo.embedPaymentMethods('#saved-cards', {
  onSaved: (card) => refreshCheckout(),
  onRemoved: ({ paymentMethodId, replacementPaymentMethodId }) => refreshCheckout(),
  onDefaultChanged: (paymentMethodId) => refreshCheckout(),
});

The manager shows each saved card with its brand, last 4 digits, expiry and a Default badge, and adds new cards inline.

Options

Both methods accept the embed options (width, height, minHeight, autoResize, onLoad, onError) and:

Both methods return the HTMLIFrameElement. They throw TiquoAuthError with code INVALID_PUBLIC_KEY if the SDK was created with a malformed public key.

Sign-in

A customer signed in through the DOM Package is handed into the embed automatically, with the same one-time token exchange as the other embeds. The website's domain must be one of your Website Domains. A visitor who is not signed in gets an email sign-in code inside the embed.

Build your own list

Use these methods when you render saved cards yourself. Use an embed to add a card.

const { paymentMethods } = await tiquo.getPaymentMethods();

for (const method of paymentMethods) {
  console.log(method.label, method.isDefault ? '(default)' : '');
}

await tiquo.setDefaultPaymentMethod(paymentMethods[1].id);
await tiquo.removePaymentMethod(paymentMethods[0].id);

All three require a signed-in customer.

Removal and default rules

These are the same rules as the customer portal:

• The customer's last saved method cannot be removed.
• Removing a method that an active membership uses moves the membership to another saved method first. When no other method can replace it, the request fails with status 409 and a message you can show to the customer.
• Changing the default does not move active memberships. They keep the method they already use.

Payment method fields

The full card number is never returned.

Events from a plain iframe

The embed methods handle events for you. If you add the iframe yourself (https://book.tiquo.app/embed/payment-methods/PUBLIC_KEY, with /add for the card form), the SDK still hands the signed-in customer into it. To receive its events, check the sender before parsing:

import { parsePaymentMethodEmbedEvent } from '@tiquo/dom-package';

window.addEventListener('message', (event) => {
  if (event.source !== iframe.contentWindow || event.origin !== 'https://book.tiquo.app') return;
  const change = parsePaymentMethodEmbedEvent(event.data);
  if (!change) return;
  // change.type is 'saved', 'removed' or 'default-changed'
});

Errors

The same operations are available over HTTP in the Customer API: Payment Methods.