Checkout tag

The Checkout tag. This is the tag that is responsible for the whole checkout process.

The moulde is shipped with a ready-to-go template, however, you can still change everything to your needs.

The tag

{exp:reinos_store:checkout}

Tag Parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above

customer_phone_required

Set the customer phone as required.

customer_phone_required="false"

customer_company_required

Set the customer company name as required.

customer_company_required="false"

return_url

The return url, default to the current url. Use a url of your own site: a url of another site is not used, then the customer goes to the homepage. Available from v4.0.0

return_url=""

review_template

The review template. This is the template that will be used for the review page. This is only used when the payment gateway requires a review page. For example PayPal.

When left empty, the default review template will be used. This is reinos_store/templates/store.group/review.html. You can set your own review template by setting this param to your own template.

Available from v3.10.0

review_template=""

form_class

Set the form class

form_class=""

form_id

Set the form id

form_id=""

enable_billing_address

Control wether the billing address fields are required or not.

enable_billing_address="yes" (default)

enable_shipping_address

Control wether the shipping address fields are required or not.

enable_shipping_address="yes" (default)

default fields

For all of the input fields you can define a default value via the default_<field_name> param

default_billing_address="Your default billing_address"
default_billing_address2="Your default billing_address2"
default_billing_city="Your default billing_city"
default_billing_country="Your default billing_country"
default_billing_zip="Your default billing_zip"
default_billing_state="Your default billing_state"
default_shipping_address="Your default shipping_address"
default_shipping_address2="Your default shipping_address2"
default_shipping_city="Your default shipping_city"
default_shipping_country="Your default shipping_country"
default_shipping_state="Your default shipping_state"
default_shipping_zip="Your default shipping_zip"
default_customer_first_name="Your default customer_first_name"
default_customer_last_name="Your default customer_last_name"
default_customer_email="Your default customer_email"
default_customer_phone="Your default customer_phone"
default_customer_company="Your default customer_company"
default_customer_tax_no="Your default customer_tax_no"

payment_gateway

With this param you can set the gateway. This is more a solution if you have just one gateway. If you have multiple gatewayes you should use {exp:reinos_store:gateway_list}

payment_gateway="paypal"

Tag Variable

Below are the Tag Variables. Those Variables can be used in the tag described above

global_errors

Global errors

{global_errors}
    {global_errors:error}
{/global_errors}

But we also have them as separated error variables

{global_error:no_items_to_checkout}
{global_error:gateway_not_exists}
{global_error:no_gateway_selected}
{global_error:transaction_error}
{global_error:shipping_method_missing} // no shipping method chosen, or one that is not offered for the cart
{global_error:coupon_code} // the coupon code of the cart is not valid (anymore), e.g. a code for one user that was used for another order. The code is removed from the cart, the customer can check the order and place it again
{global_error:out_of_stock} // there is not enough stock anymore for a product in the cart (when *Check the stock* is on for its channel)

A payment error keeps the coupon code used

When the payment provider gives an error ({global_error:transaction_error}), the order is already saved and stays open, and an open order counts as a use of its coupon code. A retry with the same single-use (or per-member) code is then refused with {global_error:coupon_code}. Cancel the open order in the CP to make the code usable again.

has_global_errors

Check for global errors

{if has_global_errors}
   {global_error}
{/if}

has_field_errors

Check for field errors

{if has_field_errors}
   ...
{/if}

status

The status of the order when the customer comes back to the checkout from the payment page, e.g. cancelled, failed or expired. It comes from the status parameter in the url, only a known order status is passed, empty otherwise.

{if status == 'cancelled'}You cancelled your order{/if}
{if status == 'failed'}Your payment failed, please try again{/if}

field_name:error

Error, if there is one, per field

{customer_first_name:error}
{customer_last_name:error}
{customer_email:error}
{customer_phone:error}
{customer_company:error}
{billing_address:error}
{billing_address2:error}
{billing_zip:error}
{billing_city:error}
{billing_country:error}
{shipping_address:error}
{shipping_address2:error}
{shipping_zip:error}
{shipping_city:error}
{shipping_country:error}

{!-- for example --}
{if customer_company:error != ''}<span class="text-red">{customer_company:error}</span>{/if}

{billing_country:error} and {shipping_country:error} show Invalid Country when the country is not one of the Allowed countries of the Country settings. Available from v4.0.0

field_name:value

Values, if there is something, per field

{customer_first_name:value}
{customer_last_name:value}
{customer_email:value}
{customer_phone:value}
{customer_company:value}
{billing_address:value}
{billing_address2:value}
{billing_zip:value}
{billing_city:value}
{billing_country:value}
{shipping_address:value}
{shipping_address2:value}
{shipping_zip:value}
{shipping_city:value}
{shipping_country:value}

Steps

The example templates are using the stepping technique. Each step Personal and billing and shipping adress, Shipping and payment are a step in the order process. We enable this by adding the name name="step-1" name="step-2" or name="step-3" to the next button as you can seen in the example template

Available from v3.2.0

<button name="step-2" type="submit" class="button">Next step</button>

Custom fields

Add custom/extra fields to your checkout process.

You need to define the field names in custom_fields and in the body of {exp:reinos_store:checkout} you can add the actual HTML

{exp:reinos_store:checkout
    custom_fields="agree_with_terms|name|email"
}
    <input name="name" placeholder="custom_fields[name]" value={custom_fields:name:value} />
    <input name="email" type="custom_fields[email]" placeholder="email" value={custom_fields:email:value} />
    <input type="checkbox" name="custom_fields[agree_with_terms]" value="yes" {if '{custom_fields:agree_with_terms:value}' == 'yes'}checked{/if}/> Agree with the terms
{/exp:reinos_store:checkout}

Make them required

It is also possible to make the custom fields required by using custom_fields_required. This param accept a string, delimited by a pipeline | to set certain fields as required.

Available from v3.6.0

custom_fields_required="my_field|another_field|etc"

Required in the steps checkout

To make certain fields required when having a stepped checkout, you need to use the following param instead. Each param is set for a step to determine for which step a field is required. This wil also make sure the checkout is marking that field as required and set that step active.

{exp:reinos_store:checkout      
    custom_fields="custom_field_step_1|custom_field_step_2|custom_field_step_3"
    custom_fields_required_step_1="custom_field_step_1"
    custom_fields_required_step_2="custom_field_step_2"
    custom_fields_required_step_3="custom_field_step_3"
}

Example single page checkout

Here we make custom_field_1 and custom_field_3 required.

{exp:reinos_store:checkout      
  custom_fields="custom_field_step_1|custom_field_step_2|custom_field_step_3"
  custom_fields_required="custom_field_1|custom_field_3"
}

  <label for="custom_fields[custom_field_1]">Custom field 1</label>
  {if custom_fields:custom_field_1:error != ''}<span class="text-red">{custom_fields:custom_field_1:error}</span>{/if}
  <input type="text" class="input" id="custom_fields[custom_field_1]" name="custom_fields[custom_field_1]" value="{custom_fields:custom_field_1:value}">

  <label for="custom_fields[custom_field_1]">Custom field 2</label>
  <input type="text" class="input" id="custom_fields[custom_field_2]" name="custom_fields[custom_field_2]" value="{custom_fields:custom_field_2:value}">

  <label for="custom_fields[custom_field_3]">Custom field 3</label>
  {if custom_fields:custom_field_3:error != ''}<span class="text-red">{custom_fields:custom_field_3:error}</span>{/if}
  <input type="text" class="input" id="custom_fields[custom_field_3]" name="custom_fields[custom_field_3]" value="{custom_fields:custom_field_3:value}">


  {!-- you could also add a checkbox for agreeing with the terms of service here --}
  {!-- {if custom_fields:agree_with_terms:error != ''}<span class="text-red">{custom_fields:agree_with_terms:error}</span>{/if} --}
  {!-- <input type="checkbox" name="custom_fields[agree_with_terms]" value="yes"/>	Agree with the terms --}

  <div class="mt-8 flex justify-between">
    <a href="/index.php/reinos_store/checkout?step=2" class="button">Pervious step</a>
    <button name="step-3" type="submit" class="button">Checkout</button>
  </div>
{/exp:reinos_store:checkout}

Example Steps

Below an example in a stepped checkout

{exp:reinos_store:checkout      
  custom_fields="custom_field_step_1|custom_field_step_2|custom_field_step_3"
  custom_fields_required_step_1="custom_field_step_1"
  custom_fields_required_step_2="custom_field_step_2"
  custom_fields_required_step_3="custom_field_step_3"
}

  {if current_query_string == 'step=1' || current_query_string == ''}
    <label for="custom_fields[custom_field_step_1]">Custom field</label>
    {if custom_fields:custom_field_step_1:error != ''}<span class="text-red">{custom_fields:custom_field_step_1:error}</span>{/if}
    <input type="text" class="input" id="custom_fields[custom_field_step_1]" name="custom_fields[custom_field_step_1]" value="{custom_fields:custom_field_step_1:value}">

    <div class="mt-8 flex justify-between">
      <button name="step-1" type="submit" class="button ml-auto">Next step</button>
    </div>
  {/if}

  {if current_query_string == 'step=2'}            
    <label for="custom_fields[custom_field_step_2]">Custom field</label>
    {if custom_fields:custom_field_step_2:error != ''}<span class="text-red">{custom_fields:custom_field_step_2:error}</span>{/if}
    <input type="text" class="input" id="custom_fields[custom_field_step_2]" name="custom_fields[custom_field_step_2]" value="{custom_fields:custom_field_step_2:value}">

    <div class="mt-8 flex justify-between">
      <a href="/index.php/reinos_store/checkout?step=1" class="button">Previous step</a>
      <button name="step-2" type="submit" class="button">Next step</button>
    </div>
  {/if}

  {if current_query_string == 'step=3'}
    <label for="custom_fields[custom_field_step_3]">Custom field</label>
    {if custom_fields:custom_field_step_3:error != ''}<span class="text-red">{custom_fields:custom_field_step_3:error}</span>{/if}
    <input type="text" class="input" id="custom_fields[custom_field_step_3]" name="custom_fields[custom_field_step_3]" value="{custom_fields:custom_field_step_3:value}">

    {!-- you could also add a checkbox for agreeing with the terms of service here --}
    {!-- {if custom_fields:agree_with_terms:error != ''}<span class="text-red">{custom_fields:agree_with_terms:error}</span>{/if} --}
    {!-- <input type="checkbox" name="custom_fields[agree_with_terms]" value="yes"/>	Agree with the terms --}

    <div class="mt-8 flex justify-between">
      <a href="/index.php/reinos_store/checkout?step=2" class="button">Pervious step</a>
      <button name="step-3" type="submit" class="button">Checkout</button>
    </div>
  {/if}
{/exp:reinos_store:checkout}