Open API - Checkout Widget

Overview:

The Route Checkout Widget uses the Open API to dynamically generate a Route branded opt-in checkbox for insurance. To use the widget, just add the following two lines of code to your checkout page or any page where customers will select shipping. The generated code includes a checkbox that can be included as part of a form. The name and id of this checkbox is ‘routeInsureOrder’ and can be referenced like any other form variable.

When placing the widget in your form, make sure the javascript is included after the Route div tag, but before the closing body tag. If the javascript is added to the head or anywhere before the div tag, the javascript will fail to build the div content. The javascript can be included immediately after the div tag, as seen below, or it can be added right before the closing body tag.

If you plan to include insurance on all you orders, such as making it a handling charge, the widget is not required.

Replace WIDGET-KEY-HERE with your public widget key and QUOTE-ID with a quote id from the Request Quote API or use ‘test’ if you are working on the UI.

<div id="rw-_container" data-publickey='WIDGET-KEY-HERE' data-quoteid='QUOTE-ID' data-overridedisplayprice='' data-style='true'></div>
<script src="https://d1pv9ulu41r3n5.cloudfront.net/routeWidgetScript.min.js" type="text/javascript"></script>

Parameters:

Parameter Key Parameter Value Required Description
data-publickey WIDGET-KEY-HERE YES Your public (test or LIVE) widget key.
data-quoteid QUOTE-ID YES A valid quote id from the request quote API or 'test'.
data-overridedisplayprice Any String no Overrides the displayed insurance price. If empty, the suggested insurance price from the quote displays.
data-style true or false no Controls if the default stylesheet is included or not.

Styling:

This is what the default Route Widget looks like. Mouse over the route logo to see the detail bubble.

route (Accept ) Shipping Protection $3.97

The Route Widget comes with a standard stylesheet that works with many ecommerce platforms. But it also includes the ability to substitute your own stylesheet. Simply change the value of 'data-style' in the Route div tag from 'true' to 'false' and include your own stylesheet with the following tags.
#rw-_container span{
    color:#000;
    font-size:11px;
    position:relative;
}
#rw-_popup{
    border:1px solid #3a3a3a;
    bottom:27px;
    position:absolute;
    width:382px;
    z-index:100;
}
#rw_logoIcon{
    width:64px;
    height:16px;
    vertical-align:text-bottom;
    margin-right:4px;
}
#rw-_decline{
    position:relative;
    top:3px;
}
#rw-_container .rw-_smFont{
    position:relative;
    font-size:9px;
    display:block;
    margin-top:2px;
}

Form Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Checkout Page</title>
</head>
<body>
<h1>Checkout Page</h1>
<form name="checkout" action="completeCheckout" method="post">
    First Name: <input type="text" name="first">
    <br>
    Last Name: <input type="text" name="last">
    <br>
    Address: <input type="text" name="address">
    <br>
    ...
    <br>
    Shipping Method: <select name="shipping_method">
        <option value="UPS">UPS</option>
        <option value="FedEx">FedEx</option>
        <option value="USPS">USPS</option>
    </select>
    <br>
    <div id="rw-_container" data-publickey='WIDGET-KEY-HERE' data-quoteid='QUOTE-ID' data-overridedisplayprice='' data-style='true'></div>
    <br>
    <input type="submit">
</form>
<script src="https://d1pv9ulu41r3n5.cloudfront.net/routeWidgetScript.min.js" type="text/javascript"></script>
</body>
</html>

Errors:

The Route Widget can return the following errors:
Route Widget must include a valid widget_key.
No billing setup for these keys. Live API requests require valid billing. If this is a test, use the test widget key.
Route Widget must include a valid quote_id.
No Route records exist for the provided quote_id and widget_key.
The provided quote_id has already been used. Quotes can only be applied to a single order.
The provided quote_id has expired. Quotes must be used within 24 hours.