Start Strong
Sell Smart
Manage with Ease
Market to Success

Installment Information Display: Detailed Setup for Multiple Platforms

The Installment Information Display app enhances your customer experience by displaying installment information for popular payment platforms like PayPal PayLater, Klarna, Afterpay, and more. It can be configured to show on product details pages, shopping carts, and checkout pages, increasing customer satisfaction by offering flexible payment options..

This guide introduces the app's features and provides guidance on setting up key features for various popular payment platforms.

Note: If you’re using a SHOPLINE OS 3.0 theme, the payment methods on certain pages must be manually added as App Blocks in the theme editor to display properly. For details on App Block functions, setup steps, and which app features require App Block support, refer to the Help Center article "Integrating Apps into OS 3.0 Themes."

 

 

Feature Overview

Key Features

The Installment Information Display app offers the following benefits:

  • Supports multiple platforms: Display installment information for PayPal PayLater, Klarna, Afterpay, Affirm, GrabPay, Atome, and Zip.
  • Increased conversions: Showcase installment options on product details and checkout pages to entice customers.
  • Customization: Control the display format, position, and style of the information.

 

Installation Steps 

  1. Go to the SHOPLINE App Store.
  2. Search for Installment Information Display.
  3. Click Install to start using the app.
Note: Before using the app, ensure the corresponding payment methods are activated in Settings > Payments.

 

 

Settings for Paypal PayLater

To display installment information for PayPal PayLater, follow these steps:

  1. On the homepage of the app, find the PayPal Paylater module and click Configure.
    2.1.1.png
  2. Enter your Client ID. Ensure this ID matches the one you've added to the Other payment methods section under Settings > Payments.
    2.1.2.png
  3. Select the desired display pages and customize settings like position and style.
    2.1.3.png
  4. Preview the display on the right-hand side.
    2.1.4.png
  5. Toggle Display component? on and click Update to save your settings.
    2.1.5.png
Note: If the PayPal installment component isn't displaying correctly, PayPal might have blocked the plugin. Contact your PayPal account manager to request whitelisting for your store's installment feature.

 

How to Obtain the Client ID

  1. Go to the PayPal Developer Dashboard, log in to your PayPal account, and click API credentials.
    2.2.1.png
  2. Find the relevant app in the list and click its name.
    2.2.2.png
  3. Copy your Client ID and paste it into the corresponding field in your app. Ensure it's the same ID you've added to the Other payment methods section.
    2.2.3.png

Supported Countries/Regions and Currencies

By default, PayLater supports installment information display for the following countries/regions and currencies:
2.2.4.png

Note:PayLater information will only be displayed for customers with IP addresses in these regions and using the corresponding currencies.

 

 

Settings for Affirm

To display the installment information for Affirm, follow these steps:

  1. On the homepage of the app, find the Affirm module and click Configure.
    3.1.1.png
  2. Enter the Public API Key (obtain instructions below). Additionally, select the Icon type and Icon color.
    3.1.2.png
  3. Select the display pages and customize settings such as position and style.
    3.1.3.png
    • If the Display on collection page option is selected, you can further choose a specific card size for both desktop and mobile displays.
    • To display information on the homepage, click Learn more at the bottom to set it up in the store’s theme editor.
  1. Preview the display on the right.
    3.1.4.png
  2. Toggle Display component? on and click Update to save.
    3.1.5.png

How to Obtain the Public API key

  1. Set up your Affirm promotional messaging.
  2. Log in to your Affirm account, go to the API Keys tab, and copy and paste the keys to the corresponding field on the settings page.
    3.2.png

 

 

Settings for AfterPay / Clearpay

To display the installment information for Afterpay / Clearpay, follow these steps:

  1. On the homepage of the app, find the Afterpay / Clearpay module and click Configure.
    4.1.png
  2. Select your preferred title text, logo style, color, font size, and theme color for the display.
    4.2.png
  3. Check the desired display pages and select your preferred display positions.
    4.3.png
  4. Preview the display on the right.
    4.4.png
  5. Toggle Display component? on and click Update to save.
    4.5.png

 

 

Settings for GrabPay

To display the installment information for Grabpay, follow these steps:

  1. On the homepage of the app, find the GrabPay module and click Configure.
    5.1.png
  2. Check the desired display pages and configure corresponding settings, such as display position, style, and alignment on mobile/desktop.
    5.2.png
  3. Preview the display on the right.
    5.3.png
  4. Toggle Display component? on and click Update to save.
    5.4.png

 

 

Settings for Atome

To display the installment information for Atome, follow these steps:

  1. On the homepage of the app, find the Atome module and click Configure.
    6.1.png
  2. Select the theme style. Then, check the desired display pages and select your preferred display positions.
    6.2.png
  3. Preview the display on the right.
    6.3.png
  4. Toggle Display component? on and click Update to save.
    6.4.png

 

Settings for Klarna

To display the installment information for Klarna, follow these steps:

  1. On the homepage of the app, find the Klarna module and click Configure.
    7.1.1.png
  2. Enter the Client ID (obtain instructions below), select the country/region, and choose the language.
    7.1.2.png
  3. Check the desired display page(s) and position(s).
    7.1.3.png
  4. Preview the display on the right.
    7.1.4.png
  5. Toggle Display component? on and click Update to save.
    7.1.5.png

How to Obtain the Client ID

  1. Log in to your Klarna account. 
  2. Go to On-site messaging > Installation to find your Client ID.
    7.2.png
Note: Make sure you copy it without quotation marks or spaces and then paste it in the corresponding box in the settings page.

 

 

Settings for Zip

To display the installment information for Zip, follow these steps:

  1. On the homepage of the app, find the Zip module and click Configure.
    8.1.1.png
  2. Enter the Public key (obtain instructions below) and select the country/region.
    8.1.2.png
  3. Check the desired display pages and select your preferred display positions.
    8.1.3.png
    Note: To display information and customize its style on the homepage, click Learn more at the bottom to set it up in the store’s theme editor.
  4. Preview the display on the right.
    8.1.4.png
  5. Toggle Display component? on and click Update to save.
    8.1.5.png

How to Obtain the Public Key

  1. Log in to your Zip portal.
  2. From the left menu, access Settings and locate the Integration module to find your Public key.
    8.2.png

 

 

Settings for Sezzle

To display installment information for Sezzle, follow these steps:

Note: The Sezzle payment option will only be displayed to customers whose shipping country is the US or Canada, and who are checking out in USD or CAD.
  1. On the homepage of the app, find the Sezzle module and click Configure.
    1.png
  2. Switch on the toggle in the Display component? card.
    2.png
  3. Enter your Sezzle Client ID.
    3.png
  4. Choose a Component style that suits your page background.
    4.png
  5. Select the desired display pages and customize the component’s position.
    5.png
  6. Preview the display on the right-hand side.
    6.png
  7. Click Update to save your settings.