Show multiple payment options

dariodario Member
in Help edited October 2014
Hello

Is it possible to show in the checkout a list of radio buttons showing different payments such as:

* Payment on receipt of invoice
* Payment on delivery
* Payment on pickup
* Bank transfer

The idea is that if the user selects one of those it can proceed with the checkout without specifying any other payment data.

Is it possible to add custom payments without changing the checkout template? If not possible, how should I proceed to change the checkout template? I saw from the admin panel that it loads "checkout.inc.twig"; can I just customize this component or I need to write a full template, publish it and set its url in checkkout "remote template url" field?

Thanks


Comments
  • fc_adamfc_adam FoxyCart Team
    @dario,

    So this is possible - but it does require you getting your hands dirty in the checkout template. What you would need to to is utilise the purchase order payment method as a way for customers to checkout without actually paying anything at the time, and also add in the extra required fields to allow customers to choose from one of your four options.

    Which version of FoxyCart are you running for your store? That will dictate in part how you approach this.
  • Hello Adam
    I'm using FoxyCart 2.0; how can I change the checkout template "checkout.inc.twig" to show the extra payment options?
  • fc_adamfc_adam FoxyCart Team
    edited November 2014
    @dario,

    So right now there is a bit involved with this. We have a change coming in our next version that will make this considerably easier, but if you're needing to achieve this now - this is how you'd approach it:

    Firstly, if you haven't already - read over this: https://wiki.foxycart.com/v/2.0/templates/advanced. That will give you an overview of how our templates work.

    So firstly, you'll want to grab the template from the Github repository at https://github.com/FoxyCart/2.0-templates. As you'll just be editing the payments section, you can collapse the other blocks. To help you out with that, I'll whisper a link to you with a collapsed version to follow this thread.

    Within that collapsed code, you'll see the payments section towards the bottom of the template. It's within this section, that you want to make your changes.

    So one way you could approach this would be to replace the purchase order text input (and associated label) that looks like this:
    <label class="fc-container__grid--label--po fc-form-label" for="purchase_order">{{ config.lang.checkout_purchase_order_number }}</label>
    <div class="fc-container__grid--input--po">
        <input type="text"
            id="purchase_order"
            name="purchase_order"
            value="{{ purchase_order }}"
            maxlength="30"
            placeholder=""
            autocomplete="off"
            data-fc-required
            class="fc-form-control fc-form-control--po"/>
    </div>
    

    In it's place, you would instead display a group of radio inputs with a name of "purchase_order", so that form value is still submitted - but you're instead filling it with the type of offline payment the customer wants. That could look like this:
    <div class="fc-input-group-container fc-input-group-container--radio">
    <div class="row">
        <label for="payment_on_receipt">
            <input type="radio" 
                id="payment_on_receipt" 
                name="purchase_order" 
                value="Payment on receipt of invoice"
                data-fc-required
                {% if purchase_order == "Payment on receipt of invoice" %}checked{% endif %}/>
            Payment on receipt of invoice
        </label>
    </div>
    <div class="row">
        <label for="payment_on_delivery">
            <input type="radio" 
                id="payment_on_delivery" 
                name="purchase_order" 
                value="Payment on delivery"
                data-fc-required
                {% if purchase_order == "Payment on delivery" %}checked{% endif %}/>
            Payment on delivery
        </label>
    </div>
    <div class="row">
        <label for="payment_on_pickup">
            <input type="radio" 
                id="payment_on_pickup" 
                name="purchase_order" 
                value="Payment on pickup"
                data-fc-required
                {% if purchase_order == "Payment on pickup" %}checked{% endif %}/>
            Payment on pickup
        </label>
    </div>
    <div class="row">
        <label for="bank_transfer">
            <input type="radio" 
                id="bank_transfer" 
                name="purchase_order" 
                value="Bank transfer"
                data-fc-required
                {% if purchase_order == "Bank transfer" %}checked{% endif %}/>
            Bank transfer
        </label>
    </div>
    </div>
    

    Once you've got the checkout template code how you'd like, you would then need to replace the call to "{{ block('checkout') }}" within the checkout template to instead include this whole block of code. The template should still have the "{% use 'checkout.inc.twig' %}" line, and then the customised template code would follow.


    Finally, you just need to alter the language strings for the Purchase Order from within the 'language' section of your store's administration. That way you can change the "Pay by purchase order" label on the checkout to something that makes sense for the group, and also update the "Purchase Order" label that is displayed on the receipt and email receipt to make sense as well.

    That should hopefully get you up and running.
Sign In or Register to comment.