Skip to main content

Payment Methods Configuration

How to set active payment method and/or disable some payment methods?​

Our Partner Account Manager, when onboarding you, will ask you for which of the payment methods you want to use by default on API-level and indirectly on HAPI Elements. On acceptance environment, unless requested otherwise, we turn on all of them for you by default but on production, we will ask you which methods you want enabled.


Currently there are these payment methods:

  • ATS Managed -> This is type of a payment method where we invoice you based on the contract you have with VONQ and your end user does not see the payment method step at all
  • Wallet Balance -> When wallet balance payment method is enabled, users get a wallet created for them and they can add balance (top-up) to their wallet to be used on campaign ordering, until they run out of balance and they need to top-up again to continue
  • Direct Charge -> This method needs to be enabled and provides ability to pay for a campaign during campaign checkout
  • Purchase Order -> This method needs to be enabled and provides ability to purchase now & pay later

Based on how we set up your partner account in our Admin dashboards, the available payment methods will automatically be populated by HAPI Elements. To check what these payment methods are, you can check the Order Journey Tab -> Enabled Payment Methods section in the Debug Panel which we automatically inject to your application that is placed on the bottom left corner of your browser window.


Because your goal is to disable (hide) the payment methods or set the active payment method, we suggest that you get familiar with the Javascript API.


Let's first check which methods are available:

window.hapi.orderJourney.state.paymentMethodsAvailable.value //notice the .value getter, there is also .onChange event if you need it

// outputs based on our admin dashboard settings
['ats_managed', 'wallet', 'purchase_order', 'direct_charge']
// use the enums when using above values so they are not hardcoded
// window.hapi.orderJourney.utils.paymentMethodKeys.purchaseOrder
// window.hapi.orderJourney.utils.paymentMethodKeys.directCharge
// window.hapi.orderJourney.utils.paymentMethodKeys.wallet
// window.hapi.orderJourney.utils.paymentMethodKeys.atsManaged

This is a computed variable, meaning you cannot change the value of this array however there is a second array called paymentMethodsEnabled. When HAPI Elements loads, the value of this second array will be identical to paymentMethodsAvailable.


To disable (hide) the methods, you need to overwrite the paymentMethodsAvailable array:

const availablePaymentMethods = window.hapi.orderJourney.state.paymentMethodsAvailable.value

const paymentMethodsToDisable = [
    window.hapi.orderJourney.utils.paymentMethodKeys.purchaseOrder,
]

const enabledPaymentMethods = availablePaymentMethods.filter(method => !paymentMethodsToDisable.includes(method))

// set the state
window.hapi.orderJourney.state.paymentMethodsEnabled = enabledPaymentMethods

To set the active payment method, do the following:

window.hapi.campaign.state.campaignForm = {
    ...window.hapi.campaign.state.campaignForm.value,
    paymentMethod: window.hapi.orderJourney.utils.paymentMethodKeys.purchaseOrder
}