diff --git a/clients/payment/src/components/CardPayment.tsx b/clients/payment/src/components/CardPayment.tsx
index b0912d5f1..446099baa 100644
--- a/clients/payment/src/components/CardPayment.tsx
+++ b/clients/payment/src/components/CardPayment.tsx
@@ -20,7 +20,6 @@ import {
   InitiateCardMerchantPaymentDocument,
 } from "../graphql/unauthenticated";
 import { t } from "../utils/i18n";
-import { Router } from "../utils/routes";
 import { CarteBancaireLogo, MaestroLogo, MastercardLogo, VisaLogo } from "./CardLogos";
 
 const styles = StyleSheet.create({
@@ -202,8 +201,8 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)
             .mapOk(data => data.unauthenticatedInitiateMerchantCardPaymentFromPaymentLink)
             .mapOkToResult(filterRejectionsToResult),
         )
-        .tapOk(() => {
-          Router.replace("PaymentSuccess", { paymentLinkId: paymentLink.id });
+        .tapOk(({ redirectUrl }) => {
+          window.location.replace(redirectUrl);
         })
         .tapError(error => {
           showToast({ variant: "error", error, title: translateError(error) });
@@ -241,7 +240,10 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)
                     <View
                       style={[
                         styles.cardLogo,
-                        (isPaymentMethodValid === false || cardNumberState !== "valid") && {
+                        (isPaymentMethodValid === false ||
+                          cardNumberState === "cardNotSupported" ||
+                          cardNumberState === "empty" ||
+                          cardNumberState === "invalid") && {
                           borderColor: colors.negative[500],
                         },
                       ]}
@@ -253,7 +255,10 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)
                     <View
                       style={[
                         styles.cardLogo,
-                        (isPaymentMethodValid === false || cardNumberState !== "valid") && {
+                        (isPaymentMethodValid === false ||
+                          cardNumberState === "cardNotSupported" ||
+                          cardNumberState === "empty" ||
+                          cardNumberState === "invalid") && {
                           borderColor: colors.negative[500],
                         },
                       ]}
@@ -265,7 +270,10 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)
                     <View
                       style={[
                         styles.cardLogo,
-                        (isPaymentMethodValid === false || cardNumberState !== "valid") && {
+                        (isPaymentMethodValid === false ||
+                          cardNumberState === "cardNotSupported" ||
+                          cardNumberState === "empty" ||
+                          cardNumberState === "invalid") && {
                           borderColor: colors.negative[500],
                         },
                       ]}
@@ -277,7 +285,10 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)
                     <View
                       style={[
                         styles.cardLogo,
-                        (isPaymentMethodValid === false || cardNumberState !== "valid") && {
+                        (isPaymentMethodValid === false ||
+                          cardNumberState === "cardNotSupported" ||
+                          cardNumberState === "empty" ||
+                          cardNumberState === "invalid") && {
                           borderColor: colors.negative[500],
                         },
                       ]}
diff --git a/clients/payment/src/components/PaymentArea.tsx b/clients/payment/src/components/PaymentArea.tsx
index ee7a4552c..7a28ead62 100644
--- a/clients/payment/src/components/PaymentArea.tsx
+++ b/clients/payment/src/components/PaymentArea.tsx
@@ -19,6 +19,7 @@ import { useResponsive } from "@swan-io/lake/src/hooks/useResponsive";
 import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
 import { useMemo, useState } from "react";
 import { GetMerchantPaymentLinkDocument } from "../graphql/unauthenticated";
+import { CardErrorPage } from "../pages/CardErrorPage";
 import { ExpiredPage } from "../pages/ExpiredPage";
 import { NotFoundPage } from "../pages/NotFoundPage";
 import { PaymentPage } from "../pages/PaymentPage";
@@ -138,19 +139,26 @@ export const PaymentArea = ({ paymentLinkId }: Props) => {
 
                 <Space height={24} />
 
-                {match({ route: route?.name, mandateUrlStatus })
+                {match({ route: route?.name, params: route?.params, mandateUrlStatus })
                   .with({ route: "PaymentForm", mandateUrlStatus: "Active" }, () =>
-                    match(merchantPaymentLink.paymentMethods)
-                      .with([P.nonNullable, ...P.array()], merchantPaymentMethods => (
-                        <PaymentPage
-                          merchantPaymentMethods={merchantPaymentMethods}
-                          paymentLink={merchantPaymentLink}
-                          setMandateUrl={setMandateUrl}
-                          nonEeaCountries={nonEEACountries}
-                        />
-                      ))
+                    match({
+                      paymentMethods: merchantPaymentLink.paymentMethods,
+                      params: route?.params,
+                    })
+                      .with(
+                        { paymentMethods: [P.nonNullable, ...P.array()] },
+                        ({ paymentMethods }) => (
+                          <PaymentPage
+                            merchantPaymentMethods={paymentMethods}
+                            paymentLink={merchantPaymentLink}
+                            setMandateUrl={setMandateUrl}
+                            nonEeaCountries={nonEEACountries}
+                          />
+                        ),
+                      )
                       .otherwise(() => <ErrorView />),
                   )
+                  .with({ params: { error: "true" } }, () => <CardErrorPage />)
                   .with({ route: "PaymentSuccess", mandateUrlStatus: "Completed" }, () => (
                     <SuccessPage mandateUrl={mandateUrl} />
                   ))
diff --git a/clients/payment/src/graphql/unauthenticated.gql b/clients/payment/src/graphql/unauthenticated.gql
index da81ad81c..5cf534b21 100644
--- a/clients/payment/src/graphql/unauthenticated.gql
+++ b/clients/payment/src/graphql/unauthenticated.gql
@@ -107,6 +107,9 @@ mutation InitiateCardMerchantPayment(
 ) {
   unauthenticatedInitiateMerchantCardPaymentFromPaymentLink(input: $input) {
     __typename
+    ... on UnauthenticatedInitiateMerchantCardPaymentFromPaymentLinkSuccessPayload {
+      redirectUrl
+    }
     ... on Rejection {
       message
     }
diff --git a/clients/payment/src/locales/en.json b/clients/payment/src/locales/en.json
index 0063fe9d4..714d82c34 100644
--- a/clients/payment/src/locales/en.json
+++ b/clients/payment/src/locales/en.json
@@ -11,11 +11,12 @@
   "paymentLink.card.cvv": "CVV",
   "paymentLink.cardNumberRequired": "Your card number is required",
   "paymentLink.expiryDateRequired": "Your expiry date is required",
-  "paymentLink.cardNotSupported": "American Express cards are not supported. Please try with another card.",
+  "paymentLink.cardNotSupported": "Your card isn't supported. Please try with another card.",
   "paymentLink.cvvRequired": "Your CVV is required",
   "paymentLink.city": "City",
   "paymentLink.country": "Country",
-  "paymentLink.error.subtitle": "We couldn't set up your Direct Debit with Swan.\n Please try again or contact the support system.",
+  "paymentLink.error.retry": "Try again",
+  "paymentLink.error.subtitle": "We couldn't set up your payment with Swan.\n Please try again or contact the Customer Support.",
   "paymentLink.error.title": "Something went wrong",
   "paymentLink.iban": "IBAN",
   "paymentLink.invalidCardNumber": "Invalid card number",
@@ -27,7 +28,7 @@
   "paymentLink.postalCode": "Postal code",
   "paymentLink.poweredBySwan": "Powered by",
   "paymentLink.state": "State",
-  "paymentLink.success.subtitle": "Your payment setup was successful.\nYou can close this window.",
+  "paymentLink.success.subtitle": "Your payment was successful.\nYou can close this window.",
   "paymentLink.success.title": "Thanks!",
-  "paymentLink.termsAndConditions": "By clicking Pay, you're agreeing a direct debit mandate electronically. The mandate authorizes: (1) {merchantName} to share payment information with Swan, and (2) Swan to debit your account accordingly. Refund requests will be processed according to your bank's terms and conditions."
+  "paymentLink.termsAndConditions": "By clicking Pay, you're agreeing to a direct debit mandate electronically. The mandate authorizes: (1) {merchantName} to share payment information with Swan, and (2) Swan to debit your account accordingly. Refund requests will be processed according to your bank's terms and conditions."
 }
diff --git a/clients/payment/src/pages/ErrorPage.tsx b/clients/payment/src/pages/CardErrorPage.tsx
similarity index 90%
rename from clients/payment/src/pages/ErrorPage.tsx
rename to clients/payment/src/pages/CardErrorPage.tsx
index 9e3bf8023..19ac814d1 100644
--- a/clients/payment/src/pages/ErrorPage.tsx
+++ b/clients/payment/src/pages/CardErrorPage.tsx
@@ -19,7 +19,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export const ErrorPage = () => {
+type CardErrorPage = {
+  paymentLinkId: string;
+};
+export const CardErrorPage = () => {
   return (
     <Box alignItems="center" justifyContent="center" style={styles.fill}>
       <BorderedIcon name={"lake-warning"} color="negative" size={70} padding={16} />
@@ -32,6 +35,8 @@ export const ErrorPage = () => {
       <LakeText align="center" color={colors.gray[500]} style={styles.subtitle}>
         {t("paymentLink.error.subtitle")}
       </LakeText>
+
+      <Space height={32} />
     </Box>
   );
 };
diff --git a/clients/payment/src/pages/PaymentPage.tsx b/clients/payment/src/pages/PaymentPage.tsx
index e60a901be..2d552dcc0 100644
--- a/clients/payment/src/pages/PaymentPage.tsx
+++ b/clients/payment/src/pages/PaymentPage.tsx
@@ -51,11 +51,10 @@ export const PaymentPage = ({
 
   const methodIds = merchantPaymentMethods.reduce<Partial<Record<SupportedMethodType, string>>>(
     (acc, { type, id }) => {
-      match(type)
-        .with("Card", () => (acc["Card"] = id))
-        .with("SepaDirectDebitB2b", "SepaDirectDebitCore", () => (acc["DirectDebit"] = id))
+      return match(type)
+        .with("Card", () => ({ ...acc, Card: id }))
+        .with("SepaDirectDebitB2b", "SepaDirectDebitCore", () => ({ ...acc, DirectDebit: id }))
         .otherwise(() => acc);
-      return acc;
     },
     {},
   );
diff --git a/clients/payment/src/utils/routes.ts b/clients/payment/src/utils/routes.ts
index d7e29e041..a95eb014e 100644
--- a/clients/payment/src/utils/routes.ts
+++ b/clients/payment/src/utils/routes.ts
@@ -3,7 +3,7 @@ import { createGroup, createRouter } from "@swan-io/chicane";
 export const Router = createRouter(
   createGroup("Payment", "/:paymentLinkId", {
     Area: "/*",
-    Form: "/",
+    Form: "/?:error{true}",
     Success: "/success",
     Error: "/error",
   }),