feat: Error Display on SDK for failed payment

[charis803]

Type of Change

• Bugfix
• New feature
• Enhancement
• Refactoring
• Dependency updates
• Documentation
• CI/CD

Description

This PR does the following:

Enable locale-aware payment failure error messages displayed within the Hyperswitch Web SDK payment form, it covers four areas:

1. Payment Failure Error Banner (SDK): When a payment fails with manual_retry_allowed=true and no redirection, the SDK displays the user_guidance_message from the confirm API response as a styled inline error banner.

2. Merchant Opt-In Control (SDK): A new payment element option displayPaymentFailureMessage (default: false) that the merchant must explicitly enable for the banner to render.

3. Locale Header Propagation (SDK): The SDK sends the Accept-Language HTTP header (set to the SDK's configured locale) on confirm payment API call, enabling the backend to return locale-specific error messages.

4. Translated user_guidance_message (Backend): The backend uses the Accept-Language header to look up a translated version of the user_guidance_message from the unified_translations table, falling back to English if no translation exists.

How did you test it?

I manually tested by SDK changes by checking the following:

1. Verifying if the Error Banner appears in all layouts and screens on the SDK
2. Verifying if the Banner disappears after user edits the form again
3. Verifying if the new prop is honored
4. Verifying if the locale sent in the header is proper

English: https://github.com/user-attachments/assets/fc82b770-32ee-46ec-abb7-9af6f7670a24
German: https://github.com/user-attachments/assets/a177bf28-47d9-46c3-8867-b2ee7a5d046a

Confirm Response

{
    "payment_id": "pay_6z2OBvZzXjLy1cFLDQKY",
    "merchant_id": "merchant_error_banner_test",
    "status": "failed",
    "amount": 2999,
    "net_amount": 2999,
    "shipping_cost": null,
    "amount_capturable": 0,
    "error_code": "DC_08",
    "error_message": "Payment declined: Lost card",
    "unified_code": "UE_1000",
    "unified_message": "Payment was declined",
    "error_details": {
        "unified_details": {
            "category": "UE_1000",
            "message": "Payment was declined",
            "standardised_code": "insufficient_funds",
            "description": "Insufficient funds in the account",
            "user_guidance_message": "Unzureichende Mittel. Bitte überprüfen Sie Ihr Guthaben oder verwenden Sie eine andere Zahlungsmethode.",
            "recommended_action": null
        },
        "issuer_details": {
            "code": null,
            "message": null,
            "network_details": {
                "name": null,
                "advice_code": null,
                "advice_message": null
            }
        },
        "connector_details": {
            "code": "DC_08",
            "message": "Payment declined: Lost card",
            "reason": null
        }
    }
}

The user_guidance_message in the response will be shown on the SDK

Checklist

• I ran npm run re:build
• I reviewed submitted code
• I added unit tests for my changes where possible

[semanticdiff-com]

Review changes with  

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

[github-actions]

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

• Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
• Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌