Setting up an Order Now button with the Recharge Theme Engine

Using the Recharge Theme Engine, you can allow your customers to process their orders immediately by selecting the Order Now button in the customer portal. With the proper HTML, JavaScript, and CSS code in place, your customer portal will have the ability to add an Order Now button for future subscription orders. This guide takes you through the steps to get it set up.

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 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 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 it should be shown only if the next queued charge for a subscription includes multiple line items.

On the submit button there is an on-click event and handler function that will determine what type of update is requested. Based on that call, a helper function will populate data object to send, fires off an Ajax call, and reloads the page when the call is successful.

1. Click Storefront in your merchant portal and select Theme editor. 
2. Click Edit code for the theme you want to edit. 
3. Click on the subscription.html template file. 
4. Add the following code snippet just after conditional if subscription.next_charge_scheduled_at in the subscription.html template file. 

<!-- 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, it is time to create a <script> tag and place it at the bottom of the template.

Note: The script tag needs to be placed 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 processes charge immediately and create an order in your ecommerce platform.
6. After the charge is processed, show 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 -->

Wrap-up

If you have any questions about the process, reach out to the Recharge support team. We can help clarify the steps and how the end result should look and function.