Add redirect to error page if payment failed on checkout side

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],
  },
  ]}

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} />
  ))

clients/payment/src/graphql/unauthenticated.gql

@@ -107,6 +107,9 @@ mutation InitiateCardMerchantPayment(
 ) {
  unauthenticatedInitiateMerchantCardPaymentFromPaymentLink(input: $input) {
  __typename
+ ... on UnauthenticatedInitiateMerchantCardPaymentFromPaymentLinkSuccessPayload {
+ redirectUrl
+ }
  ... on Rejection {
  message
  }

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."
 }

clients/payment/src/pages/ErrorPage.tsx → 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>
  );
 };

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;
  },
  {},
  );

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",
  }),