The Partially Widget

The widget is a small bit of JavaScript code that you can place on your product pages to let customers know they can purchase with a Partially payment plan, and interactively see the payment plan options available to them.

General setup

The basic structure consists of a container element to hold the widget, JavaScript to set the widget options, and then loading the Partially widget script.

<div id="partiallyWidgetContainer"></div>
<script>
document.partiallyWidgetConfig = {
    amount: 500.99,
    offer: '<your offer id>',
    renderSelector: '#partiallyWidgetContainer'
};
(function() {
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = 'https://partial.ly/js/partially-widget.js';
 script.async = true;
 document.head.appendChild(script);
})();
</script>

Configuration options

• amount (string) — the amount to use for the payment plan, typically the product price.
• offer (string) — the offer ID from your Partially merchant portal; this decides the terms used in the widget.
• currency (string) — currency to use, default USD.
• language (string) — language to use in the widget popup, defaults to en for English. Options: de, en, es, fr, it, pt.
• source (string) — if your Partially account integrates with your shopping cart, set the source here.
• includeCheckout (boolean) — true to include a Partially checkout button in the widget.
• checkoutButtonText (string) — text for the checkout button, if including one.
• style (string) — widget style, either stacked or thin. Default is stacked.
• title (string) — for stacked style widgets, text for the title.
• actionText (string) — text for the widget link that opens the popup.
• popupDetails (string) — custom text in the header of the widget popup.
• body (string) — custom body text for the widget. Custom placeholders are available to insert (see below). Leave empty for default dynamic body.
• targetSelector (string) — CSS selector for the element to render the widget inside of.
• render (boolean) — whether or not to automatically render the widget, default true.
• actionSelector (string) — if setting render to false, a CSS selector for the element which should trigger opening the widget popup.
• quantity (integer) — quantity of the product, default 1.
• quantitySelector (string) — CSS selector of a quantity input element to monitor for changes, automatically updating the widget price.
• checkoutButtonConfig (object) — checkout button configuration. See: Partially Checkout Button

Custom placeholders

A few custom placeholders are available for the widget body to insert dynamic information. Within raw tags, surround the placeholder variable with {{ and }}.

• down_payment_amount — the calculated down payment amount.
• down_payment_min_amount — the calculated minimum down payment amount, for offers with a flexible down payment.
• payment_amount — the calculated scheduled payment amount.

These placeholders are dynamically calculated using Liquid syntax. Example:

{%raw%}
body:'Pay only {{payment_amount}} a month',
{%endraw%}