How to attach explaining text to each amount

This example shows you how to place explaining text for each amount using the Lema JS API.

The script tag is placed on the same website as the Lema widget.  

<script type="text/javascript">
window.rnwWidget = window.rnwWidget || {};
window.rnwWidget.configureWidget =  window.rnwWidget.configureWidget || [];
window.rnwWidget.configureWidget.push(function(options) {

  // define blocks of texts as custom fields
  options.extend({
    custom_fields : {
      stored_customer_amount500Text : {
        type : 'htmltext',
        location : 'after',
        reference : 'custom-amount-container',
        initial : '&ltp style="width: 100%; float: right;"&gt&ltstrong&gtErklärtext für CHF 5&lt/strong&gt&lt/p&gt'
      },
      stored_customer_amount1000Text : {
        type : 'htmltext',
        location : 'after',
        reference : 'custom-amount-container',
        initial : '&ltp style="width: 100%; float: right;"&gt&ltstrong&gtLorem Ipsum (CHF 10)&lt/strong&gt&ltbr/&gt&ltbr/&gt &ltem&gtis simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.&lt/em&gt It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt/p&gt'
      }
    }
  });

  // initially hide all texts
  function hideAll(event) {
    event.widget.hideBlock('custom-stored_customer_amount500Text');
    event.widget.hideBlock('custom-stored_customer_amount1000Text');
  }
  // unhide the first
  options.widget.on(window.rnwWidget.constants.events.WIDGET_LOADED, function(event) {
    hideAll(event);
    event.widget.showBlock('custom-stored_customer_amount500Text');
  });
  // add logic to change visible block when the amount is changed
  options.widget.on(window.rnwWidget.constants.events.AMOUNT_CHANGED, function(event) {
    switch(event.value) {
      case '500': // note that these are amount values (currency's smallest denominator - eg. Rappen)
      hideAll(event);
      event.widget.showBlock('custom-stored_customer_amount500Text');
      break;
      case '1000':
      hideAll(event);
      event.widget.showBlock('custom-stored_customer_amount1000Text');
      break;
      default:
      console.log('no match for value: ' + event.value);
      hideAll(event);
    }
  });
});
</script>

Note that the amounts in this example are all values - this means that whenever you catch "value" inside the AMOUNT_CHANGED-event, you are dealing with the smallest denomination of the configured currency. For Swiss Francs, this would be Rappen. When dealing with labels, you would be using full Swiss Francs.