Partially Checkout Button

The Partially checkout button is a small bit of JavaScript you can use to embed a Partially checkout button on your shopping cart, product landing page, or any other page. The button has many options to customize its appearance and behavior, detailed below.

General setup

The general setup consists of an element to render the Partially checkout button inside of, a JavaScript configuration object, and loading the Partially checkout button script. Below is an example.

<div id="partiallyCheckoutBtn"></div>
<script>
document.partiallyButtonConfig = {
    offer: '<your offer id>',
    amount: 500.99,
    currency: 'USD',
    renderSelector: '#partiallyCheckoutBtn',
    meta: {
        items: [
            {
                id: 123,
                name: 'Sample product',
                quantity: 1,
                price: 500.99,
                total: 500.99,
                sku: 'samplesku',
                image: 'https://example.com/image.jpg'
            }
        ]
    }
};
(function() {
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = 'https://partial.ly/js/partially-checkout-button.js';
 script.async = true;
 document.head.appendChild(script);
})();
</script>

Configuration options

• offer (string) — the offer ID to use when checking out. Use the integration tool for the offer you want to use in the Partially merchant portal.
• amount (double) — the total amount of the payment plan.
• currency (string) — currency to use, defaults to USD or the currency specified in the offer.
• language (string) — language for the Partially checkout interface: de, en, es, fr, pt, or it. Defaults to en.
• imageUrl (string) — absolute URL to an image to use when rendering the checkout button.
• returnUrl (string) — absolute URL for links in Partially checkout to cancel checkout and return to the merchant's site.
• returnConfirmedUrl (string) — absolute URL for the link to return to the merchant's site from the payment plan confirmed page.
• renderSelector (string) — CSS selector for the element to render the checkout button inside of.
• quantitySelector (string) — CSS selector for a quantity input element. When using the checkout button on a product landing page, it will automatically adjust the payment plan amount when the quantity is changed.
• attachSelector (string) — CSS selector for an element to attach to and automatically set the href element. Use this option to avoid rendering an image inside the checkout button and use your own custom HTML instead.
• meta (object) — meta information about the plan, such as source and items. See the Meta Object Options below.
• customer (object) — send default customer information.
• shopifyCart (object) — automatically set the meta information based on a Shopify cart object.
• shopifyProduct (object) — automatically set the meta information based on a Partially product object.
• shopifyVariant (object) — automatically set the meta item variant information.
• woocommerceProduct (object) — automatically set the meta information based on a WooCommerce product. Not needed if using our Partially payment plan plugin for WooCommerce.
• noteSelector (string) — if you allow customers to enter special notes for their order, provide a CSS selector to that element and the note field will automatically update in the Partially button without the customer needing to submit the form first.
• customParams (object) — a map of custom tracking parameters for Partially to forward to checkout, such as _ga, gclid, or UTM tracking parameters.

Meta object options

• source (string) — the source of the payment plan, if integrating with another software, such as Shopify or WooCommerce.
• description (string) — an optional description for the payment plan.
• items (array) — array of line items; see the LineItem Object Options below. Only necessary if integrating with a shopping cart platform such as Shopify or WooCommerce.
• note (string) — an optional note for the order.
• attributes (object) — optional map of attributes for the order.

Line item object options

• name (string) — description of the item.
• price (double) — price of the item.
• quantity (integer) — quantity.
• total (double) — line item total.
• product_id (string) — product ID.
• variant_id (string) — optional variant ID.
• image (string) — absolute URL for the item image.
• sku (string) — product SKU.
• weight (double) — item weight.
• weight_units (string) — weight units: g, kg, oz, or lb.
• properties (object) — optional map of configurable properties.

Customer object options

• email (string) — preset the customer email address for checkout.