Leanpay configuration

1. Log in to the Leanpay panel for the desired environment
2. Go to the Company section
   1. 
3. Scroll to the Development section and retrieve
   1. API key
   2. Pre-qualify URL

This API key is essential for synchronizing the available installment plans for your account.

Shopify Application Installation and Setup

1. Visit the Shopify integration endpoint at – https://installmentapp.leanpay.si
2. Enter your Shopify store URL –
   1. 
   2. You will be redirected to Shopify, to the application installation screen
3. Once the application is installed, you’ll get redirected to the configuration view.
   1. 
   2. The API key and Pre-quality URL are available in the Leanpay Gateway panel under Company → Development.
      1. Select the corresponding API environment and mode for the selected API key
   3. The Payment Information URL configuration is optional.
      1. If a URL is configured, pointing to a page explaining the options of the payment method, it will be utilized within a button within the widgets. (“More information”)
4. Once saved (“Save & Sync plans”), the Installment group dropdown will be populated.
   1. Select and activate the group that will be used for all front-end calculations.
5. The application should now be configured and ready for widget output.

Widget Configuration

1. Navigate to Store → Themes → “Customize” the active theme
2. Three new widgets will be available:
   1. 
3. Product Widget example:
   1. Insert into the desired area within a product page. No additional configurations are required:
   2. 
   3. 
   4. 
   5. 
4. Horizontal Widget example:
   1. Insert into any high-width area (e.g., collection head).
   2. The price value is configurable manually.
   3. 
5. Vertical Widget example:
   1. Insert into any lower-width area. Ideal for mobile views or sidebars.
   2. The price value string is configurable manually.
   3. 

Theme integration

By default, the Product widget (calculator) does not support price variant change events due to Shopify’s implementation specifics. Since each theme manages price updates differently, there is no standardized method for detecting these events.

To address this limitation and ensure compatibility with third-party app customizations, Leanpay Marketing Tools offers a programmatic method for triggering price updates when variants are changed.

Example implementation

// Example: When variant changes
function onVariantChange(variant) {
 // Your existing variant change logic...


 // Notify Leanpay widget of price change
 if (variant && variant.price) {
   window.dispatchEvent(new CustomEvent('leanpay:priceChange', {
     detail: {
       price: variant.price / 100  // Convert cents to currency units
     }
   }));
 }
}
// Example: When quantity changes
function onQuantityChange(quantity) {
 const basePrice = 99.99;
 const newPrice = basePrice * quantity;


 window.dispatchEvent(new CustomEvent('leanpay:priceChange', {
   detail: {
     price: newPrice
   }
 }));
}

Important Notes

1. Installment plans can be refreshed manually by selecting “Save & Sync Plans” in the configuration view.
   1. Plans are also updated automatically every day at midnight.
2. All widgets are automatically translated into the store’s language or locale. The following languages are currently supported:
   1. English
      1. Default fallback, if a language is not supported.
   2. Slovenian
   3. Romanian
   4. Croatian
3. If the store currency differs from the target environment, the calculator will automatically convert the displayed values into the target environment currency using the latest available exchange rates.