diff --git a/clients/payment/package.json b/clients/payment/package.json index 102a42fcc..621361d85 100644 --- a/clients/payment/package.json +++ b/clients/payment/package.json @@ -21,6 +21,7 @@ "@swan-io/shared-business": "4.9.0", "core-js": "3.35.1", "dayjs": "1.11.10", + "iban": "0.0.14", "nanoid": "5.0.5", "react": "18.2.0", "react-dom": "18.2.0", @@ -31,6 +32,7 @@ "wonka": "6.3.4" }, "devDependencies": { + "@types/iban": "0.0.35", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", "@types/react-native": "0.72.8", diff --git a/clients/payment/src/pages/PaymentPage.tsx b/clients/payment/src/pages/PaymentPage.tsx index a72e9e8a4..6c05275e7 100644 --- a/clients/payment/src/pages/PaymentPage.tsx +++ b/clients/payment/src/pages/PaymentPage.tsx @@ -20,6 +20,7 @@ import { validateIban, validateRequired, } from "@swan-io/shared-business/src/utils/validation"; +import { electronicFormat } from "iban"; import { StyleSheet } from "react-native"; import { combineValidators, hasDefinedKeys, useForm } from "react-ux-form"; import { P, match } from "ts-pattern"; @@ -29,8 +30,9 @@ import { AddSepaDirectDebitPaymentMandateFromPaymentLinkDocument, GetMerchantPaymentLinkQuery, InitiateSddPaymentCollectionDocument, + Language, } from "../graphql/unauthenticated"; -import { t } from "../utils/i18n"; +import { locale, t } from "../utils/i18n"; const styles = StyleSheet.create({ segmentedControlDesktop: { @@ -150,7 +152,7 @@ export const PaymentPage = ({ paymentLink, setMandateUrl, nonEeaCountries }: Pro input: { paymentLinkId: paymentLink.id, debtor: { - iban, + iban: electronicFormat(iban), name, address: { addressLine1, @@ -159,6 +161,7 @@ export const PaymentPage = ({ paymentLink, setMandateUrl, nonEeaCountries }: Pro postalCode, }, }, + language: locale.language as Language, }, }) .mapOk(data => data.addSepaDirectDebitPaymentMandateFromPaymentLink)