Conditions in Configuration
Some of the config properties can be defined by using conditions.
These are the most used conditions:
- amount()
- paymentMethod()
- paymentType()
- recurringInterval()
- purpose()
- currency().
A condition dynamically gets a value from the widget and based on the resulting value you can for instance either show or hide some of elements of the widget.
As an example - let's override the payment methods. Three payment methods will be shown: Credit Card, PostFinance and SMS. The latter will only be shown when the following condition evaluates to true: If selected amount is greater than 100, SMS method will be hidden otherwise it will be shown. Check out the full example:
<script> window.rnw.tamaro.runWidget('.rnw-widget-container', { paymentMethods: [ "eca",
"vis",
"amx", "pfc", { "if": "amount() < 100", "then": "sms" }, ] }); </script>
That was easy, wasn't it?
Let's try the next one: Based on a selected purpose we want to have different payment methods available: The SMS payment method will only be shown when the first purpose is selected. The condition we will use for that is `purpose()`:
<script> window.rnw.tamaro.runWidget('.rnw-widget-container', { paymentMethods: [ "eca",
"vis",
"amx", "pfc", { "if": "purpose() == p1", "then": "sms" }, ] }); </script>
If you need to show different values of amounts based on the selected currency - use currency() in the condition as in the example below:
<script> window.rnw.tamaro.runWidget('.rnw-widget-container', {
currencies: [ "usd", "chf", "eur" ],
amounts: [ { "if": "currency() == usd", "then": [5,10,50,100], }, { "if": "currency() == chf", "then": [10,15,60,80], }, { "if": "currency() == eur", "then": [15,20,80,100], }, ] }); </script>
A condition usually consists of operators and methods. The character > is an operator.
There are many operators that you're already used to and some that might be new to you.
New operators can easily be added to the Compiler class.
Besides operators, there are methods. The `amount()` expression is a method.
Methods are simple functions that may, or may not, take arguments and return a value.
New methods can easily be added like this:
rnw.tamaro.compiler.addMethods({
date: () => new Date().toLocaleString()
})
You might write conditions either in traditional or functional format, for example,
traditional: 1 < 2 and 3 > 2,
functional: and(lt(1, 2), gt(3, 2)).
List of available operators:
Operator | Description |
and, && | Logical and operator |
or, || | Logical or operator |
> | Greater then comparison |
>= | Greater then or equal to comparison |
< | Lesser then comparison |
<= | Lesser then or equal to comparison |
== | Equal to comparison |
=== | Strict equal to comparison |
!= | Not equal to comparison |
!== | Strict not equal to comparison |
+, -, *, / | Mathematical operators |
% | Modulo operator |
!, not, unless | Inversion operator |
in | Check if in array |
nin | Check if not in array |
List of available methods:
Method | Example | Description |
fmt | fmt("foo %s", "bar")`, `fmt("some", "text") | Format a string using template, or simply join all parts |
purpose | purpose() | purpose/campaign |
paymentType | paymentType() | onetime or recurring |
recurringInterval | recurringInterval() | recurring payment interval |
currency | currency() | currency |
amount | amount() | amount |
paymentMethod | paymentMethod() | payment means/method |
isCreditCard | isCreditCard('vis') | Is given payment method a credit card payment |
paymentForm | paymentForm("stored_customer_firstname") | Get payment form field value by |
showPaymentAddress | showPaymentAddress() | Returns true if payment address block is |
trans | trans("blocks.payment_purposes.title") | Get translation string by |
config | config("epikConfig.eppApiKey") | Get raw config option value by option name (path) |
resolveConfig | resolveConfig("amounts") | Get first resolved config option values by option name (path) |
resolveConfigWithSingleResult | resolveConfigWithSingleResult("allowCustomAmount") | |
transactionInfo | transactionInfo("payment_method") | Get transactionInfo field value by name |
subscriptionInfo | subscriptionInfo("payment_method") | Get subscriptionInfo field value by name |
transactionFinalStatus | transactionFinalStatus() | Get final status of transaction |
Configuration options
List of all available configuration options, based on the WidgetConfig class. Please be aware that in Javascript we use camelCase where as defined in YAML we use snake_case for the parameter names.
Key | Type | Description |
---|---|---|
debug | boolean |
Enable debug tools |
debugErrorMessages | boolean |
Display sample error messages, useful to see where error slots have been placed |
debugSlots | boolean |
Display placeholders for slots, useful to see where the slots have been placed |
overlayMode | string |
Set widget overlay mode, available modes are: inner, outer |
epikConfig | EpikConfig |
A set of Epik's config to use when creating a new epik instance |
testMode | boolean |
Enable transaction test mode |
returnParameters | boolean |
Return additional transaction info from RaiseNow API |
language | string |
Set widget language |
flow | PaymentFlow |
Preferred payment flow, available flows are: epp, epms |
layout | Layout |
Set widget layout, current layouts are: list, step |
paymentWidgetBlocks | ContentBlockConfig[] |
Define which blocks should be displayed inside the payment widget |
subscriptionWidgetBlocks | ContentBlockConfig[] |
Define which blocks should be displayed inside the subscription widget |
translations | TranslatorMappedResource |
Provide custom translations |
paymentFormPrefill | Partial<PaymentFormData> |
Prefill payment form |
purposes | PurposeConfig[] |
Set available purposes |
defaultPurpose | string |
Set default purpose |
autoselectPurpose | boolean |
Autoselect purpose if none is selected |
purposeDetails | PurposeDetailsConfig |
Data related to purposes |
paymentMethods | ConfigCondition<PaymentMethod>[] |
Set available payment methods |
defaultPaymentMethod | PaymentMethod |
Set default payment method |
autoselectPaymentMethod | boolean |
Autoselect payment method if none is selected |
paymentTypes | ConfigCondition<PaymentType>[] |
Set available payment types |
defaultPaymentType | PaymentType |
Set default payment type |
autoselectPaymentType | boolean |
Autoselect payment type if none is selected |
recurringIntervals | ConfigCondition<RecurringInterval>[] |
Set available recurring interval names |
defaultRecurringInterval | RecurringInterval |
Set default recurring interval |
autoselectRecurringInterval | boolean |
Autoselect recurring interval if none is selected |
currencies | ConfigCondition<PaymentCurrency>[] |
Set available currencies |
defaultCurrency | PaymentCurrency |
Set default currency |
autoselectCurrency | boolean |
Autoselect currency if none is selected |
amounts | ConfigCondition<number>[] |
Set available amounts |
defaultAmount | number |
Set default amount |
autoselectAmount | boolean |
Autoselect amount if none is selected |
allowCustomAmount | boolean |
Allow custom amount to be set |
minimumCustomAmount | ConfigCondition<number>[] |
Define the minimum custom amount either manually or regarding certain conditions |
useCreditCardIframe | boolean |
Use credit card iframe |
showPaymentIframe | boolean |
Show payment iframe |
salutations | string[] |
Set available salutations |
countries | string[] |
Set available countries |
paymentValidations | ValidationConstraints |
Define validations for the payment form |
customerUpdateValidations | ValidationConstraints |
Define validations for the customer update form |
amountSubunits | AmountSubunitsConfig |
Define multipliers for various currencies (api expects amounts in cents) |
uiBreakpoints | {[key: string]: number} |
Define css breakpoints |
uiTransitionTimeout | number |
Define timeout of css animation transitions |
uiScrollOffset | number |
Define offset from top of the page while automatically scrolling |
uiScrollDuration | number |
Define duration of automatically scroll |
slots | SlotsConfig |
Place custom components into various slots |
recaptchaKey | string |
Enable google reCAPTCHA |
faqEntries | ConfigCondition<string> |
A list of helpful and most frequently asked questions with answers on them |
showStoredCustomerBirthday | boolean |
Show/Hide storedcustomerbirthday field |
showStoredCustomerEmailPermission | boolean |
Show/Hide storedcustomeremail_permission field |
showStoredCustomerMessage | boolean |
Show/Hide storedcustomermessage field |
showStoredCustomerDonationReceipt | boolean |
Show/Hide storedcustomerdonation_receipt field |
showStoredCustomerStreetNumber | boolean |
Show/Hide storedcustomerstreet_number field |
showStoredCustomerStreet2 | boolean |
Show/Hide storedcustomerstreet2 field |
showStoredCustomerPobox | boolean |
Show/Hide storedcustomerpobox field |
showTestModeBar | boolean |
Show/Hide testMode bar |
No matter what config formats you've used, widget will merge them all together using this priority: Runtime > JavaScript > YAML and create a new config object based on those three. It is accessible trough the widget instance `window['widget'].computedConfig`. Do not try to override any values on the `computedConfig` object, since your changes will be overwritten as soon as the the config recomputates, use `window['widget'].config` instead. Be aware that config does not support a deep merge. So if you overwrite an object within the config, you have to provide the whole sub config of this object.
Comments
0 comments
Please sign in to leave a comment.