The Pay Online button is a feature in the Quote for draft orders template in the Order Printer Pro app that allows your customers to pay for their draft orders. It's a straightforward and secure process that can help you streamline your payment processing and make it more efficient for your customers.
You may jump to:
The Pay Online button is designed to work with the draft orders feature built into Shopify. It uses the {{ invoice_url }} Shopify variable, which inserts a link your customers can follow to pay for the invoice using Shopify's secure checkout. This variable allows you to link the button with the unpaid order.
While the Pay Online button is a useful feature, it's worth noting that the {{ invoice_url }} variable used to redirect customers to the payment page only works for draft/non-completed orders. Once you complete the order, it will convert to a regular order, and the link will redirect to the actual template instead of the checkout to pay for the order.
For example, this order is completed. Therefore, the Pay Online button on the Quote for draft orders is expected not to redirect you to the payment page.
The reason or nature of this behavior is defined by Shopify itself, as they determine what the variable does. Unfortunately, we can't control the link's behavior. For more information about the Draft Order Properties, you may check the Shopify article.
If you need to create a link for a regular order, you may use the {{ order_status_url }} variable instead. This variable will redirect customers to the order status page, where they can pay for their order using the 'Pay Now' button.
Once set up, you can get in touch with Shopify support so they can give you guidance on how to allow your customers to pay directly from the order status page, in case you and your customers don't see this option there.
The {{ order_status_url }} variable will take your customer to the status page, which will not always allow customers to pay from there. To ensure your customers are directed to the payment page, you'll need to recreate the “Pay now” button.
The snippet below will build the mentioned link with a new variable {{ new_checkout_link }}, which you can use instead, and it should work for any order with an outstanding amount. Just place it before the payment button section:
<!-- Generates checkout link when it has payment due -->
{% if order_status_url != blank %}
{% assign order_status_url_arr = order_status_url | split: "/" %}
{% assign invoice_first_number = order_status_url_arr[3] %}
{% assign secret_key = order_status_url_arr[6] | replace: "authenticate?key" , "secret" %}
{% capture new_checkout_link %}{{ shop.url }}/{{invoice_first_number}}/order_payment/{{ id }}?{{ secret_key }}{% endcapture %}
{% endif %}
Then, find the payment button section of the Quote for Draft Orders:
<a class="payment-button" href="{{ invoice_url }}" target="_blank">{{ TEXT_pay_online }}</a>
And replace it with:
<a class="payment-button" href="{% if new_checkout_link %}{{new_checkout_link}}{% else %}{{invoice_url}}{% endif %}" target="_blank">{{ TEXT_pay_online }}</a>
NOTE: Redirecting your customers directly to the payment processing page by using the {{checkout_payment_collection_url}} variable is currently only available in email notifications and not within the app's reach. However, if it ever becomes available, we would be more than happy to look into adding it as a possibility.