UI/UX Recommendations

Integrating a payment solution is not just about technical implementation; it's about creating a user experience that feels secure, professional, and easy to use. Below are recommendations for designing your app's flow around the Tapaya Accept SDK.

1. Triggering the Payment

Clear Call to Action (CTA)

Ensure the button to initiate payment is prominent and clearly labeled.

• Good: "Pay €12.50", "Charge Card", "Checkout"
• Bad: "Submit", "Next", "Ok"

Feedback on Interaction

When the user taps the payment button, provide immediate visual feedback (e.g., a spinner or a disabled state) to prevent double-clicks while the SDK initializes.

2. During the Transaction

The Tapaya Accept SDK handles the sensitive parts of the transaction (card reading, PIN entry) with its own UI overlay. However, your app is responsible for the context before and after.

Do Not Obscure the Screen

The SDK requires the full screen to ensure security and prevent overlay attacks. Do not attempt to draw floating windows or chat heads over the payment UI, as this may trigger security mechanisms that abort the transaction.

NFC Positioning Guidance

SoftPOS technology relies on the NFC antenna, which varies by device model.

• Recommendation: If possible, display a quick animation or hint in your app before calling the SDK, showing the user where the NFC chip is located on their specific device (usually the back top or center).

3. Handling Results

Success State

• Visual Confirmation: Display a clear "Success" screen with a green checkmark or similar positive reinforcement.
• Receipts: Offer an immediate option to send a digital receipt (Email/SMS) or print one if a printer is connected.

Failure State

• Clear Error Messages: If a transaction fails, translate technical error codes into user-friendly language.
  • Technical: DECLINED_INSUFFICIENT_FUNDS
  • User-facing: "Transaction declined. Please check the balance or try a different card."
• Retry Option: Provide a prominent "Try Again" button so the merchant can quickly restart the process without re-entering the amount.

4. Branding & Trust

Merchant Recognition

Use the UiConfigurationData to inject the merchant's branding into the SDK. Seeing their own logo or company name during the payment process reassures the merchant and the cardholder that they are in the right place.

AcceptSDK.setUiConfiguration(
    configuration = UiConfigurationData(
        companyLogoUrl = "https://example.com/logo.png",
        companyName = "My Coffee Shop"
    )
)

Consistency

Ensure your app's color scheme and typography complement the SDK's neutral design. While you cannot change the internal security screens of the SDK, your pre- and post-payment screens should maintain a consistent visual identity.

5. Accessibility

• Sound: The SDK emits audio cues for card reads and errors. Ensure your app does not mute system volume or interfere with audio focus during a payment.
• Haptics: The SDK uses vibration to confirm card reads. This is crucial for accessibility and general feedback in noisy environments.

Checklist for Designers

• CTA: Is the "Pay" button obvious and descriptive?
• Loading: Is there feedback while the SDK loads?
• Errors: Are error messages helpful and actionable?
• Branding: Is the merchant's logo configured?
• Receipts: Is the post-payment flow (receipts/next order) smooth?