Adding an Order Now button using the Recharge Theme Engine

Use the Recharge Theme Engine, to process orders placed in the customer portal immediately with an Order Now button.

This guide provides instructions on adding an Order Now button to the customer portal using the Recharge Theme Engine.

Before you start

You must have access to the Recharge Theme Engine and be on the Recharge Pro plan or be a Recharge Agency Partner.
Recharge does not support these customizations as per the Recharge design and integration policy as it requires custom coding.

Step 1 - Add HTML logic

The following code snippet includes link and button elements with on-click events and a fieldset. Fieldset is initially hidden and should only be shown if the next queued charge for a subscription includes multiple line items.

The submit button uses an on-click event and handler function to determine the requested update type. Based on that call, a helper function populates a data object to send, fires off an Ajax call, and reloads the page when the call is successful.

Refer to the following steps to add the HTML logic:

Click Storefront in your merchant portal and select Theme Editor.
Click Edit code for the theme you want to edit.
Click the subscription.html template file.
Add the following code snippet directly after conditional if subscription.next_charge_scheduled_at:

<!-- Order Now - HTML code begin -->
<a href="#" onclick="processNow({{ subscription.id }}); return false;">Order now</a><br>
<fieldset id="ReCharge_processNow-{{ subscription.id }}"  style="display: none">
    <p>
        Your next order will also include the following items:
    </p>
    <ul class="item__list"></ul>
    <br>
    <button id="ReCharge_processNow_button-{{ subscription.id }}" type="button" onclick="confirmProcessNow(event);" data-charge-id=""> 
        Confirm and order now
    </button>
</fieldset>
<!-- Order Now - HTML code ends -->

Step 2 - Add JavaScript logic to run an Ajax call

Now that you have successfully created the HTML foundation, you must create a <script> tag and place it at the end of the subscription.html template. Place the script tag before the {% endblock %} closing tag in the subscription.html template:

Get charges for a subscription with status “QUEUED” using an Ajax call.
After successfully fetching charges, in done() function, check if there is a queued charge for a subscription and if there are multiple line items for the same charge.
If there are multiple line items under the same charge, create an HTML structure for each element in the array using map() method.
Toggle the fieldset and display all available line items.
Build an Ajax call and send a POST request to process the charge immediately and create an order in your ecommerce platform.
Show a success message and reload the page after the charge is processed.

Add the following code to implement the JavaScript logic:

<!-- Order Now - JS code begin -->
<script>
    function sendProcessRequest(chargeId, button) {
        $.ajax({
            url: `/tools/recurring/portal/{{ customer.hash }}/charges/${chargeId}/process`,
            type: 'post',
        }).done(function(response) {
            ReCharge.Toast.addToast('success', 'You order was processed!');
            window.location.reload();
        }).fail(function(response) {
            // Request failed
            console.error(response);
            ReCharge.Toast.addToast('error', 'Unable to process your order.');
            window.isProcessing = false;
            if (button) {
                button.disabled = false;
            }
        });
    }

    function processNow(subscriptionId) {
        if (window.isProcessing) {
            return;
        }

        window.isProcessing = true;
        
        $.ajax({
            url: '/tools/recurring/portal/{{ customer.hash }}/request_objects',
            type: 'get',
            dataType: 'json',
            data: { schema: `{ "charges": {"subscription_id": ${subscriptionId}, "status": "QUEUED"}}` }
        }).done(function(response) {
            // Successful request made
            var charges = response.charges;

            if (!charges.length) {
                ReCharge.Toast.addToast('error', 'No queued charge was found for this subscription.');
                window.isProcessing = false;    
            }

            var charge = charges[0];

            if (charge.line_items.length > 1) {
                // Multiple items under the same charge
                // Should confirm before submitting
                var itemList = charge.line_items
                    .map(function(item) {
                        return `<li>${item.title}</li>`;
                    }).join('');

                // Update line items list
                document.querySelector(`#ReCharge_processNow-${subscriptionId} .item__list`).innerHTML = itemList;
                // Update charge ID
                document.querySelector(`#ReCharge_processNow_button-${subscriptionId}`).setAttribute('data-charge-id', charge.id);
                // Toggle section
                ReCharge.Helpers.toggle(`ReCharge_processNow-${subscriptionId}`);
            } else {
                // Single item
                // Just submit request
                sendProcessRequest(charge.id);
            }
        }).fail(function(response) {
            // Request failed
            console.error(response);
            ReCharge.Toast.addToast('error', 'No queued charge was found for this subscription.');
            window.isProcessing = false;
        });
    }

    function confirmProcessNow(event) {
        event.target.disabled = true;
        var chargeId = event.target.getAttribute('data-charge-id');

        if (chargeId) {
            sendProcessRequest(chargeId, event.target);
        }
    }
</script>
<!-- Order Now - JS code ends -->

Before you start

Step 1 - Add HTML logic

Step 2 - Add JavaScript logic to run an Ajax call

Need Help? Contact Us