The Partial.ly widget is available to merchants using a Shopify or Woocommerce integration.

The widget is a small bit of javascript code that you can place on your product landing pages to let customers know they can purchase with a Partial.ly payment plan, and interactively see the payment plan options available to them. You can also optionally add a Partial.ly checkout button to the widget so customers can start purchasing directly from the widget.

Partial.ly widget

The widget has many different options to customize its look and behavior, which are detailed below in the options section.
The following bit of javascript illustrates the basic structure of the code to embed the Partial.ly widget on a page. There's a container element to hold the widget, javscript to set the widget options, and then loading the Partial.ly widget javascript.

<div id="partiallyWidget"></div>
<script>
document.partiallyWidgetConfig = {
  offer: '<sample partial.ly offer>',
  amount: 99.99,
  targetSelector: '#partiallyWidget'
};
(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>

Options

  • amount string the amount to use for the payment plan, typically product price
  • offer string this decides the terms to use in the widget, the offer id from your Partial.ly merchant portal
  • currency string currency to use, default USD
  • language string language to use in the widget popup, defaults to en for English. options are de, en, es, fr, it, pt
  • source string if your Partial.ly account integrates with your shopping cart, set the source here. shopify or woocommerce. On woocommerce will automatically listen for the variant change. For shopify you'll need to add an extra bit of javascript to trigger a shopify_variant_changed event on the document with the variant set to event detail. See Shopify variant changed event example below
  • includeCheckout boolean true to include a Partial.ly checkout button in the widget
  • checkoutButtonText string if including a checkout button
  • 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 to open popup
  • popupDetails string custom text in the header of widget popup
  • body string custom body text for the widget. Custom placeholders are available to insert. Leave empty for default dynamic body.
  • targetSelector string css selector for 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, set this to a css selector to the element which should trigger opening the widget popup
  • quantity integer quantity of the product, default 1
  • quantitySelector string css selector of quantity input element to monitor for changes, and automatically update widget price
  • checkoutButtonConfig object Checkout button config

Shopify variant changed event example

<script>
var selectCallback = function(variant, selector) {                           
    // trigger custom event for Partial.ly
    var event = new CustomEvent('shopify_variant_changed', {detail: variant});
    document.dispatchEvent(event);                            
};

// initialize multi selector for product
jQuery(function() {
  new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
</script>

Custom placeholders

A few custom placeholders are available for the widget body to insert dynamic information. Surround the placeholder variables with {{ and }} to insert into the widget body.

  • 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

Example input:
Payment plans from {{down_payment_amount}} down

Example output:
Payment plans from £70.00 down