Payment

Purpose

The Payment reusable renders the payment-method selection UI in checkout and updates the checkout state when the user selects a payment provider (and optionally installments).

Where it's rendered

From Components/Checkout/Default.liquid:

{% render 'Reusables\\Payment\\Default', payments: payments %}

The reusable is rendered only when this feature flag is enabled:

{% if GlobalData.Settings.CheckoutSettings.ShowPayment %}
  ...
{% endif %}

Inputs (Liquid render parameters)

The Payment reusable is called with a named parameter:

payments

payments comes from the checkout component model:

{% assign payments = model.payments %}

Template behavior (Liquid + Alpine)

Wrapper:

x-data="paymentreusabledefault"

data-step="payment"

The body is shown only when:

$store.checkout.canShowDetails('payment')

If there are available payments (payments.size > 0):

renders radio inputs (one per payment)

on @change it serializes the payment object and calls:

selectPayment({{ payment | serialize }}, "{{ Reusables.Payment.Translations.PaymentErrorMessage }}")

If payment.serviceAmount > 0, it renders the surcharge text (payment.serviceAmountText).

If payment.installmentsEnabled and payment.maxInstallments > 1:

renders an installments dropdown

it is shown only when:

selectedPayment === '<providerId>' && ($store.checkout.data?.totalAmount || 0) >= <minAmountForInstallments>

If payment.message exists, it is shown only for the selected provider:

x-show="selectedPayment === '<providerId>'"

If there are no payments, it renders:

{{ Reusables.Payment.Translations.NoPayments }}

Data contract (JS runtime)

`payments` items (as consumed by Liquid + JS)

The template/JS reads the following fields from each payment:

provider

providerId

name

serviceAmount

serviceAmountText

installmentsEnabled

maxInstallments

minAmountForInstallments (optional, defaults to 0 in Liquid)

message (optional)

Storefront model example (sanitized)

Example (from a real checkout model dump) keeping only the relevant fields:

{
  "pageState": null,
  "status": "Start",
  "checkout": {
    "finalPrice": 168,
    "finalPriceText": "168,00 €",
    "cartItems": [
      {
        "id": "Cart Item Id",
        "productId": "Product Id",
        "productVariantId": "Product Variant Id",
        "quantity": 1,
        "productTitle": "Sample title",
        "link": "/sample",
        "imageLink": "https://example.com/sample",
        "finalPrice": 48,
        "finalPriceText": "48,00 €",
        "originalPrice": 49,
        "originalPriceText": "49,00 €",
        "subTotalNetValue": 38.71,
        "subTotalPrice": 48,
        "subTotalVatValue": 9.29
      },
      ...
    ]
  },
  "payments": [
    {
      "provider": "COD",
      "providerId": "Payment Provider Id",
      "name": "Sample title",
      "serviceAmount": 2,
      "serviceAmountText": "2,00 €",
      "installmentsEnabled": false
    }
  ],
  "settings": {
    "id": "Component Id",
    "cssClass": ""
  },
  "translations": {
    "paymentMethod": "Sample text",
    "paymentErrorMessage": "Sample text",
    "...": "..."
  }
}

JavaScript

Global object

Global object: paymentreusabledefault

Liquid wiring:

x-data="paymentreusabledefault"

selectPayment(payment, paymentErrorMessage)

What it does

Clears the toast stack: Alpine.store("toast").removeAll()

Sets selectedPayment = payment.providerId and resets selectedInstallments

Builds the paymentData object and merges it into the checkout store data (Alpine.store("checkout").data)

Calls servicesreusabledefault.updateCheckout(updatedCheckoutData, "payment")

On failure:

shows a toast using paymentErrorMessage

does not mark the step as valid

On success:

sets Alpine.store("checkout").steps["payment"].valid = true

sends the GA event addPaymentInfo with items + payment title

Key behaviors / edge cases

If the update returns a non-2xx status or success === false, the UI treats the selection as failed.

The GA payload is built via prepareItemsForCheckoutProcess(this.checkout.cartItems).

Advice

servicesreusabledefault.updateCheckout(...) is async and can fail; the UI should remain usable.

Avoid storing sensitive payment data in client state (this object contains provider metadata only).

selectInstallments(value)

What it does

Sets selectedInstallments from the dropdown.

If checkout.payment doesn’t exist, it returns without updating.

Merges installments into checkout.payment and calls:

servicesreusabledefault.updateCheckout(updatedCheckoutData, "payment")

Key behaviors / edge cases

On error, it logs console.error(...) and does not show a toast.

Advice

If you want consistent UX error handling, you can add a toast (same approach as selectPayment).

Global Alpine stores

This reusable uses:

$store.checkout

steps['payment'].valid for the step indicator

isUpdating / isReady to disable the radios

canShowDetails('payment') to control expand/collapse of the step

data as the source of truth for the checkout payload passed into updateCheckout

$store.toast

removeAll() before the update

add(...) when payment selection fails

Services / API calls

The Payment reusable calls:

servicesreusabledefault.updateCheckout(updatedCheckoutData, "payment")

(The SDK implementation/transport is documented in NoirDocs/5. SDK/.)

Dependencies

Liquid: Reusables/Payment/Default.liquid

JS: Reusables/Payment/Default.js

Translations: Reusables/Payment/Default.json

Alpine stores: $store.checkout, $store.toast

SDK wrapper: servicesreusabledefault.updateCheckout(...)

Analytics helpers (global): prepareItemsForCheckoutProcess(...), sendGAEvent(...)

Notes

The payments parameter is effectively required: if it’s empty/undefined, the template renders the NoPayments message.

The installments UI depends on payment.installmentsEnabled, payment.maxInstallments, and $store.checkout.data.totalAmount.

The PaymentErrorMessage translation comes from Reusables/Payment/Default.json and is passed into JS as a string.

Payment

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

payments items (as consumed by Liquid + JS)#

Storefront model example (sanitized)#

JavaScript#

Global object#

selectPayment(payment, paymentErrorMessage)#

selectInstallments(value)#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#