Skip to main content

Changed Widgets & SDK Properties

The below changes are caused by the introduction of Wallet Multi Currency Changes. Before, HAPI Elements had an app wide Currency Selector widget, which allowed to change currency of prices:

  • in the basket
  • in the product search

Because the wallet was always created in USD, this caused a mental confusion to the end user as they wallet balance they saw was always in USD while all other prices could be in another currency. The end user needed to do math calculations to convert prices in currencies other than USD, to USD currency. Now that HAPI Backend and HAPI Elements supports multiple wallet currencies. The user however will only have one wallet with a single currency but the ATS is able to specify which currency the wallet should be created with for a specific user instead of currency being hardcoded as USD.


The changes below are done to provide a better UX and prevent the confusion and math calculations required to convert prices between different modules.

Widget changes​

he-language-currencyselector widget has been moved to Product module​

he-language-currencyselector became he-product-currencyselector and now only changes the currency of prices listed in Product Cards in Product Search. User is no longer able to change the currency of prices in the basket anymore as it was causing confusion because wallet was always in USD currency.

State changes​

ATS module state property changes​

displayCurrencyPaymentSettings is removed​

This contained settings such as min_topup, max_purchase_order, max_outstanding_balance for the currency that user could change previously via he-language-selector widget (also removed) but was no longer needed because the wallet will still be created with a single currency the ATS provides (provided by multi currency changes) for a user and user will not have any other wallet with a different currency. The wallet will always display prices in the currency it was created with thus there is no need to recompute an unneeded variable because the currency of the wallet will never change.

supportedCurrencies added​

This is a new computed variable that returns an array of ISO 4217 codes of currencies VONQ enabled for your ATS. This is a computed variable derived from userSettings.payment_settings array that contains your preferred configurations such as min_topup, max_purchase_order, max_outstanding_balance for different currencies.

Basket module state property changes​

totalInDisplayCurrency changed to totalInWalletCurrency​

Wallet is created only the first time user sees HAPI Elements widgets, and same wallet is reused on subsequent loads for the samer user and because a user can have only one wallet with a single currency that the ATS provides during loading of HAPI Elements and cannot be changed via he-language-selector widget (removed), this got renamed to totalInWalletCurrency so it shows the basket total price in the currency of the user's wallet.

totalExceedsMaxPurchaseOrder computed variable added​

When the basket total in the currency of user's wallet exceeds maxPurchaseOrderAmount (new) of Wallet module, user won't be able to select Purchase Order option from the select dropdown in Payment Method step of the Order Journey. This variable is just a computed variable that returns boolean to indicate whether user can choose Purchase Order as the payment option.

Language & Product module state property changes​

displayCurrency moved to Product State​

It is now possible to create wallets with currencies other than the USD if VONQ has enabled these currencies for your partner account. Before multi currency, user was able to change the currency app-wide and was able to see prices in the basket and the product search in their preferred currency however their wallet was always created with USD and this caused confusion for the end user as they needed to do math calculations between USD and the display currency.


Changing the currency app-wide is no longer possible and is only possible in the Product Search via he-product-currencyselector widget and by default this widget is not visible in product search and product search by default shows prices in the currency of user's wallet.

Wallet module state property changes​

balanceInUSD renamed to balance​

It is now possible to create wallets with currencies other than the USD if VONQ has enabled these currencies for your partner account, thus the wallet will have balance of whichever currency it was created with and may no longer have balanceInUSD thus this simply got renamed to balance and will reflect the balance of the wallet in whichever currency wallet was created with.

currency computed variable added​

It is now possible to create wallets with currencies other than the USD if VONQ has enabled these currencies for your partner account and this new variable will indicate the wallet's currency and is a shorthand for wallet.balance.currency.

billingDetailsAreComplete computed variable added​

To user wallet or purchase order method, a user needs to fill in billing information details in the Stripe's Billing Portal page first however Stripe Billing Portal form does not enforce these values thus the form itself has no validation. As VONQ HAPI team, we require those values ourselves and because Stripe Billing Portal form is not maintained by VONQ, we could not show validation errors when these errors were missing. With this new billingDetailsAreComplete computed variable, we can now detect which fields are missing and show validation errors inside HAPI Elements, before the user clicks the button that opens Stripe Billing Portal. The following values in the Stripe Billing Portal form are required by VONQ:

  • Address Country
  • Address City
  • Address Line 1 or Address Line 2
  • Tax Number and ID Information

walletCurrencyPaymentSettings computed variable added​

As the ATS partner, you may have asked us to set up the currencies supported in ProductPriceCurrency enum in VONQ admin panels, thus there may be more than one currency payment setting received from the HAPI Backend. This variable is just a shorthand computed variable that references the payment settings of user's wallet currency.

maxPurchaseOrderAmount computed variable added​

When the basket total in the currency of user's wallet exceeds the same currency's payment setting max_purchase_order amount, user won't be able to select Purchase Order option from the select dropdown in Payment Method step of the Order Journey. This variable is just a utility to reference user's wallet currency max_purchase_order.