fix(payment): keep character and mobile actions visible

src/app/_components/payment/__tests__/external-browser-checkout-button.test.tsx

@@ -49,6 +49,7 @@ describe("ExternalBrowserCheckoutButton", () => {
     await act(async () => {
       root.render(
         <ExternalBrowserCheckoutButton
+          characterSlug="maya"
           checkoutIntent={{
             planId: "vip_monthly",
             autoRenew: true,
@@ -70,7 +71,7 @@ describe("ExternalBrowserCheckoutButton", () => {
       commercialOfferId: "offer-1",
     });
     expect(openUrlWithExternalBrowser).toHaveBeenCalledWith(
-      "https://cozsweet.com/external-entry?target=checkout&handoffToken=opaque",
+      "https://cozsweet.com/external-entry?target=checkout&handoffToken=opaque&character=maya",
     );
   });
 });

src/app/_components/payment/external-browser-checkout-button.tsx

@@ -3,6 +3,10 @@
 import { useState, useSyncExternalStore } from "react";
 
 import type { CheckoutIntent } from "@/data/schemas/auth";
+import {
+  DEFAULT_CHARACTER_SLUG,
+  getCharacterBySlug,
+} from "@/data/constants/character";
 import { createCheckoutHandoff } from "@/lib/auth/checkout_handoff";
 import { BrowserDetector } from "@/utils/browser-detect";
 import { ExceptionHandler } from "@/core/errors";
@@ -12,11 +16,13 @@ import { UrlLauncherUtil } from "@/utils/url-launcher-util";
 export interface ExternalBrowserCheckoutButtonProps {
   checkoutIntent: CheckoutIntent;
   disabled?: boolean;
+  characterSlug?: string;
 }
 
 export function ExternalBrowserCheckoutButton({
   checkoutIntent,
   disabled = false,
+  characterSlug = DEFAULT_CHARACTER_SLUG,
 }: ExternalBrowserCheckoutButtonProps) {
   const isFacebookBrowser = useSyncExternalStore(
     () => () => undefined,
@@ -43,11 +49,28 @@ export function ExternalBrowserCheckoutButton({
       setIsOpening(false);
       return;
     }
-    UrlLauncherUtil.openUrlWithExternalBrowser(result.data.externalUrl);
+    try {
+      const verifiedCharacter =
+        getCharacterBySlug(characterSlug)?.slug ?? DEFAULT_CHARACTER_SLUG;
+      const externalUrl = new URL(
+        result.data.externalUrl,
+        window.location.origin,
+      );
+      externalUrl.searchParams.set("character", verifiedCharacter);
+      UrlLauncherUtil.openUrlWithExternalBrowser(externalUrl.toString());
+    } catch (error) {
+      setErrorMessage(
+        ExceptionHandler.message(
+          error,
+          "Could not open this checkout in your browser. Please try again.",
+        ),
+      );
+      setIsOpening(false);
+    }
   };
 
   return (
-    <div className="mt-2 w-full text-center">
+    <div className="mb-2 w-full text-center">
       <button
         type="button"
         className="min-h-11 w-full cursor-pointer rounded-full border border-black/15 bg-white px-4 py-2.5 text-sm font-semibold text-text-foreground disabled:cursor-not-allowed disabled:opacity-55"