Setting up an Order Now button with the Recharge Theme Engine

Using the Recharge Theme Engine, you can allow customers to process orders immediately by setting up an Order Now button in the customer portal. Creating an Order Now button requires advanced knowledge of HTML, JavaScript, and CSS. This guide provides instructions for adding an Order Now button to your customer portal for merchants using the Recharge Theme Engine. 

Before you start

• To implement this customization, you need access to the Recharge Theme Engine and must be on the Recharge Pro Plan or a Recharge Agency Partner. 
• The Theme Editor requires advanced HTML and JavaScript knowledge. 
• These customizations are not supported by Recharge as per the design and integration policy as it requires custom coding. If your team isn't experienced with development work, we recommend reaching out to a Recharge Agency Partner agency.

Step 1 - Add HTML logic

The following code snippet will include 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 what type of update is requested. 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: 

1. Click Storefront in your merchant portal and select Theme editor. 
2. Click Edit code for the theme you want to edit. 
3. Click the subscription.html template file. 
4. 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.

1. Get charges for a subscription with status “QUEUED” using an Ajax call.
2. 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.
3. If there are multiple line items under the same charge, create an HTML structure for each element in the array using map() method.
4. Toggle the fieldset and display all available line items
   
5. Build an Ajax call and send POST request to process charge immediately and create an order in your ecommerce platform.
6. After the charge is processed, show a success message and reload the page.
   

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 -->

Next steps

If you have any questions about the process, contact the Recharge support team.