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
andsettings_data.json
for theme settings. - layout/: Layout files, such as
theme.liquid
andorder.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
, andorder.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 methodloading(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 />
Discount and Promo Components
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.