Skip to main content

​
UX Guidelines

Providing a seamless and trustworthy payment experience is critical for maximizing conversion rates. Because Inflow operates via a hosted payment page and currently does not provide a native UI SDK, you must handle the transition between your application and the Inflow payment environment carefully. Follow these best practices to ensure your users feel confident and secure throughout the checkout process.

​
1. Clear Call to Action

Your checkout or payment button should clearly indicate the action the user is about to take.
  • Use descriptive text: Instead of generic terms like “Submit” or “Continue,” use action-oriented phrases such as “Pay Now,” “Pay with Inflow,” or “Proceed to Payment.”
  • Prominent placement: Ensure the payment button is easily visible, accessible, and not hidden among other less important actions.

​
2. Setting Expectations Before Redirect

Since you will be redirecting your users to an external Inflow-hosted payment link, it is important to prepare them for the transition.
  • Inform the user: Briefly explain that they will be securely redirected to Inflow to complete the payment. A simple message like “You will be redirected securely to complete your payment” works well.
  • Maintain your branding: If possible, use the payment request parameters to display your business name or logo on the hosted page, so users know they are in the right place.

​
3. Handling the Redirect

When your application receives the secure payment link from the Create a payment request API:
  • Web Applications: Open the link in the same tab or a secure popup/modal. Redirection within the same tab or window avoids aggressive popup blockers.
  • Mobile Applications: Open the payment link using a secure, in-app browser (e.g., SFSafariViewController on iOS or Custom Tabs on Android). Avoid opening the link in the default system browser, as it breaks the continuous flow of the app.
  • Provide an Exit Strategy: Ensure users can easily cancel the payment or go back to your application if they choose not to proceed at that moment.

​
4. Post-Payment Experience

After the user completes or cancels the payment, they will be redirected back to your application using the success or failure URLs you specified during the payment creation.
  • Success state: Immediately display a clear confirmation screen. Show the payment reference, the amount paid, and the next steps (e.g., “Your order is being processed”).
  • Failure or cancellation state: If a payment fails or the user cancels, gracefully handle the error. Do not simply say “Error.” Explain that the payment was not completed and provide a button to try again or choose another payment method.

​
5. Trust and Transparency

Building trust is essential, especially when users are leaving your domain to pay.
  • Display trusted logos: Show accepted payment methods or the Inflow logo near your checkout button to reassure users.
  • Show the exact amount: Ensure the amount displayed in your app matches the amount shown on the Inflow payment page exactly, including the currency.