Checkout

Documentation Index

Fetch the complete documentation index at: https://docs.elasticfunnels.io/llms.txt

Use this file to discover all available pages before exploring further.

​

Order summary: single-product vs cart

<template-if data-condition="is_single_product">
  <div class="order-summary-single">
    <img src="[[ checkout.product_image ]]" alt="[[ checkout.product_title ]]" />
    <h2>[[ checkout.product_title ]]</h2>
    <span>[[ checkout.product_price ]]</span>
    <span>[[ checkout.retail_price ]]</span>
  </div>
</template-if>
<template-else-if data-condition="is_cart">
  <template-foreach data-each="item in cartItems">
    <div class="order-summary-line">
      <img src="[[ item.image ]]" alt="[[ item.name ]]" />
      <span>[[ item.name ]]</span>
      <span>[[ item.total ]]</span>
    </div>
  </template-foreach>
</template-else-if>

<template-if data-condition="is_single_product">
  <div class="order-summary-single">
    <img ef-src="checkout.product_image" ef-alt="checkout.product_title" />
    <h2><span ef-text="checkout.product_title">Product Title</span></h2>
    <span ef-text="checkout.product_price">$0.00</span>
    <span ef-text="checkout.retail_price">$0.00</span>
  </div>
</template-if>

​

Subscription products

<template-if data-condition="checkout.is_subscription">
  <p class="billing-notice">
    You'll be billed every [[ checkout.subscription.frequency ]] [[ checkout.subscription.frequency_unit ]].
  </p>
</template-if>

<template-if data-condition="checkout.is_subscription && checkout.subscription.trial_days > 0">
  <p class="trial-notice">
    Your [[ checkout.subscription.trial_days ]]-day free trial starts today.
  </p>
</template-if>

<template-if data-condition="checkout.is_subscription && checkout.subscription.first_charge_free">
  <p class="trial-notice">First [[ checkout.subscription.frequency_unit ]] is free.</p>
</template-if>

​

Totals (display + raw)

• Subtotal row: [[ checkout.subtotal_after_discount ]]
• Total row: [[ checkout.total ]]
• Conditions: checkout.bump_total_raw > 0, checkout.tax_raw > 0, checkout.shipping_raw > 0

​

Form fields and validation

​

Binding fields

• Wrap each field in a container (e.g. .floating-label-group).
• Add <div class="form-error" data-checkout-error="<id>"></div> so the form errors adapter can show validation messages.
• Use checkout.countries and checkout.usStates for select options (each { value, label }).

​

Enforce country/state restrictions server-side

<script scope="backend">
setVariable('checkout_settings', {
  countries: ['US'],
  usStates: ['CA', 'TX', 'FL']
});
</script>

• Restricts the rendered checkout.countries / checkout.usStates lists.
• Enforces the same allowlist in process-checkout (invalid country/state returns validation errors).

<select name="shipping_country" data-template-value="checkout.customer.shipping_country">
  <option value="">Select Country</option>
  <template-foreach data-each="opt in checkout.countries">
    <option value="[[ opt.value ]]">[[ opt.label ]]</option>
  </template-foreach>
</select>

​

Shipping same as billing

• Bind the checkbox with data-template-value="checkout.shipping_same_as_billing".
• Wrap the shipping address block in <template-if data-condition="!checkout.shipping_same_as_billing">.
• Use <template-else> to show a short message when shipping equals billing.

​

Billing section visibility

​

Validation errors

• errors is an object keyed by field id: errors['email'], errors['shipping_city'], etc.
• The form errors adapter looks for [data-checkout-error="<id>"] and sets the message; it also adds .error to the input and .has-error to the wrapper.
• You can show the message in the template: [[ errors[f.id] ]] or data-ef-text="errors['email']".

​

Coupon

• Apply button: data-apply-coupon (plugin binds to validate + refresh).
• Clear button: data-clear-coupon; show when checkout.coupon.applied.
• Error block: <template-if data-condition="checkout.coupon_message"> with [[ checkout.coupon_message ]].

​

Order bumps

• Display [[ bump.price ]] and [[ line.price ]] as-is (already formatted).
• Checkbox pattern: Use data-bump-code, data-bump-checkbox, data-bump-toggle and name="bump", value="[[ bump.code ]]" so the bump plugin can toggle and style. See Cart for the full offer vs added pattern.
• Button + @click pattern: Alternatively, use <button @click="bump.added = true">…</button> for “Add to order” and <button @click="bump.added = false">…</button> for “Remove”. Mutating bump.added triggers re-render. Both checkbox + data-bump-* and button + @click are valid.

​

Payment panel

<checkout-cc-panel></checkout-cc-panel>

​

Smart field detection

• No first_name/last_name on page → shows “Cardholder Name” input
• No billing_address/shipping_address on page → shows billing details (name, country, address)

<template-if data-condition="!isFieldOnPage('checkout.customer.first_name')">
  <p>Name will be collected in the payment panel.</p>
</template-if>

​

Wallet (Apple Pay / Google Pay)

​

Scope key

<template-if data-condition="checkout.wallet_available.applePay">
  <p class="wallet-hint">You can pay instantly with Apple Pay.</p>
</template-if>
<template-if data-condition="checkout.wallet_available.googlePay">
  <p class="wallet-hint">Google Pay is available on this device.</p>
</template-if>

​

Wallet-first layout

<!-- Email + phone first -->
<section>...</section>

<!-- Payment panel early = wallet buttons appear above shipping -->
<checkout-cc-panel></checkout-cc-panel>

<!-- Shipping address below -->
<section>...</section>

<!-- Submit button -->
<button type="submit" data-checkout-submit>COMPLETE ORDER</button>

​

ef.checkout API

• ef.checkout.walletAvailable — same data as checkout.wallet_available scope key
• ef.checkout.payWithWallet(method) — triggers 'applePay' or 'googlePay' programmatically
• ef.checkout.onWalletComplete(callback) — fires after wallet payment attempt

​

Summary

• Use is_single_product / is_cart and checkout.product_* vs cartItems for order summary.
• Subscriptions: checkout.is_subscription + checkout.subscription on single-product pages (server-side, available immediately); item.is_subscription + item.subscription on cart items.
• Prefer explicit subtotal keys: checkout.subtotal_before_discount / checkout.subtotal_after_discount.
• checkout.subtotal remains as a backward-compatible alias of checkout.subtotal_after_discount.
• Use _raw keys only for conditions/math or explicit formatting with formatPrice.
• Bind fields with data-template-value, use data-checkout-error and errors for validation.
• Coupon: query.coupon, checkout.coupon, checkout.coupon_message; data-apply-coupon, data-clear-coupon.
• Bumps: checkout.bump_products, checkout.selectedBumpLines; data-bump-* attributes.
• Payment: Pattern A — <checkout-cc-panel></checkout-cc-panel> only; Pattern B — explicit gateway div with data-gateway, optional cardholder, secure-card-element.
• Wallet: checkout.wallet_available for conditional content; ef.checkout.payWithWallet() for programmatic triggers; place <checkout-cc-panel> above shipping for wallet-first layouts.