Skip to content

fix: internationalize PayPal Setup component #27949

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
veeceey wants to merge 3 commits into
base: main
Choose a base branch
from
+44 −40
Open

fix: internationalize PayPal Setup component #27949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ba65c17
fix: internationalize PayPal Setup component
veeceey Feb 14, 2026
6b66060
fix: remove duplicate "resources" key in common.json
veeceey Feb 15, 2026
36963a6
Merge branch 'main' into fix/issue-27907-paypal-i18n
veeceey Feb 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 24 additions & 40 deletions apps/web/components/apps/paypal/Setup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@ export default function PayPalSetup() {
<div className="bg-default border-subtle m-auto max-w-[43em] overflow-auto rounded border pb-10 md:p-10">
<div className="ml-2 ltr:mr-2 rtl:ml-2 md:ml-5">
<div className="invisible md:visible">
<img className="h-11" src="/api/app-store/paypal/icon.svg" alt="Paypal Payment Logo" />
<p className="text-default mt-5 text-lg">Paypal</p>
<img className="h-11" src="/api/app-store/paypal/icon.svg" alt={t("paypal_payment_logo")} />
<p className="text-default mt-5 text-lg">PayPal</p>
</div>
<form autoComplete="off" className="mt-5">
<TextField
label="Client Id"
label={t("client_id")}
type="text"
name="client_id"
id="client_id"
Expand All @@ -55,7 +55,7 @@ export default function PayPalSetup() {
/>

<TextField
label="Secret Key"
label={t("secret_key")}
type="password"
name="access_token"
id="access_token"
Expand All @@ -65,7 +65,6 @@ export default function PayPalSetup() {
onChange={(e) => setNewSecretKey(e.target.value)}
/>

{/* Button to submit */}
<div className="mt-5 flex flex-row justify-end">
<Button
color="primary"
Expand All @@ -83,42 +82,33 @@ export default function PayPalSetup() {
</div>
</form>
<div>
<p className="text-lgf text-default mt-5 font-bold">Getting started with Paypal APP</p>
<p className="text-default font-semi mt-2">
Here in Cal.com we offer Paypal as one of our payment gateway. You can use your own Paypal
Business account to receive payments from your customers enabling and setting up price and
currency for each of your event types.
</p>
<p className="text-lgf text-default mt-5 font-bold">{t("paypal_getting_started_title")}</p>
<p className="text-default font-semi mt-2">{t("paypal_getting_started_description")}</p>

<p className="text-lgf text-default mt-5 inline-flex font-bold">
<CircleAlertIcon className="mr-2 mt-1 h-4 w-4" /> Important requirements:
<CircleAlertIcon className="mr-2 mt-1 h-4 w-4" /> {t("paypal_important_requirements")}
</p>
<ul className="text-default ml-1 mt-2 list-disc pl-2">
<li>Paypal Business account</li>
<li>Paypal Developer account</li>
<li>{t("paypal_business_account")}</li>
<li>{t("paypal_developer_account")}</li>
</ul>

<p className="text-default mb-2 mt-5 font-bold">Resources:</p>
<p className="text-default mb-2 mt-5 font-bold">{t("resources")}:</p>
<a
className="text-orange-600 underline"
target="_blank"
href="https://developer.paypal.com/api/rest/#link-getclientidandclientsecret"
rel="noreferrer">
Link to Paypal developer API REST Setup Guide:
{t("paypal_setup_guide_link")}{" "}
https://developer.paypal.com/api/rest/#link-getclientidandclientsecret
</a>

<p className="text-lgf text-default mt-5 font-bold">Setup instructions</p>
<p className="text-default font-semi mt-2">
Remember to only proceed with the following steps if your account has already been upgraded to
a business account. Also keep in mind that some of the following steps might be different
since Paypal offers different experiences based on your country.
</p>
<p className="text-lgf text-default mt-5 font-bold">{t("setup_instructions")}</p>
<p className="text-default font-semi mt-2">{t("paypal_setup_instructions_note")}</p>

<ol className="text-default ml-1 mt-5 list-decimal pl-2">
{/* @TODO: translate */}
<li>
Log into your Paypal Developer account and create a new app{" "}
{t("paypal_step_1")}{" "}
<a
target="_blank"
href="https://developer.paypal.com/dashboard/applications/live"
Expand All @@ -128,33 +118,27 @@ export default function PayPalSetup() {
</a>
.
</li>
<li>Choose a name for your application.</li>
<li>Click on the Create App button</li>
<li>{t("paypal_step_2")}</li>
<li>{t("paypal_step_3")}</li>

<li>
Go back to{" "}
{t("paypal_step_4_prefix")}{" "}
<a
className="text-orange-600 underline"
href="https://developer.paypal.com/dashboard/applications/live">
dashboard
{t("dashboard")}
</a>
, click on new app created.
{t("paypal_step_4_suffix")}
</li>
<li>Copy the Client ID and Secret Key using copy buttons one by one.</li>
<li>Paste them on the required field and save them.</li>
<li>You should be all setup after this.</li>
<li>{t("paypal_step_5")}</li>
<li>{t("paypal_step_6")}</li>
<li>{t("paypal_step_7")}</li>
</ol>
<p className="text-default mt-5 inline-flex font-bold">
<CircleAlertIcon className="mr-2 mt-1 h-4 w-4" />
Reminder:
</p>
<p className="text-default mt-2">
Our integration creates a specific webhook on your Paypal account that we use to report back
transactions to our system. If you delete this webhook, we will not be able to report back and
you should Uninstall and Install the app again for this to work again. Uninstalling the app
won&apos;t delete your current event type price/currency configuration but you would not be
able to receive bookings.
{t("reminder")}:
</p>
<p className="text-default mt-2">{t("paypal_reminder_text")}</p>
</div>
</div>
</div>
Expand Down
20 changes: 20 additions & 0 deletions apps/web/public/static/locales/en/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4631,5 +4631,25 @@
"last_6_months": "Last 6 months",
"last_12_months": "Last 12 months",
"calendar_events_disabled_video_limitation": "When calendar events are disabled, meeting links cannot be generated for apps whose link generation is tied to calendar event creation, for example, Google Meet and Microsoft Teams. Other video apps like Cal Video will continue to work.",
"secret_key": "Secret Key",
"paypal_payment_logo": "PayPal Payment Logo",
"paypal_getting_started_title": "Getting started with PayPal APP",
"paypal_getting_started_description": "Here in Cal.com we offer PayPal as one of our payment gateways. You can use your own PayPal Business account to receive payments from your customers by enabling and setting up price and currency for each of your event types.",
"paypal_important_requirements": "Important requirements:",
"paypal_business_account": "PayPal Business account",
"paypal_developer_account": "PayPal Developer account",
"paypal_setup_guide_link": "Link to PayPal developer API REST Setup Guide:",
"setup_instructions": "Setup instructions",
"paypal_setup_instructions_note": "Remember to only proceed with the following steps if your account has already been upgraded to a business account. Also keep in mind that some of the following steps might be different since PayPal offers different experiences based on your country.",
"paypal_step_1": "Log into your PayPal Developer account and create a new app",
"paypal_step_2": "Choose a name for your application.",
"paypal_step_3": "Click on the Create App button",
"paypal_step_4_prefix": "Go back to",
"paypal_step_4_suffix": ", click on new app created.",
"paypal_step_5": "Copy the Client ID and Secret Key using copy buttons one by one.",
"paypal_step_6": "Paste them on the required field and save them.",
"paypal_step_7": "You should be all set up after this.",
"paypal_reminder_text": "Our integration creates a specific webhook on your PayPal account that we use to report back transactions to our system. If you delete this webhook, we will not be able to report back and you should Uninstall and Install the app again for this to work again. Uninstalling the app won't delete your current event type price/currency configuration but you would not be able to receive bookings.",
"dashboard": "Dashboard",
"ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
}
Loading