Checkout

Learn how the checkout is rendered and customized in Finqu storefronts. This guide is an overall overview of the checkout theme structure, rendering process, and available components. For more detailed information on the checkout please contact Finqu support when starting a new checkout customization.

Overview

The checkout theme in Finqu is structured similarly to the main store theme, but with some important differences. The checkout uses its own set of templates and does not support sections or blocks. Instead, all layout and content are defined directly in the Liquid templates.

Directory Structure

A typical checkout theme includes:

assets/: Stylesheets (such as main.scss.liquid), mixins, and other static files.
config/: Configuration files like settings_schema.json and settings_data.json for theme settings.
layout/: Layout files, such as theme.liquid and order.liquid, that define the overall page structure.
locales/: Translation files for different languages (e.g., en.json, fi.json, sv.json).
templates/: Page templates for the checkout flow, such as checkout.liquid, complete.liquid, download.liquid, and order.liquid.
snippets/: (Optional) Reusable Liquid code snippets.

Rendering Process

Liquid Templates: All static and dynamic content for the checkout is defined in Liquid templates. There are no sections or blocks—customization is done by editing the template files directly.
Vue.js Library: All dynamic and interactive features in the checkout are handled by a dedicated Vue.js library. This must be included in your checkout template for features like cart updates, address validation, and payment selection.

Note: The Vue library is required for the checkout to function correctly. Do not remove or modify the script tag that loads this library.

Including the Vue Library

Always include the provided Vue.js library in your checkout template, before the closing </body> tag:


<script src="https://cdn.finqu.com/lib-sdk/checkout-vue@1.3.5/vue.global.prod.js"></script>
<script src="https://cdn.finqu.com/lib-sdk/checkout-vue@1.3.5/vue-i18n.global.prod.js"></script>
<script src="https://cdn.finqu.com/lib-sdk/checkout-vue@1.3.5/components.umd.js"></script>

Customizing Checkout Styles

You can customize the appearance of the checkout by adding a checkout.scss.liquid file to your theme’s assets directory. This feature may only be available on certain plans.

Vue Library Documentation

The Vue library provides a set of components and methods to manage the checkout process. The main entry point is the Checkout class, which initializes the checkout flow and provides access to various components.

Basic Usage


const checkout = new Checkout();
 
checkout.initialize(document.querySelector("html").dataset.sessionId).then(() => {
    const app = Vue.createApp({
        inject: ["$checkout"],
        components: checkout.components(),
        // other Vue options
    });
 
    checkout.setUpApp(app);
 
    const messages = {};
    messages[checkout.store.state.order.language] = TRANSLATIONS;
 
    const i18n = VueI18n.createI18n({
        locale: checkout.store.state.order.language,
        fallbackLocale: checkout.store.state.order.language,
        messages: messages
    });
 
    app.use(i18n);
 
    app.mount("#checkout");
});

Checkout API

The main Checkout class provides the following methods:

Method	Description
`components()`	Returns all available Vue components
`dispatchEvent(event, data)`	Dispatches a custom event with optional data
`freeze()`	Sets checkout state to “updating” to prevent user interactions
`resume()`	Sets checkout state back to “ready”
`refresh()`	Refreshes checkout data from the server
`placeOrder()`	Initiates the order placement process

Available Components

Cart

Displays the cart contents including line items, gift cards, discounts, and shipping information.

Props/Slots:

Provides slot props: items, giftCards, discounts, shipping, payments


<checkout-cart v-slot="{ items, discounts, shipping, payments }">
  <!-- Custom cart rendering -->
</checkout-cart>

Payment Components

PaymentMethodSelector

Allows selection from available payment methods.

Methods:

select(paymentMethod, optionId): Select a payment method
loading(paymentMethod): Check if a payment method is in processing state


<payment-method-selector />

PaymentMethodList

Displays available payment methods.


<payment-method-list />

KustomCheckout

Integration with Kustom (previous Klarna) checkout solution.


<klarna-checkout />

User Information Components

Contact

Form for collecting and validating contact information.


<checkout-contact />

ContactInformation

Displays user’s contact information.


<contact-information />

Account

Handles user account functionality.


<checkout-account />

CodeClaim

Input for applying discount/promo codes.


<code-claim />

CouponList

Lists applied coupons/discount codes.


<coupon-list />

GiftCardList

Displays applied gift cards.


<gift-card-list />

Shipping Components

ShippingMethodSelector

Allows selection of shipping methods.


<shipping-method-selector />

Utility Components

LoadingButton

Button with loading state for asynchronous operations.


<loading-button :loading="isLoading" @click="handleAction">
  Complete Checkout
</loading-button>

Timer

Displays countdown timer for checkout session.


<checkout-timer />

AppFrame

Container for embedded applications using @finqu/app-link.


<app-frame :src="appUrl" />

Offer

Displays special offers during checkout.


<checkout-offer />

Events

The Checkout instance dispatches events that you can listen to:


window.addEventListener('Checkout.Event.OrderPlaced', (event) => {
  console.log('Order placed:', event.detail);
});

Best Practices

Use Liquid templates for all layout and content—sections and blocks are not supported.
Always include the Vue.js library for checkout functionality.
Organize your assets, templates, and configuration files logically.
Test your checkout thoroughly to ensure a seamless customer experience.
Only use checkout.scss.liquid if your plan supports checkout customization.