How to inject amounts and set default amounts

In general, we can set the amounts in the Lema widget for you. If you do want to use the Lema on various websites and set different amounts for each of those you can do this with a simple Javascript code that we will provide in this article. 

As well as inject custom amounts you can also set default amounts in your widget through JS code. When we deliver our Lema widget, in general, the default amount is the first one-off amount. You can set the default amount when the widget is loaded on your website to a different one if you would like to. 

You find both customizations in the following script: 

<script type="text/javascript">
window.rnwWidget = window.rnwWidget || {};
window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
window.rnwWidget.configureWidget.push(function(options) {
 // Overrwite predefined amounts (recurring amounts are monthly values)
 options.translations.step_amount.recurring_amounts = [{text: '5', value: '500'}, {text: '10', value: '1000'}];
 options.translations.step_amount.onetime_amounts = [{text: '50', value: '5000'}, {text: '100', value: '10000'}, {text: '200', value: '20000'}]
 // Set widget default to recurring payment and interval to quarterly
 options.defaults['recurring_interval'] = 'quarterly';
 // Set default for recurring interval to quarterly
 options.defaults['recurring_interval_name'] = 'quarterly';
 // Set default for recurring interval UI element to quarterly
 options.defaults['ui_recurring_interval_default'] = 'quarterly';
 // The select-dropdown has to be touched once after creation for the change to be visible
 options.widget.on(
 window.rnwWidget.constants.events.WIDGET_LOADED, function(event) {
 event.widget.j('[name="interval-selector"]').val(options.translations.common.quarterly).trigger('change');
 }
 );
 // Set default for recurring payment amount to currency subunit 1000
 options.defaults['ui_recurring_amount_default'] = '1000';
 // Set default for one-time payment amount to currency subunit 10000
 options.defaults['ui_onetime_amount_default'] = '10000';
 
 // Optionally: set purpose explicitly, hide purpose-selection
 options.defaults['stored_campaign_id'] = 'test-campaign-id';
 options.defaults['stored_campaign_subid'] = 'test-subcampaign-id';
 options.defaults['stored_purpose'] = 'test-purpose';
 options.widget.on(window.rnwWidget.constants.events.WIDGET_LOADED, function (event) {
 event.widget.hideStep('donation-target');
 })
});
</script>

Unfortunately, it is not currently possible to dynamically link the injected amounts or default amounts to the purpose step in the widget since the UI-elements cannot be changed after creation. Meaning that no matter which purpose is chosen the injected and default amounts cannot be set individually for each purpose, but will always be the same. If you would like to do this, you would have to separate the purpose selection and know the purpose before you create the widget (then hide the step donation-target).