UI Best Practices
Follow these guidelines to optimize your integration and achieve the best possible results.
Payment methods page
The payment methods page plays a crucial role in driving adoption. It is essential to position Volume Payments prominently and accessibly on the screen to ensure visibility and ease of selection for customers.
As Volume is not yet as widely recognized as traditional card payments, users may be unfamiliar with the experience. Encouraging them to try the flow at least once can help build trust and allow them to make an informed decision.
Payment methods are typically presented in one of the following three formats:
| Interactive button | Radio-buttons | Drop-down buttons |
|---|---|---|
 |  |  |
While a basic presentation of payment methods may allow customers to technically complete a payment, it often lacks the necessary guidance that enhances the customer experience and supports your business objectives.
We strongly recommend using interactive buttons wherever possible. Below is an example of an effective implementation that enables a fast and seamless transition from the payment methods screen to the success page:
Button placement
Interactive buttons are widely recognized as one of the most effective ways to enhance the mobile user experience. They are intuitive, user-friendly, and require minimal input, making them ideal for streamlined navigation.
If your payment methods page is the final step in the user journey—meaning no additional pages need to be visited after selecting a payment method—we recommend implementing the main Volume component directly on this page. This is important because the Volume component initiates a redirect to the bank for authorization. As a result, any subsequent pages in the flow would be skipped.
Standardised copy
If additional pages are expected to follow the payment methods screen, ensure the Volume Selector component is implemented for the icon. Use the following copy for the payment method label:
- Primary copy: Pay by Bank App
- Secondary copy: Safe, easy, and Bank-protected
Avoid rendering button on an empty page
Avoid rendering the button on an otherwise blank page solely to address the technical challenge of waiting for back-end-provided payment identifiers. Volume SDK offers several approaches for rendering the button without requiring immediate access to paymentReference and merchantPaymentId.
Use the PaymentIdentifiersProvider function to pass these identifiers to the component when they become available, and manage the button’s state using the isEnabled property to handle any delays from the back end.
