diff --git a/packages/webapp/src/constants/preferencesMenu.tsx b/packages/webapp/src/constants/preferencesMenu.tsx
index ef53ccdf9..b6c474836 100644
--- a/packages/webapp/src/constants/preferencesMenu.tsx
+++ b/packages/webapp/src/constants/preferencesMenu.tsx
@@ -16,6 +16,10 @@ export default [
text: ,
href: '/preferences/users',
},
+ {
+ text: 'Payment Methods',
+ href: '/preferences/payment-methods'
+ },
{
text: ,
href: '/preferences/estimates',
diff --git a/packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx b/packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx
new file mode 100644
index 000000000..180bedda2
--- /dev/null
+++ b/packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx
@@ -0,0 +1,67 @@
+// @ts-nocheck
+import styled from 'styled-components';
+import { Box, Card, Group, Stack } from '@/components';
+import { StripeLogo } from '@/icons/StripeLogo';
+import { Button, Classes, Intent, Text } from '@blueprintjs/core';
+
+export default function PreferencesPaymentMethodsPage() {
+ return (
+
+
+ Accept payments from all the major debit and credit card networks
+ through the supported payment gateways.
+
+
+
+
+
+
+ );
+}
+
+function StripePaymentMethod() {
+ return (
+
+
+
+
+
+
+
+
+
+ Stripe is an online payment processing platform that allows you to
+ receive one-time and recurring payments securely from customers. It also
+ manages all your payments and makes reconciliation a breeze. You can set
+ it up in no time and get paid faster.
+
+
+
+
+ View Stripe's Transaction Fees
+
+
+
+ );
+}
+
+const PaymentMethodsRoot = styled(Box)`
+ witdth: 100%;
+ max-width: 700px;
+ margin: 20px;
+`;
+
+const PaymentDescription = styled(Text)`
+ font-size: 13px;
+ margin-top: 12px;
+`;
+
+const PaymentFooter = styled(Box)`
+ margin-top: 14px;
+ font-size: 12px;
+`;
diff --git a/packages/webapp/src/icons/StripeLogo.tsx b/packages/webapp/src/icons/StripeLogo.tsx
new file mode 100644
index 000000000..d8f5b8418
--- /dev/null
+++ b/packages/webapp/src/icons/StripeLogo.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+interface StripeLogoProps extends React.SVGProps {
+ width?: number;
+ height?: number;
+}
+
+export const StripeLogo: React.FC = ({
+ width = 70,
+ height = 30,
+ ...props
+}) => (
+
+);
diff --git a/packages/webapp/src/routes/preferences.tsx b/packages/webapp/src/routes/preferences.tsx
index a540ebd5a..e644b64ce 100644
--- a/packages/webapp/src/routes/preferences.tsx
+++ b/packages/webapp/src/routes/preferences.tsx
@@ -21,6 +21,13 @@ export const getPreferenceRoutes = () => [
),
exact: true,
},
+ {
+ path: `${BASE_URL}/payment-methods`,
+ component: lazy(
+ () => import('../containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage'),
+ ),
+ exact: true,
+ },
{
path: `${BASE_URL}/credit-notes`,
component: lazy(() =>