This guide will walk you through the setup process for using Recharge's Third Party Checkout page. Please note that this setup is different from using Shopify's Native Checkout, which is the recommended method for seamless integration. If you choose to use the Third Party Checkout page, there are some limitations and additional setup steps you need to follow.

If you've set up the recharge app using Shopify's Native Checkout, Every feature we have to offer will work out of the box without you having to do anything.

But if you are using Recharge's Third Party Checkout page, There are some limitations and setup process that you have to do

When using Recharge's Third Party Checkout page

Things to keep in mind

When using Recharge's Third Party Checkout page, please be aware of the following limitations:
Free Gifts: Free gifts will not work if there are subscription products in the cart. This limitation arises because we use Shopify Functions to provide free gifts, and Functions are not supported in third-party checkout pages.
Discount Codes: Discount codes applied via the discount box will not be directly applied on Recharge's checkout page. However, with some tweaks, you can achieve this functionality. Additional charges may apply, and you can refer to Recharge app documentation for further details.
Cart Notes: By default Cart notes will not work if there are subscription products in the cart.

Setup Process

To set up the Third Party Checkout page, follow the steps below

By default, clicking on the checkout button in our cart will take you to Shopify's cart page. However, since you are using the Third Party Checkout, you need to redirect the checkout button to Recharge's checkout page if there are subscription products in the cart.

To accomplish this, we will use Corner's Web SDK and override the default behavior of the checkout button. Use the following code snippet to alter the checkout button behavior:

corner.overrideCheckout((cartObject, discountCodeApplied) => {
  // Write the code for checkout button behavior here
});

Sample Code

Here's a sample code snippet that demonstrates how to redirect to Recharge's checkout page only if the cart contains subscription products:
Paste the following code to Cart drawer-> Advanced Settings -> Custom Js if you want quickly setup the recharge app. But would strongly recommend to just consider code snippet as a starting point and make your own necessary changes.

corner.overrideCheckout((cartObject, discountCodeApplied) => {
    let cart_data = {
        cart: JSON.stringify(cartObject)
    };

    console.log("checkout Triggered");

    function buildInputs(form, obj) {
        // Build input fields for key, value pairs
        Object.keys(obj).forEach(function(key) {
            var input = document.createElement("input");
            input.setAttribute("type", "hidden");
            input.setAttribute("name", key);
            input.setAttribute(
                "value",
                typeof obj[key] === "object" ? JSON.stringify(obj[key]) : obj[key]
            );
            form.appendChild(input);
        });
    }

    function buildForm(data, url) {
        // Build a virtual form
        var form = document.createElement("form");
        form.setAttribute("method", "post");
        form.setAttribute("action", url);
        form.setAttribute("id", "rc_form");
        form.style.display = "none";
        buildInputs(form, data);
        return form;
    }

    function hasSubscription() {
        // Check if subscription items are found in cart data
        // const cart = JSON.parse(data.cart);
        // return [...cart.items].some(
        //   (item) => item.properties && item.properties.shipping_interval_unit_type
        // );
        if (cartObject && cartObject.items.length > 0) {
            let cartItems = cartObject.items;
            let subscriptionItemIndex = cartItems.findIndex((item) => {
                let propertyKeyArray = Object.keys(item.properties);
                if (propertyKeyArray.includes("shipping_interval_unit_type")) {
                    return true;
                } else false;
            });
            if (subscriptionItemIndex > -1) return true;
            else return false;
        }
    }

    function get_cart_token() {
        // Build the cart_token param for the URL generator
        try {
            return [
                "cart_token=" + (document.cookie.match("(^|; )cart=([^;]*)") || 0)[2],
            ];
        } catch (e) {
            return [];
        }
    }

    function get_ga_linker() {
        // Build the ga_linker param for the URL generator
        try {
            return [ga.getAll()[0].get("linkerParam")];
        } catch (e) {
            return [];
        }
    }

    function buildCheckoutUrl() {
        // Build the Checkout URL
        var checkout_url = "https://checkout.rechargeapps.com/r/checkout?",
            url_params = ["myshopify_domain=" + Shopify.shop];
        url_params = url_params.concat(get_cart_token()).concat(get_ga_linker());
        return checkout_url + url_params.join("&");
    }

    if (!hasSubscription()) {
        // Send user to Shopify's checkout if no subscription products are found
        window.location.href = "/checkout";
    } else {
        var checkout_url = buildCheckoutUrl();
        if (!cart_data) {
            // Cart data not found, fallback to token method
            window.location.href = checkout_url;
            return;
        }

        console.log(` hasSubscription()----> `, hasSubscription());
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/cart/update.js");
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.onload = function() {
            if (xhr.status === 200) {
                window.console.log("done", JSON.parse(xhr.responseText));
            } else if (xhr.status !== 200) {
                window.console.log("fail", JSON.parse(xhr.responseText));
            }
            var form = buildForm(cart_data, checkout_url);
            document.body.appendChild(form);
            form.submit();
        };
        xhr.send(JSON.stringify(cart_data));
    }
});

Finally inside cart the subscription duration (shown in the image below) will be automatically populated. But if you wish to edit that text add a global variable to your store in window.cornerRechargeString



Please note that the provided code sample doesn't handle discount codes and cart notes. If you also want to support these features, you will need to make additional modifications. You can refer to Recharge app documentation for more information on implementing these changes.

Recharge Docs: https://support.rechargepayments.com/hc/en-us/articles/4409530370455#h_01FTGSHR9RPT96XF4MA1GMKN1Z

If you have any further questions or need assistance, please feel free to reach out to our support team or consult the Recharge app documentation for more detailed instructions.

Updated on: 24/10/2023