Documentation
Support

Checkout widget: configuration

Suggest Edits

Here you can find details to how correctly configure the widget attributes at Checkout

πŸ“˜

New features implemented!

With Scalapay we always thrive to do our best and to give you the best Checkout experience!

We have recently implemented 1 new feature that will allow you to further customize your Checkout page for your customers.

All the other paramters to configure the widget at chekcout correctly (including Pay in 3, Pay in 4 and Later products) remain the same: visit the dedicated pages to learn more about them!

Settings

AttributeSuggested valueDescription
typecheckoutThe widget type. Must be equal to checkout to render the checkout page text
show-titlefalse | trueShow payment method title. Currently only used by widget with checkout type to render the payment method title

Settings usage

Show title

show-title={'false' | 'true'}

If the "show-title" field is set to "false", the result at front end is the following

1492

If the "show-title" field is set to "true", the result at front end is the following

1467

Full Example

<!doctype html>
<html>
  <head>
    <title>Scalapay Widget Pay in 3</title>
    <script type="module" src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.esm.js"></script>
    <script nomodule src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      type= 'checkout'
      show-title= "true"               
      frequency-number='30'
      number-of-installments='3'
      hide='false'
      hide-price='false'
      min='5'
      max='1500'
      amount-selectors='["#price-container"]'
      currency-position='before'
      currency-display='symbol'
      logo-size='100'
      theme='primary'
      locale='en'
    ></scalapay-widget>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <title>Scalapay Widget Pay in 3</title>
    <script type="module" src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.esm.js"></script>
    <script nomodule src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      type= 'checkout'
      show-title= "true"               
      frequency-number='30'
      number-of-installments='4'
      hide='false'
      hide-price='false'
      min='5'
      max='1500'
      amount-selectors='["#price-container"]'
      currency-position='before'
      currency-display='symbol'
      logo-size='100'
      theme='primary'
      locale='en'
    ></scalapay-widget>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <title>Scalapay Widget Pay in 3</title>
    <script type="module" src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.esm.js"></script>
    <script nomodule src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      type= 'checkout'
      show-title= "true"               
      frequency-number='14'
      number-of-installments='1'
      hide='false'
      hide-price='false'
      min='5'
      max='1500'
      amount-selectors='["#price-container"]'
      currency-position='before'
      currency-display='symbol'
      logo-size='100'
      theme='primary'
      locale='en'
    ></scalapay-widget>
  </body>
</html>

Updated over 1 year ago