Checkout and payment

"To checkout" reserves the tickets for ten minutes and leads to the checkout on your website. It works exactly like the shop: the same rules, prices, fees and emails.

The whole checkout

<ts-route match="order"><ts-checkout></ts-checkout></ts-route>

ts-checkout shows the right thing by itself: the form, then the payment, then the tickets. If the reservation has expired, it says so and leads back to the selection.

Piece by piece

If you want the form in two columns with the summary beside it, place the parts yourself. They share the entered data, so you can spread them out freely:

<ts-route match="order">
  <div class="checkout">
    <main>
      <ts-order-timer></ts-order-timer>
      <ts-buyer-form></ts-buyer-form>
      <ts-payment></ts-payment>
    </main>
    <aside>
      <ts-order-summary></ts-order-summary>
      <ts-voucher-field></ts-voucher-field>
      <ts-product-offer></ts-product-offer>
      <ts-order-actions></ts-order-actions>
    </aside>
  </div>
  <ts-order-confirmation></ts-order-confirmation>
  <ts-order-downloads></ts-order-downloads>
  <ts-order-tickets></ts-order-tickets>
</ts-route>

Each part only appears when it's its turn. ts-buyer-form disappears once payment is running, and ts-order-tickets only shows up after paying. The form can be split up too, the parts are under All blocks.

Vouchers and discount codes

• ts-code-field redeems discount codes and secret links at ticket selection. The code then sits in the address (?code=SUMMER), so you can also send links with a code.
• ts-voucher-field redeems vouchers in the checkout. They cover all or part of the amount due.
• ts-voucher-purchase sells vouchers. It only shows something if you sell vouchers in the dashboard.

Payment

Payment method	What the buyer sees
Stripe	The Payment Element right on your page, with card, Apple Pay, Google Pay and everything you've enabled at Stripe
Mollie, PayPal	Redirect to the provider, then back to your website
Bank transfer	Bank details to copy and a GiroCode
Test payment	Only until you've connected a payment account

Stripe's card fields sit in Stripe's frame. Your CSS doesn't reach them. By default the Payment Element takes the font and text colour of your page and your shop's colour. For more control, use Stripe's Appearance API:

<script>
  addEventListener("DOMContentLoaded", () => {
    TickySmart.init({
      stripeAppearance: {
        theme: "flat",
        variables: { colorPrimary: "#e8503a", borderRadius: "12px" },
      },
    });
  });
</script>

What the checkout always includes

The checkout is a sales contract, so the required information can't be left out. If you place ts-checkout-submit on the page without ts-terms or ts-withdrawal-note, it brings them along itself. Without consent, TickySmart doesn't accept an order. You can style and move the texts, but they must stay clearly visible. More under Tracking, legal and security.

Common questions

What happens if the buyer closes the tab?

The reservation expires after ten minutes and the tickets become available again. If they come back before then, they continue where they left off, because their browser remembers the order for 30 days.

Where do the links in the order email lead?

To your shop, not to your website. The buyer sees the same tickets there. That also works if you rebuild your website later.

How do I recognise orders through Elements?

The order shows Elements on your website under Sold via. In the statistics they count under Your website (widget or Elements).