diff --git a/app/routes/payment-choice.tsx b/app/routes/payment-choice.tsx
index 058db24..f2d9568 100644
--- a/app/routes/payment-choice.tsx
+++ b/app/routes/payment-choice.tsx
@@ -11,6 +11,11 @@ import { useDialPadContext } from '~/lib/context/dialpad'
 import { useEffect } from 'react'
 import type { WalletAddress } from '@interledger/open-payments'
 
+type LoaderData = {
+  receiver: string
+  assetCode?: string | null
+}
+
 export async function loader({ request }: LoaderFunctionArgs) {
   const searchParams = new URL(request.url).searchParams
   const receiver = searchParams.get('receiver') || ''
@@ -21,9 +26,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
     try {
       receiverWalletAddress = await getValidWalletAddress(receiver)
     } catch (error) {
-      throw new Error(
-        'Receiver Wallet Address is not valid. Please check and try again.'
-      )
+      // Prefer redirecting to home instead of throwing a 500.
+      // You can customize this behavior (flash message, query param, etc.)
+      return redirect('/', {
+        headers: { 'Set-Cookie': await destroySession(session) }
+      })
     }
   } else {
     return redirect('/', {
@@ -31,20 +38,27 @@ export async function loader({ request }: LoaderFunctionArgs) {
     })
   }
 
-  return json({
-    receiver: receiver,
-    assetCode: receiverWalletAddress.assetCode
-  } as const)
+  return json<LoaderData>({
+    receiver,
+    assetCode: receiverWalletAddress.assetCode ?? null
+  })
 }
 
 export default function PaymentChoice() {
-  const data = useLoaderData<typeof loader>()
+  const data = useLoaderData<typeof loader>() as LoaderData
 
   const { setAssetCode, amountValue } = useDialPadContext()
 
+  // only set the asset code when it's available and avoid rerunning every render
   useEffect(() => {
-    setAssetCode(data.assetCode)
-  })
+    if (data?.assetCode) {
+      setAssetCode(data.assetCode)
+    }
+  }, [data?.assetCode, setAssetCode])
+
+  const encodedReceiver = encodeURIComponent(data.receiver)
+  const encodedAmount = encodeURIComponent(String(amountValue ?? ''))
+  const hasAmount = amountValue !== undefined && amountValue !== null && String(amountValue).trim() !== ''
 
   return (
     <>
@@ -66,7 +80,7 @@ export default function PaymentChoice() {
         </div>
         <div className="flex sm:justify-center items-center sm:items-start mt-20 flex-col w-full gap-10 sm:flex-row h-full px-5">
           <Link
-            to={`/pay-with-interledger?receiver=${data.receiver}`}
+            to={`/pay-with-interledger?receiver=${encodedReceiver}`}
             className={`w-48 h-24 text-right ease-in-out transition-[box-shadow,transform] duration-200 aspect-[5/3] rounded-lg flex flex-col p-3 border-2
           hover:scale-105 focus:scale-105 hover:bg-green-2 hover:border-green-2`}
           >
@@ -77,18 +91,36 @@ export default function PaymentChoice() {
               Pay with Interledger
             </span>
           </Link>
-          <Link
-            to={`/checkout?receiver=${data.receiver}&amount=${amountValue}`}
-            className={`w-48 h-24 text-right ease-in-out transition-[box-shadow,transform] duration-200 aspect-[5/3] rounded-lg flex flex-col p-3 border-2
-          hover:scale-105 focus:scale-105 hover:bg-green-2 hover:border-green-2`}
-          >
-            <span className="h-6 flex justify-end text-[#222222]">
-              <Card />
-            </span>
-            <span className="text-md mt-6 font-semibold -tracking-wider text-green-1 text-xl">
-              Pay with card
-            </span>
-          </Link>
+
+          {/* If no amount is entered, disable the card checkout link */}
+          {hasAmount ? (
+            <Link
+              to={`/checkout?receiver=${encodedReceiver}&amount=${encodedAmount}`}
+              className={`w-48 h-24 text-right ease-in-out transition-[box-shadow,transform] duration-200 aspect-[5/3] rounded-lg flex flex-col p-3 border-2
+            hover:scale-105 focus:scale-105 hover:bg-green-2 hover:border-green-2`}
+            >
+              <span className="h-6 flex justify-end text-[#222222]">
+                <Card />
+              </span>
+              <span className="text-md mt-6 font-semibold -tracking-wider text-green-1 text-xl">
+                Pay with card
+              </span>
+            </Link>
+          ) : (
+            <div
+              role="button"
+              aria-disabled="true"
+              className="w-48 h-24 text-right ease-in-out transition-[box-shadow,transform] duration-200 aspect-[5/3] rounded-lg flex flex-col p-3 border-2 opacity-50 cursor-not-allowed"
+              title="Enter an amount to enable this option"
+            >
+              <span className="h-6 flex justify-end text-[#222222]">
+                <Card />
+              </span>
+              <span className="text-md mt-6 font-semibold -tracking-wider text-green-1 text-xl">
+                Pay with card
+              </span>
+            </div>
+          )}
         </div>
       </div>
     </>