Custom Template Change

Optimise your players' checkout flow when using Tebex Checkout

When using Tebex Checkout, your customers will use a streamlined, centralised checkout flow. In order to ensure that your customers don't have to enter duplicate information or complete unnecessary steps, we recommend updating any custom templates to remove some legacy checkout fields.

We recommend taking a backup of your custom template before making any changes, as you may need to revert these changes if you opt-out of checkout or encounter any difficulties.

When using Tebex checkout, there is no need to ask the customer to select a payment method or provide their name or other details, as this is all collected during the checkout flow.

As such, the entire existing checkout <form> on both checkout.html and subscribe.html can be replaced with a much shorter form:

<div class="card py-5 px-4 rounded-0 border-top text-center">
<h2 class="mb-3">{{ __("Proceed to checkout") }}</h2>
<div class="row justify-content-center">
<div class="col-12 col-lg-8">
<form method="post" action="/checkout/pay" class="gateway">
<button type="submit" class="btn btn-primary btn-lg btn-block" id="purchase-button" data-loading-text="{{ __("Loading, please wait...") }}">
{{ __("Proceed to checkout") }}
</button>
<p class="mb-0 text-center mt-3"><small>{{ __("You will be redirected to our payment gateway to complete your purchase") }}</small></p>
</form>
</div>
</div>
</div>

Depending on your existing template, the form to be replaced will look something like:

<form method="post" action="{% if basket.price > 0 %}/checkout/pay{% else %}/checkout/free{% endif %}" {% if basket.price> 0 %}class="gateway"{% endif %}>
{% if checkout.gateways|length > 0 and basket.price > 0 %}
<div>
<h4 class="mb-3">{{ __("Payment method") }}</h4>
<!-- SNIP -->
<!-- Privacy Form -->
<div class="mt-5">{{ privacyForm|raw }}</div>
<!-- End Privacy Form -->
</div>
{% else %}
<p>{{ __("You need to setup a :gateway in your control panel before players can donate.",
{"gateway": '<a href="http://server.buycraft.net/gateways" target="_blank">payment gateway</a>'})|raw
}}</p>
{% endif %}
</div>
<!-- End Place Order -->
</form>

This is based on the new (Abstract/Premium) templates from Tebex. You may need to update the classes or styles to match your own store themes.