From 78d707de834d296c315281cdafa70f8d4744f5e4 Mon Sep 17 00:00:00 2001
From: Mislav Lukach <mislavlukach@gmail.com>
Date: Tue, 10 Jun 2025 16:10:09 +0200
Subject: [PATCH] chore(billing): add stripe powered by (#9016)

Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
---
 frontend/src/assets/stripe.svg                   |  6 ++++++
 .../components/features/payment/payment-form.tsx |  2 ++
 .../features/payment/powered-by-stripe-tag.tsx   | 16 ++++++++++++++++
 frontend/src/i18n/declaration.ts                 |  1 +
 frontend/src/i18n/translation.json               | 16 ++++++++++++++++
 5 files changed, 41 insertions(+)
 create mode 100644 frontend/src/assets/stripe.svg
 create mode 100644 frontend/src/components/features/payment/powered-by-stripe-tag.tsx

diff --git a/frontend/src/assets/stripe.svg b/frontend/src/assets/stripe.svg
new file mode 100644
index 0000000000..4547cbf8e8
--- /dev/null
+++ b/frontend/src/assets/stripe.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" style="enable-background:new 0 0 468 222.5" version="1.1" viewBox="0 0 468 222.5">
+  <style>
+    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#635bff}
+  </style>
+  <path d="M414 113.4c0-25.6-12.4-45.8-36.1-45.8-23.8 0-38.2 20.2-38.2 45.6 0 30.1 17 45.3 41.4 45.3 11.9 0 20.9-2.7 27.7-6.5v-20c-6.8 3.4-14.6 5.5-24.5 5.5-9.7 0-18.3-3.4-19.4-15.2h48.9c0-1.3.2-6.5.2-8.9zm-49.4-9.5c0-11.3 6.9-16 13.2-16 6.1 0 12.6 4.7 12.6 16h-25.8zM301.1 67.6c-9.8 0-16.1 4.6-19.6 7.8l-1.3-6.2h-22v116.6l25-5.3.1-28.3c3.6 2.6 8.9 6.3 17.7 6.3 17.9 0 34.2-14.4 34.2-46.1-.1-29-16.6-44.8-34.1-44.8zm-6 68.9c-5.9 0-9.4-2.1-11.8-4.7l-.1-37.1c2.6-2.9 6.2-4.9 11.9-4.9 9.1 0 15.4 10.2 15.4 23.3 0 13.4-6.2 23.4-15.4 23.4zM223.8 61.7l25.1-5.4V36l-25.1 5.3zM223.8 69.3h25.1v87.5h-25.1zM196.9 76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7 15.9-6.3 19-5.2v-23c-3.2-1.2-14.9-3.4-20.8 7.4zM146.9 47.6l-24.4 5.2-.1 80.1c0 14.8 11.1 25.7 25.9 25.7 8.2 0 14.2-1.5 17.5-3.3V135c-3.2 1.3-19 5.9-19-8.9V90.6h19V69.3h-19l.1-21.7zM79.3 94.7c0-3.9 3.2-5.4 8.5-5.4 7.6 0 17.2 2.3 24.8 6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6C67.5 67.6 54 78.2 54 95.9c0 27.6 38 23.2 38 35.1 0 4.6-4 6.1-9.6 6.1-8.3 0-18.9-3.4-27.3-8v23.8c9.3 4 18.7 5.7 27.3 5.7 20.8 0 35.1-10.3 35.1-28.2-.1-29.8-38.2-24.5-38.2-35.7z" class="st0"/>
+</svg>
diff --git a/frontend/src/components/features/payment/payment-form.tsx b/frontend/src/components/features/payment/payment-form.tsx
index bc337c05df..6a68cf4e5a 100644
--- a/frontend/src/components/features/payment/payment-form.tsx
+++ b/frontend/src/components/features/payment/payment-form.tsx
@@ -9,6 +9,7 @@ import { BrandButton } from "../settings/brand-button";
 import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import { amountIsValid } from "#/utils/amount-is-valid";
 import { I18nKey } from "#/i18n/declaration";
+import { PoweredByStripeTag } from "./powered-by-stripe-tag";
 
 export function PaymentForm() {
   const { t } = useTranslation();
@@ -79,6 +80,7 @@ export function PaymentForm() {
             {t(I18nKey.PAYMENT$ADD_CREDIT)}
           </BrandButton>
           {isPending && <LoadingSpinner size="small" />}
+          <PoweredByStripeTag />
         </div>
       </div>
     </form>
diff --git a/frontend/src/components/features/payment/powered-by-stripe-tag.tsx b/frontend/src/components/features/payment/powered-by-stripe-tag.tsx
new file mode 100644
index 0000000000..ac86903b41
--- /dev/null
+++ b/frontend/src/components/features/payment/powered-by-stripe-tag.tsx
@@ -0,0 +1,16 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import stripeLogo from "#/assets/stripe.svg";
+
+export function PoweredByStripeTag() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-row items-center">
+      <span className="text-medium font-semi-bold">
+        {t(I18nKey.BILLING$POWERED_BY)}
+      </span>
+      <img src={stripeLogo} alt="Stripe" className="h-8" />
+    </div>
+  );
+}
diff --git a/frontend/src/i18n/declaration.ts b/frontend/src/i18n/declaration.ts
index ecdb5682f6..104fdcd827 100644
--- a/frontend/src/i18n/declaration.ts
+++ b/frontend/src/i18n/declaration.ts
@@ -480,6 +480,7 @@ export enum I18nKey {
   BILLING$YOUVE_GOT_50 = "BILLING$YOUVE_GOT_50",
   BILLING$ERROR_WHILE_CREATING_SESSION = "BILLING$ERROR_WHILE_CREATING_SESSION",
   BILLING$CLAIM_YOUR_50 = "BILLING$CLAIM_YOUR_50",
+  BILLING$POWERED_BY = "BILLING$POWERED_BY",
   BILLING$PROCEED_TO_STRIPE = "BILLING$PROCEED_TO_STRIPE",
   BILLING$YOURE_IN = "BILLING$YOURE_IN",
   PAYMENT$ADD_FUNDS = "PAYMENT$ADD_FUNDS",
diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json
index 48edad19ff..b95d91f48f 100644
--- a/frontend/src/i18n/translation.json
+++ b/frontend/src/i18n/translation.json
@@ -7535,6 +7535,22 @@
         "de": "Fügen Sie eine Kreditkarte mit Stripe hinzu, um $50 zu erhalten. <b>Wir belasten Sie nicht ohne vorherige Zustimmung!</b>",
         "uk": "Додайте кредитну картку до Stripe, щоб отримати свої 50 доларів. <b>Ми не стягуватимемо з вас плату без попереднього запиту!</b>"
     },
+    "BILLING$POWERED_BY": {
+        "en": "Powered by",
+        "ja": "提供：",
+        "zh-CN": "技术支持：",
+        "zh-TW": "技術支援：",
+        "ko-KR": "제공: ",
+        "no": "Drevet av",
+        "it": "Offerto da",
+        "pt": "Oferecido por",
+        "es": "Ofrecido por",
+        "ar": "مشغل بواسطة",
+        "fr": "Propulsé par",
+        "tr": "Tarafından desteklenmektedir",
+        "de": "Bereitgestellt von",
+        "uk": "Працює на базі"
+    },
     "BILLING$PROCEED_TO_STRIPE": {
         "en": "Add Billing Info",
         "ja": "請求情報を追加",