checkout_address

The checkout_address.twig view hosts the checkout page of your website.

On the checkout page, the customer enters their delivery and billing addresses and chooses a payment method.

Requirements

The checkout_address view must include the checkout form. It's a platform requirement that both a billing and delivery address are submitted with the checkout form, else the platform will respond with an error. The form must also include the customer's acceptance of the terms and conditions (although this field can be hidden).

A payment method must be selected by the customer, this is described in more detail below.

Marketing permission

It's a good idea to include the 'do you want to receive our newsletters' question in the checkout form so that if the customer selects 'yes' you have their permission to contact them with marketing promotions.

This is done by including a field with the name marketing within the form, e.g.

<input type="checkbox" name="marketing" value="1">

How you heard about us question

If you are using the customer sources APP you can include a 'tell us how you heard about us' question in the form.

{% if customer_sources|length %}
    {{ html.select('source', customer_sources, form_field_value('source'), '', 'Select...') }}
{% endif %}

The code shown above uses a standard HTML macro to generate the select list.

Comments

An order can be submitted with comments by including a field within the checkout form with a name of comments.

Payment methods

These are included in the checkout form. The standard implementation for payment methods is to have separate buttons for each available method.

Presently, 3 buttons are available on the checkout form (except if you are using the Amazon Payments Extension).

Payment methods are cycled with a {% for %} tag, e.g.

{% for button in checkout.buttons %}
    <button name="{{ button.name }}">
{% endfor %}

You may like to display different types of buttons for PayPal and the Offline Payment Method, in which case these can be detected with the button.name attribute, i.e. paypal_button and offline_payment_button.

The button code for the Stripe payment gateway is generated automatically by the platform. This should be created using the code {{ button.code|raw }}.

Errors & processing

Including the code {{ theme.errors(errors) }} will output any errors that the platform responds with when the checkout form is submitted.

Once submitted, the checkout form will take a few seconds to process before the customer is redirected through to your payment gateway (whilst the payment request is sent to the gateway). The processing status can be detected with the variable checkout.processing_form (which will respond true if the page is processing), e.g.

{% if checkout.processing_form %}
    <h6>Please wait...</h6>
    {# Render payment processor form #}
    {{ checkout.processing_form|raw }} 
{% else %}
    <h1>{{ breadcrumb_title }}</h1>
    {# Render errors #}
    {{ theme.errors(errors) }}
    {# Render checkout form #}
    {{ block('form') }} 
{% endif %}