Saved cards

Let signed-in customers save cards for future checkouts and manage the cards they have saved. First, complete the installation.

Card details are entered in Tiquo's secure Stripe form inside an iframe on book.tiquo.app, so card numbers never touch your website. Your page 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.

Embed code

The quickest way to add either embed, with or without the Hosted Package: in the Tiquo dashboard, open Settings > Website SDK > Saved cards embed code, copy the code for the card form or the saved-card manager, and paste it into your page, just like a booking flow embed.

Each embed has two formats:

• Embed Code: a small script that adds the iframe and resizes it to its content.
• iFrame Embed Code: a plain <iframe> with a fixed height, for site builders that only accept iframes.

<!-- Tiquo Card Form Embed -->
<div class="tiquo-widget">
  <div class="tiquo-widget-fallback">
    <p><a href="https://book.tiquo.app/embed/payment-methods/YOUR_PUBLIC_KEY/add" target="_blank" rel="noopener noreferrer">Add a card</a></p>
  </div>
  <script src="https://book.tiquo.app/js/widget.js" data-url="https://book.tiquo.app/embed/payment-methods/YOUR_PUBLIC_KEY/add" data-title="Tiquo card form"></script>
</div>
<!-- End of Tiquo Card Form Embed -->

Without a Tiquo package on the page, customers sign in with an email code inside the embed. When the Hosted Package or DOM Package is installed, a signed-in customer is signed in automatically, and the page receives the events.

The sections below describe the Hosted Package's own elements, which also refresh your saved-card lists automatically.

Choose an embed

Add the card form

Place the element where the form should appear:

<div data-tiquo-embed="card-form"></div>

After a card is saved, the form confirms it and offers Add another card.

Add the saved-card manager

<div data-tiquo-embed="payment-methods"></div>

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

Element options

Both embeds resize to their content automatically.

Sign-in

A customer signed in through the Hosted Package is handed into the embed automatically, without putting tokens in the iframe URL. The website's domain must be one of your website domains in Settings > Website SDK. A visitor who is not signed in gets an email sign-in code inside the embed.

Render saved cards in your own design

Use data-tiquo-payment-methods for the collection wrapper. The first data-tiquo-payment-method-item child is the template Tiquo clones for each saved method.

<ul data-tiquo-payment-methods data-tiquo-limit="10">
  <li data-tiquo-payment-method-item>
    <span data-tiquo-payment-method="title"></span>
    <span data-tiquo-payment-method="subtitle"></span>
    <span
      data-tiquo-payment-method="defaultLabel"
      data-tiquo-hide-empty
    ></span>
    <button data-tiquo-payment-method-action="make-default">Make default</button>
    <button
      data-tiquo-payment-method-action="remove"
      data-tiquo-confirm="Remove this card?"
    >Remove</button>
  </li>

  <li data-tiquo-empty>No saved cards yet.</li>
</ul>

Use the list for showing and removing cards, and an embed for adding them. The list refreshes automatically when an embed on the same page saves, removes or changes a card.

Payment method fields:

Actions:

Add data-tiquo-confirm="..." to an action to ask the visitor to confirm first. While an action runs, its button is disabled and has aria-busy="true".

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 removal fails and tiquo:payment-method-error is dispatched with the reason.
• Changing the default does not move active memberships. They keep the method they already use.

Events

These events bubble to document. Embed events are dispatched on the iframe; list action events on the button.

document.addEventListener("tiquo:payment-method-saved", function (event) {
  var card = event.detail.paymentMethod;
  console.log("Saved", card.brand, card.last4);
});

JavaScript API

Inside window.Tiquo.ready():

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

<script>
  window.Tiquo.ready(function (tiquo) {
    tiquo.embedCardForm("#card-form", {
      setAsDefault: true,
      onSaved: function (card) {
        console.log("Saved", card.id);
      },
    });
  });
</script>

A plain <iframe src="https://book.tiquo.app/embed/payment-methods/YOUR_PUBLIC_KEY"> (add /add for the card form) also works. The Hosted Package hands the signed-in customer into it and dispatches the same events.

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