diff --git a/src/actions/__tests__/payment-profile-actions.test.js b/src/actions/__tests__/payment-profile-actions.test.js
new file mode 100644
index 000000000..7d309bebf
--- /dev/null
+++ b/src/actions/__tests__/payment-profile-actions.test.js
@@ -0,0 +1,157 @@
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import flushPromises from "flush-promises";
+import { getRequest } from "openstack-uicore-foundation/lib/utils/actions";
+import { getPaymentProfiles } from "../ticket-actions";
+import * as methods from "../../utils/methods";
+
+jest.mock("openstack-uicore-foundation/lib/utils/actions", () => ({
+  __esModule: true,
+  ...jest.requireActual("openstack-uicore-foundation/lib/utils/actions"),
+  getRequest: jest.fn()
+}));
+
+describe("getPaymentProfiles", () => {
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
+  const SUMMIT_ID = 42;
+  let store;
+  let capturedParams;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    capturedParams = null;
+    store = mockStore({
+      currentSummitState: { currentSummit: { id: SUMMIT_ID } }
+    });
+    jest.spyOn(methods, "getAccessTokenSafely").mockResolvedValue("TOKEN");
+    window.PURCHASES_API_URL = "https://purchases.example.com";
+
+    getRequest.mockImplementation(
+      (reqAC, recAC, url, errHandler, extraPayload) => (params) => {
+        capturedParams = params;
+        return (dispatch) => {
+          dispatch(reqAC(extraPayload || {}));
+          return Promise.resolve().then(() => {
+            dispatch(
+              recAC({
+                response: {
+                  data: [],
+                  total: 0,
+                  current_page: 1,
+                  last_page: 1
+                }
+              })
+            );
+          });
+        };
+      }
+    );
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    delete window.PURCHASES_API_URL;
+  });
+
+  test("dispatches START_LOADING, REQUEST, RECEIVE, STOP_LOADING", async () => {
+    store.dispatch(getPaymentProfiles());
+    await flushPromises();
+
+    const types = store.getActions().map((a) => a.type);
+    expect(types).toEqual([
+      "START_LOADING",
+      "REQUEST_PAYMENT_PROFILES",
+      "RECEIVE_PAYMENT_PROFILES",
+      "STOP_LOADING"
+    ]);
+    expect(getRequest).toHaveBeenCalledTimes(1);
+  });
+
+  test("builds correct summit URL", async () => {
+    store.dispatch(getPaymentProfiles());
+    await flushPromises();
+
+    const url = getRequest.mock.calls[0][2];
+    expect(url).toBe(
+      `https://purchases.example.com/api/v1/summits/${SUMMIT_ID}/payment-profiles`
+    );
+  });
+
+  test.each(["", undefined])("omits filter[] when term is %p", async (term) => {
+    store.dispatch(getPaymentProfiles(term));
+    await flushPromises();
+
+    expect(capturedParams).not.toHaveProperty("filter[]");
+  });
+
+  test("adds provider and application_type string filters for non-numeric term", async () => {
+    store.dispatch(getPaymentProfiles("stripe"));
+    await flushPromises();
+
+    expect(capturedParams["filter[]"]).toEqual([
+      "provider=@stripe,application_type=@stripe"
+    ]);
+  });
+
+  test("adds exact-match id filter alongside string filters for numeric term", async () => {
+    store.dispatch(getPaymentProfiles("42"));
+    await flushPromises();
+
+    expect(capturedParams["filter[]"]).toEqual([
+      "provider=@42,application_type=@42",
+      "id==42"
+    ]);
+  });
+
+  test.each([
+    ["foo,bar", "provider=@foo\\,bar,application_type=@foo\\,bar"],
+    ["foo;bar", "provider=@foo\\;bar,application_type=@foo\\;bar"]
+  ])(
+    "escapeFilterValue escapes special chars in %p",
+    async (term, expected) => {
+      store.dispatch(getPaymentProfiles(term));
+      await flushPromises();
+
+      expect(capturedParams["filter[]"]).toEqual([expected]);
+    }
+  );
+
+  test("REQUEST_PAYMENT_PROFILES payload includes term, page, perPage, order, orderDir", async () => {
+    store.dispatch(getPaymentProfiles("stripe", 2, 25, "provider", 0));
+    await flushPromises();
+
+    const extraPayload = getRequest.mock.calls[0][4];
+    expect(extraPayload).toEqual({
+      term: "stripe",
+      page: 2,
+      perPage: 25,
+      order: "provider",
+      orderDir: 0
+    });
+  });
+
+  test("params include access_token, page, and per_page", async () => {
+    store.dispatch(getPaymentProfiles("", 3, 20));
+    await flushPromises();
+
+    expect(capturedParams).toMatchObject({
+      access_token: "TOKEN",
+      page: 3,
+      per_page: 20
+    });
+  });
+
+  test.each([
+    [1, "+provider"],
+    [0, "-provider"]
+  ])(
+    "order param uses correct prefix for orderDir %i",
+    async (orderDir, expected) => {
+      store.dispatch(getPaymentProfiles("", 1, 10, "provider", orderDir));
+      await flushPromises();
+
+      expect(capturedParams.order).toBe(expected);
+    }
+  );
+});
diff --git a/src/actions/ticket-actions.js b/src/actions/ticket-actions.js
index 3730f26ce..444fe6480 100644
--- a/src/actions/ticket-actions.js
+++ b/src/actions/ticket-actions.js
@@ -47,6 +47,7 @@ import {
   EXPORT_PAGE_SIZE_100,
   TEN
 } from "../utils/constants";
+import { snackbarErrorHandler, snackbarSuccessHandler } from "./base-actions";
 
 export const REQUEST_TICKETS = "REQUEST_TICKETS";
 export const RECEIVE_TICKETS = "RECEIVE_TICKETS";
@@ -1186,6 +1187,7 @@ export const deleteRefundPolicy =
 
 export const getPaymentProfiles =
   (
+    term = "",
     page = DEFAULT_CURRENT_PAGE,
     perPage = DEFAULT_PER_PAGE,
     order = "id",
@@ -1195,6 +1197,7 @@ export const getPaymentProfiles =
     const { currentSummitState } = getState();
     const accessToken = await getAccessTokenSafely();
     const { currentSummit } = currentSummitState;
+    const filter = [];
 
     dispatch(startLoading());
 
@@ -1204,19 +1207,32 @@ export const getPaymentProfiles =
       access_token: accessToken
     };
 
+    if (term) {
+      const escapedTerm = escapeFilterValue(term);
+      filter.push(`provider=@${escapedTerm},application_type=@${escapedTerm}`);
+      const numericId = parseInt(escapedTerm, 10);
+      if (!Number.isNaN(numericId)) {
+        filter.push(`id==${numericId}`);
+      }
+    }
+
     // order
     if (order != null && orderDir != null) {
       const orderDirSign = orderDir === DEFAULT_ORDER_DIR ? "+" : "-";
       params.order = `${orderDirSign}${order}`;
     }
 
+    if (filter.length > 0) {
+      params["filter[]"] = filter;
+    }
+
     return getRequest(
       createAction(REQUEST_PAYMENT_PROFILES),
       createAction(RECEIVE_PAYMENT_PROFILES),
 
       `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/payment-profiles`,
-      authErrorHandler,
-      { page, perPage, order, orderDir }
+      snackbarErrorHandler,
+      { term, page, perPage, order, orderDir }
     )(params)(dispatch).then(() => {
       dispatch(stopLoading());
     });
@@ -1227,49 +1243,48 @@ export const savePaymentProfile = (entity) => async (dispatch, getState) => {
   const accessToken = await getAccessTokenSafely();
   const { currentSummit } = currentSummitState;
 
+  dispatch(startLoading());
+
   const params = {
     access_token: accessToken
   };
 
   if (entity.id) {
-    putRequest(
+    return putRequest(
       createAction(UPDATE_PAYMENT_PROFILE),
       createAction(PAYMENT_PROFILE_UPDATED),
       `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/payment-profiles/${entity.id}`,
       entity,
-      authErrorHandler,
+      snackbarErrorHandler,
       entity
-    )(params)(dispatch).then(() => {
-      dispatch(
-        showSuccessMessage(
-          T.translate("edit_payment_profile.payment_profile_saved")
-        )
-      );
-    });
-    return;
+    )(params)(dispatch)
+      .then(() => {
+        dispatch(
+          snackbarSuccessHandler({
+            title: T.translate("general.success"),
+            html: T.translate("edit_payment_profile.payment_profile_saved")
+          })
+        );
+      })
+      .finally(() => dispatch(stopLoading()));
   }
 
-  const success_message = {
-    title: T.translate("general.done"),
-    html: T.translate("edit_payment_profile.payment_profile_created"),
-    type: "success"
-  };
-
-  postRequest(
+  return postRequest(
     createAction(UPDATE_PAYMENT_PROFILE),
     createAction(PAYMENT_PROFILE_ADDED),
     `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/payment-profiles`,
     entity,
-    authErrorHandler
-  )(params)(dispatch).then((payload) => {
-    dispatch(
-      showMessage(success_message, () => {
-        history.push(
-          `/app/summits/${currentSummit.id}/payment-profiles/${payload.response.id}`
-        );
-      })
-    );
-  });
+    snackbarErrorHandler
+  )(params)(dispatch)
+    .then(() => {
+      dispatch(
+        snackbarSuccessHandler({
+          title: T.translate("general.success"),
+          html: T.translate("edit_payment_profile.payment_profile_created")
+        })
+      );
+    })
+    .finally(() => dispatch(stopLoading()));
 };
 
 export const deletePaymentProfile =
@@ -1287,7 +1302,7 @@ export const deletePaymentProfile =
       createAction(PAYMENT_PROFILE_DELETED)({ paymentProfileId }),
       `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/payment-profiles/${paymentProfileId}`,
       null,
-      authErrorHandler
+      snackbarErrorHandler
     )(params)(dispatch).then(() => {
       dispatch(stopLoading());
     });
@@ -1309,7 +1324,7 @@ export const getPaymentProfile =
       null,
       createAction(RECEIVE_PAYMENT_PROFILE),
       `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/payment-profiles/${paymentProfileId}`,
-      authErrorHandler
+      snackbarErrorHandler
     )(params)(dispatch).then(() => {
       dispatch(stopLoading());
     });
@@ -1347,7 +1362,7 @@ export const getPaymentFeeTypes =
       createAction(RECEIVE_PAYMENT_FEE_TYPES),
 
       `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/payment-profiles/${paymentProfileId}/fee-types`,
-      authErrorHandler,
+      snackbarErrorHandler,
       { page, perPage, order, orderDir }
     )(params)(dispatch).then(() => {
       dispatch(stopLoading());
@@ -1366,45 +1381,44 @@ export const savePaymentFeeType = (entity) => async (dispatch, getState) => {
     access_token: accessToken
   };
 
+  dispatch(startLoading());
+
   if (entity.id) {
-    putRequest(
+    return putRequest(
       createAction(UPDATE_PAYMENT_FEE_TYPE),
       createAction(PAYMENT_FEE_TYPE_UPDATED),
       `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/payment-profiles/${paymentProfileId}/fee-types/${entity.id}`,
       entity,
-      authErrorHandler,
+      snackbarErrorHandler,
       entity
-    )(params)(dispatch).then(() => {
-      dispatch(
-        showSuccessMessage(
-          T.translate("edit_payment_fee_type.payment_fee_type_saved")
-        )
-      );
-    });
-    return;
+    )(params)(dispatch)
+      .then(() => {
+        dispatch(
+          snackbarSuccessHandler({
+            title: T.translate("general.success"),
+            html: T.translate("edit_payment_fee_type.payment_fee_type_saved")
+          })
+        );
+      })
+      .finally(() => dispatch(stopLoading()));
   }
 
-  const success_message = {
-    title: T.translate("general.done"),
-    html: T.translate("edit_payment_fee_type.payment_fee_type_created"),
-    type: "success"
-  };
-
-  postRequest(
+  return postRequest(
     createAction(UPDATE_PAYMENT_FEE_TYPE),
     createAction(PAYMENT_FEE_TYPE_ADDED),
     `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/payment-profiles/${paymentProfileId}/fee-types`,
     entity,
-    authErrorHandler
-  )(params)(dispatch).then(() => {
-    dispatch(
-      showMessage(success_message, () => {
-        history.push(
-          `/app/summits/${currentSummit.id}/payment-profiles/${paymentProfileId}`
-        );
-      })
-    );
-  });
+    snackbarErrorHandler
+  )(params)(dispatch)
+    .then(() => {
+      dispatch(
+        snackbarSuccessHandler({
+          title: T.translate("general.success"),
+          html: T.translate("edit_payment_fee_type.payment_fee_type_created")
+        })
+      );
+    })
+    .finally(() => dispatch(stopLoading()));
 };
 
 export const deletePaymentFeeType =
@@ -1425,7 +1439,7 @@ export const deletePaymentFeeType =
       createAction(PAYMENT_FEE_TYPE_DELETED)({ paymentFeeTypeId }),
       `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/payment-profiles/${paymentProfileId}/fee-types/${paymentFeeTypeId}`,
       null,
-      authErrorHandler
+      snackbarErrorHandler
     )(params)(dispatch).then(() => {
       dispatch(stopLoading());
     });
@@ -1450,7 +1464,7 @@ export const getPaymentFeeType =
       null,
       createAction(RECEIVE_PAYMENT_FEE_TYPE),
       `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/payment-profiles/${paymentProfileId}/fee-types/${paymentFeeTypeId}`,
-      authErrorHandler
+      snackbarErrorHandler
     )(params)(dispatch).then(() => {
       dispatch(stopLoading());
     });
diff --git a/src/components/forms/payment-fee-type-form.js b/src/components/forms/payment-fee-type-form.js
deleted file mode 100644
index 544987e5d..000000000
--- a/src/components/forms/payment-fee-type-form.js
+++ /dev/null
@@ -1,220 +0,0 @@
-/**
- * Copyright 2020 OpenStack Foundation
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * */
-
-import React from "react";
-import T from "i18n-react/dist/i18n-react";
-import Input from "openstack-uicore-foundation/lib/components/inputs/text-input"
-import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown";
-import { isEmpty, scrollToError, shallowEqual } from "../../utils/methods";
-import { MILLISECONDS_IN_SECOND } from "../../utils/constants";
-
-class PaymentFeeTypeForm extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      entity: { ...props.entity },
-      errors: props.errors
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const state = {};
-    scrollToError(this.props.errors);
-
-    if (!shallowEqual(prevProps.entity, this.props.entity)) {
-      state.entity = { ...this.props.entity };
-      state.errors = {};
-    }
-
-    if (!shallowEqual(prevProps.errors, this.props.errors)) {
-      state.errors = { ...this.props.errors };
-    }
-
-    if (!isEmpty(state)) {
-      this.setState({ ...this.state, ...state });
-    }
-  }
-
-  handleChange(ev) {
-    const entity = { ...this.state.entity };
-    const errors = { ...this.state.errors };
-    let { value, id } = ev.target;
-
-    if (ev.target.type === "checkbox") {
-      value = ev.target.checked;
-    }
-
-    if (ev.target.type === "datetime") {
-      value = value.valueOf() / MILLISECONDS_IN_SECOND;
-    }
-
-    errors[id] = "";
-    entity[id] = value;
-    this.setState({ entity, errors });
-  }
-
-  handleSubmit(ev) {
-    ev.preventDefault();
-    this.props.onSubmit(this.state.entity);
-  }
-
-  hasErrors(field) {
-    const { errors } = this.state;
-    if (field in errors) {
-      return errors[field];
-    }
-
-    return "";
-  }
-
-  render() {
-    const { entity } = this.state;
-
-    const payment_type_fee_kind_ddl = [
-      { label: "Rate", value: "Rate" },
-      { label: "Amount", value: "Amount" }
-    ];
-
-    const payment_type_fee_method = [
-      // # Cards & wallets
-      { label: "Card", value: "card" },
-      { label: "Link", value: "link" },
-      { label: "CashApp", value: "cashapp" },
-      { label: "Paypal", value: "paypal" },
-      // # Bank debits
-      { label: "UsBankAccount", value: "us_bank_account" },
-      { label: "SepaDebit", value: "sepa_debit" },
-      { label: "BacsDebit", value: "bacs_debit" },
-      { label: "AuBecsDebit", value: "au_becs_debit" },
-      { label: "AcssDebit", value: "acss_debit" },
-      // # Bank redirects
-      { label: "Ideal", value: "ideal" },
-      { label: "Sofort", value: "sofort" },
-      { label: "Bancontact", value: "bancontact" },
-      { label: "Giropay", value: "giropay" },
-      { label: "Eps", value: "eps" },
-      { label: "P24", value: "p24" },
-      { label: "Blik", value: "blik" },
-      // # Buy Now, Pay Later
-      { label: "Klarna", value: "klarna" },
-      { label: "AfterpayClearpay", value: "afterpay_clearpay" },
-      { label: "Affirm", value: "affirm" },
-      // # Regional / other
-      { label: "Alipay", value: "alipay" },
-      { label: "WechatPay", value: "wechat_pay" },
-      { label: "Grabpay", value: "grabpay" },
-      { label: "Oxxo", value: "oxxo" },
-      { label: "Boleto", value: "boleto" },
-      { label: "Konbini", value: "konbini" }
-    ];
-
-    return (
-      <form className="payment-profile-form">
-        <input type="hidden" id="id" value={entity.id} />
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.payment_type_fee_name")}
-            </label>
-            <Input
-              className="form-control"
-              id="name"
-              onChange={this.handleChange}
-              value={entity.name}
-            />
-          </div>
-          <div className="col-md-4">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.payment_type_fee_kind")}
-            </label>
-            <Dropdown
-              id="kind"
-              value={entity.kind}
-              onChange={this.handleChange}
-              options={payment_type_fee_kind_ddl}
-            />
-          </div>
-          <div className="col-md-4">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.payment_type_fee_method")}
-            </label>
-            <Dropdown
-              id="payment_method"
-              value={entity.payment_method}
-              onChange={this.handleChange}
-              options={payment_type_fee_method}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.payment_type_fee_value")}
-            </label>
-            <Input
-              className="form-control"
-              id="value"
-              onChange={this.handleChange}
-              value={entity.value}
-            />
-          </div>
-          <div className="col-md-4">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.payment_type_fee_max_cents")}
-            </label>
-            <Input
-              className="form-control"
-              id="max_cents"
-              onChange={this.handleChange}
-              value={entity.max_cents}
-            />
-          </div>
-          <div className="col-md-4">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.payment_type_fee_min_cents")}
-            </label>
-            <Input
-              className="form-control"
-              id="min_cents"
-              onChange={this.handleChange}
-              value={entity.min_cents}
-            />
-          </div>
-        </div>
-        <hr />
-        <div className="row">
-          <div className="col-md-12 submit-buttons">
-            <input
-              type="button"
-              onClick={this.handleSubmit}
-              className="btn btn-primary pull-right"
-              value={T.translate("general.save")}
-            />
-          </div>
-        </div>
-      </form>
-    );
-  }
-}
-
-export default PaymentFeeTypeForm;
diff --git a/src/components/forms/payment-profile-form.js b/src/components/forms/payment-profile-form.js
deleted file mode 100644
index 7ed1631fb..000000000
--- a/src/components/forms/payment-profile-form.js
+++ /dev/null
@@ -1,386 +0,0 @@
-/**
- * Copyright 2020 OpenStack Foundation
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * */
-
-import React from "react";
-import T from "i18n-react/dist/i18n-react";
-import Input from "openstack-uicore-foundation/lib/components/inputs/text-input"
-import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown"
-import Panel from "openstack-uicore-foundation/lib/components/sections/panel"
-import Table from "openstack-uicore-foundation/lib/components/table";
-import { isEmpty, scrollToError, shallowEqual } from "../../utils/methods";
-import { MILLISECONDS_IN_SECOND } from "../../utils/constants";
-
-class PaymentProfileForm extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      entity: { ...props.entity },
-      errors: props.errors
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleNewFeeType = this.handleNewFeeType.bind(this);
-    this.handleEditFeeType = this.handleEditFeeType.bind(this);
-    this.handleDeleteFeeType = this.handleDeleteFeeType.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const state = {};
-    scrollToError(this.props.errors);
-
-    if (!shallowEqual(prevProps.entity, this.props.entity)) {
-      state.entity = { ...this.props.entity };
-      state.errors = {};
-    }
-
-    if (!shallowEqual(prevProps.errors, this.props.errors)) {
-      state.errors = { ...this.props.errors };
-    }
-
-    if (!isEmpty(state)) {
-      this.setState({ ...this.state, ...state });
-    }
-  }
-
-  handleChange(ev) {
-    const entity = { ...this.state.entity };
-    const errors = { ...this.state.errors };
-    let { value, id } = ev.target;
-
-    if (ev.target.type === "checkbox") {
-      value = ev.target.checked;
-    }
-
-    if (ev.target.type === "datetime") {
-      value = value.valueOf() / MILLISECONDS_IN_SECOND;
-    }
-
-    errors[id] = "";
-    entity[id] = value;
-    this.setState({ entity, errors });
-  }
-
-  handleSubmit(ev) {
-    ev.preventDefault();
-    this.props.onSubmit(this.state.entity);
-  }
-
-  hasErrors(field) {
-    const { errors } = this.state;
-    if (field in errors) {
-      return errors[field];
-    }
-
-    return "";
-  }
-
-  handleNewFeeType() {
-    const { currentSummit, entity, history } = this.props;
-    history.push(
-      `/app/summits/${currentSummit.id}/payment-profiles/${entity.id}/payment-fee-type/new`
-    );
-  }
-
-  handleEditFeeType(valueId) {
-    const { currentSummit, entity, history } = this.props;
-    history.push(
-      `/app/summits/${currentSummit.id}/payment-profiles/${entity.id}/payment-fee-type/${valueId}`
-    );
-  }
-
-  handleDeleteFeeType(valueId) {
-    this.props.onDeleteFeeType(valueId);
-  }
-
-  render() {
-    const { entity } = this.state;
-    const { paymentFeeTypes } = this.props;
-    const application_type_ddl = [
-      { label: "Registration", value: "Registration" },
-      { label: "Bookable Rooms", value: "BookableRooms" },
-      { label: "Sponsor Services", value: "SponsorServices" }
-    ];
-
-    const provider_ddl = [
-      { label: "Stripe", value: "Stripe" },
-      { label: "LawPay", value: "LawPay" }
-    ];
-
-    const fee_types_options = {
-      sortCol: paymentFeeTypes.order,
-      sortDir: paymentFeeTypes.orderDir,
-      actions: {
-        edit: { onClick: this.handleEditFeeType },
-        delete: { onClick: this.handleDeleteFeeType }
-      }
-    };
-
-    const fee_types_columns = [
-      {
-        columnKey: "name",
-        value: T.translate("edit_payment_profile.payment_type_fee_name")
-      },
-      {
-        columnKey: "kind",
-        value: T.translate("edit_payment_profile.payment_type_fee_kind")
-      },
-      {
-        columnKey: "payment_method",
-        value: T.translate("edit_payment_profile.payment_type_fee_method")
-      },
-      {
-        columnKey: "value",
-        value: T.translate("edit_payment_profile.payment_type_fee_value")
-      },
-      {
-        columnKey: "max_cents",
-        value: T.translate("edit_payment_profile.payment_type_fee_max_cents")
-      },
-      {
-        columnKey: "min_cents",
-        value: T.translate("edit_payment_profile.payment_type_fee_min_cents")
-      }
-    ];
-
-    return (
-      <form className="payment-profile-form">
-        <input type="hidden" id="id" value={entity.id} />
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.application_type")}
-            </label>
-            <Dropdown
-              id="application_type"
-              value={entity.application_type}
-              isDisabled={entity.id !== 0}
-              onChange={this.handleChange}
-              options={application_type_ddl}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_payment_profile.provider")}</label>
-            <Dropdown
-              id="provider"
-              value={entity.provider}
-              onChange={this.handleChange}
-              options={provider_ddl}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-4 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="is_active"
-                checked={entity.is_active}
-                onChange={this.handleChange}
-                className="form-check-input"
-              />
-              <label className="form-check-label" htmlFor="is_active">
-                {T.translate("edit_payment_profile.active")}
-              </label>
-            </div>
-          </div>
-          <div className="col-md-4 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="test_mode_enabled"
-                checked={entity.test_mode_enabled}
-                onChange={this.handleChange}
-                className="form-check-input"
-              />
-              <label className="form-check-label" htmlFor="test_mode_enabled">
-                {T.translate("edit_payment_profile.test_mode_enabled")}
-              </label>
-              &nbsp;
-              <i
-                className="fa fa-info-circle pointable"
-                aria-hidden="true"
-                title={T.translate(
-                  "edit_payment_profile.info_stripe_test_mode"
-                )}
-              />
-            </div>
-          </div>
-          {entity.provider === "Stripe" && (
-            <div className="col-md-4 checkboxes-div">
-              <div className="form-check abc-checkbox">
-                <input
-                  type="checkbox"
-                  id="send_email_receipt"
-                  checked={entity.send_email_receipt}
-                  onChange={this.handleChange}
-                  className="form-check-input"
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="send_email_receipt"
-                >
-                  {T.translate("edit_payment_profile.send_email_receipt")}
-                </label>
-                &nbsp;
-                <i
-                  className="fa fa-info-circle pointable"
-                  aria-hidden="true"
-                  title={T.translate(
-                    "edit_payment_profile.info_send_email_receipt"
-                  )}
-                />
-              </div>
-            </div>
-          )}
-
-          {entity.provider === "LawPay" && (
-            <div className="col-md-4">
-              <label>
-                {" "}
-                {T.translate("edit_payment_profile.merchant_account_id")}
-              </label>
-              <Input
-                className="form-control"
-                id="merchant_account_id"
-                onChange={this.handleChange}
-                value={entity.merchant_account_id}
-              />
-            </div>
-          )}
-        </div>
-        <div className="row form-group">
-          <div className="col-md-6">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.live_secret_key")}
-            </label>
-            &nbsp;
-            <i
-              className="fa fa-info-circle"
-              aria-hidden="true"
-              title={T.translate("edit_payment_profile.info_stripe_keys")}
-            />
-            <Input
-              id="live_secret_key"
-              className="form-control"
-              error={this.hasErrors("live_secret_key")}
-              onChange={this.handleChange}
-              value={entity.live_secret_key}
-            />
-          </div>
-          <div className="col-md-6">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.live_publishable_key")}
-            </label>
-            &nbsp;
-            <i
-              className="fa fa-info-circle"
-              aria-hidden="true"
-              title={T.translate("edit_payment_profile.info_stripe_keys")}
-            />
-            <Input
-              id="live_publishable_key"
-              className="form-control"
-              error={this.hasErrors("live_publishable_key")}
-              onChange={this.handleChange}
-              value={entity.live_publishable_key}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-6">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.test_secret_key")}
-            </label>
-            &nbsp;
-            <i
-              className="fa fa-info-circle"
-              aria-hidden="true"
-              title={T.translate("edit_payment_profile.info_stripe_keys")}
-            />
-            <Input
-              id="test_secret_key"
-              className="form-control"
-              error={this.hasErrors("test_secret_key")}
-              onChange={this.handleChange}
-              value={entity.test_secret_key}
-            />
-          </div>
-          <div className="col-md-6">
-            <label>
-              {" "}
-              {T.translate("edit_payment_profile.test_publishable_key")}
-            </label>
-            &nbsp;
-            <i
-              className="fa fa-info-circle"
-              aria-hidden="true"
-              title={T.translate("edit_payment_profile.info_stripe_keys")}
-            />
-            <Input
-              id="test_publishable_key"
-              className="form-control"
-              error={this.hasErrors("test_publishable_key")}
-              onChange={this.handleChange}
-              value={entity.test_publishable_key}
-            />
-          </div>
-        </div>
-        {entity.id !== 0 &&
-          entity.provider === "Stripe" &&
-          entity.application_type === "SponsorServices" && (
-            <Panel
-              title={T.translate("edit_payment_profile.payment_type_fee")}
-              show
-            >
-              <div className="row form-group">
-                <div className="col-md-12 submit-buttons">
-                  <input
-                    type="button"
-                    onClick={this.handleNewFeeType}
-                    className="btn btn-primary pull-right"
-                    value={T.translate("edit_payment_profile.new_fee_type")}
-                  />
-                </div>
-              </div>
-              <div className="row form-group col-md-12">
-                <Table
-                  options={fee_types_options}
-                  data={paymentFeeTypes.paymentFeeTypes}
-                  columns={fee_types_columns}
-                />
-              </div>
-            </Panel>
-          )}
-        <hr />
-        <div className="row">
-          <div className="col-md-12 submit-buttons">
-            <input
-              type="button"
-              onClick={this.handleSubmit}
-              className="btn btn-primary pull-right"
-              value={T.translate("general.save")}
-            />
-          </div>
-        </div>
-      </form>
-    );
-  }
-}
-
-export default PaymentProfileForm;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 22c593037..c61647d15 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1922,9 +1922,13 @@
     "active": "Is Active?",
     "payment_profiles_list": "Payment Profiles List",
     "payment_profiles": "Payment Profiles",
+    "payment_profile": "Payment Profile",
     "add_payment_profile": "Add Payment Profile",
     "no_payment_profiles": "No Payment Profiles found for current search criteria.",
-    "remove_warning": "Are you sure you want to delete this Payment Profile?"
+    "remove_warning": "Are you sure you want to delete profile #{name}",
+    "placeholders": {
+      "search_profiles": "Search payment profiles"
+    }
   },
   "edit_payment_profile": {
     "payment_profile": "Payment Profile",
@@ -1944,13 +1948,15 @@
     "send_email_receipt": "Send Stripe Email receipt?",
     "merchant_account_id": "Merchant Account Id",
     "payment_type_fee": "Payment Type Fee",
+    "payment_type_fees": "Payment Type Fees",
     "new_fee_type": "Add New Fee Type",
+    "save_fee_type": "Save Fee Type",
     "payment_type_fee_name": "Name",
     "payment_type_fee_kind": "Kind",
     "payment_type_fee_method": "Method",
     "payment_type_fee_value": "Value",
-    "payment_type_fee_max_cents": "Max Cents",
-    "payment_type_fee_min_cents": "Min Cents"
+    "payment_type_fee_max_cents": "Max Amount",
+    "payment_type_fee_min_cents": "Min Amount"
   },
   "edit_payment_fee_type": {
     "payment_fee_type": "Payment Fee Type",
diff --git a/src/layouts/payment-profile-layout.js b/src/layouts/payment-profile-layout.js
index 3950ab6d0..f5eeef8bf 100644
--- a/src/layouts/payment-profile-layout.js
+++ b/src/layouts/payment-profile-layout.js
@@ -17,10 +17,8 @@ import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
 import Restrict from "../routes/restrict";
 
-import PaymentProfileListPage from "../pages/tickets/payment-profile-list-page";
-import EditPaymentProfilePage from "../pages/tickets/edit-payment-profile-page";
+import PaymentProfileListPage from "../pages/tickets/payment-profile/payment-profile-list-page";
 import NoMatchPage from "../pages/no-match-page";
-import EditPaymentFeeTypePage from "../pages/tickets/edit-payment-fee-type-page";
 
 const PaymentProfileLayout = ({ match }) => (
   <div>
@@ -32,31 +30,6 @@ const PaymentProfileLayout = ({ match }) => (
     />
     <Switch>
       <Route strict exact path={match.url} component={PaymentProfileListPage} />
-      <Route
-        strict
-        exact
-        path={`${match.url}/new`}
-        component={EditPaymentProfilePage}
-      />
-      <Route
-        strict
-        exact
-        path={`${match.url}/:payment_profile_id(\\d+)`}
-        component={EditPaymentProfilePage}
-      />
-      <Route
-        strict
-        exact
-        path={`${match.url}/:payment_profile_id(\\d+)/payment-fee-type/new`}
-        component={EditPaymentFeeTypePage}
-      />
-      <Route
-        strict
-        exact
-        path={`${match.url}/:payment_profile_id(\\d+)/payment-fee-type/:payment_fee_type_id(\\d+)`}
-        component={EditPaymentFeeTypePage}
-      />
-
       <Route component={NoMatchPage} />
     </Switch>
   </div>
diff --git a/src/pages/tickets/edit-payment-fee-type-page.js b/src/pages/tickets/edit-payment-fee-type-page.js
deleted file mode 100644
index a8d156a79..000000000
--- a/src/pages/tickets/edit-payment-fee-type-page.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Copyright 2018 OpenStack Foundation
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * */
-
-import React, { useEffect } from "react";
-import { connect } from "react-redux";
-import { Breadcrumb } from "react-breadcrumbs";
-import T from "i18n-react/dist/i18n-react";
-import PaymentFeeTypeForm from "../../components/forms/payment-fee-type-form";
-import {
-  getPaymentFeeType,
-  resetPaymentFeeTypeForm,
-  savePaymentFeeType
-} from "../../actions/ticket-actions";
-import AddNewButton from "../../components/buttons/add-new-button";
-
-const EditPaymentFeeType = ({
-  currentSummit,
-  entity,
-  errors,
-  match,
-  getPaymentFeeType,
-  resetPaymentFeeTypeForm,
-  savePaymentFeeType
-}) => {
-  useEffect(() => {
-    const { params } = match;
-    if (params.payment_fee_type_id) {
-      getPaymentFeeType(params.payment_fee_type_id);
-    } else {
-      resetPaymentFeeTypeForm();
-    }
-  }, [match.params.payment_fee_type_id]);
-
-  const title = entity.id
-    ? T.translate("general.edit")
-    : T.translate("general.add");
-  const breadcrumb = entity.id ? entity.name : T.translate("general.new");
-
-  return (
-    <div className="container">
-      <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
-      <h3>
-        {title} {T.translate("edit_payment_fee_type.payment_fee_type")}
-        <AddNewButton entity={entity} />
-      </h3>
-      <hr />
-      {currentSummit && (
-        <PaymentFeeTypeForm
-          entity={entity}
-          errors={errors}
-          currentSummit={currentSummit}
-          onSubmit={savePaymentFeeType}
-        />
-      )}
-    </div>
-  );
-};
-
-const mapStateToProps = ({
-  currentSummitState,
-  currentPaymentFeeTypeState
-}) => ({
-  currentSummit: currentSummitState.currentSummit,
-  ...currentPaymentFeeTypeState
-});
-
-export default connect(mapStateToProps, {
-  getPaymentFeeType,
-  resetPaymentFeeTypeForm,
-  savePaymentFeeType
-})(EditPaymentFeeType);
diff --git a/src/pages/tickets/edit-payment-profile-page.js b/src/pages/tickets/edit-payment-profile-page.js
deleted file mode 100644
index 9630768a6..000000000
--- a/src/pages/tickets/edit-payment-profile-page.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Copyright 2018 OpenStack Foundation
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * */
-
-import React from "react";
-import { connect } from "react-redux";
-import { Breadcrumb } from "react-breadcrumbs";
-import T from "i18n-react/dist/i18n-react";
-import Swal from "sweetalert2";
-import PaymentProfile from "../../components/forms/payment-profile-form";
-import { getSummitById } from "../../actions/summit-actions";
-import {
-  getPaymentProfile,
-  resetPaymentProfileForm,
-  savePaymentProfile,
-  getPaymentFeeTypes,
-  deletePaymentFeeType
-} from "../../actions/ticket-actions";
-import AddNewButton from "../../components/buttons/add-new-button";
-
-class EditPaymentProfilePage extends React.Component {
-  constructor(props) {
-    const paymentProfileId = props.match.params.payment_profile_id;
-    super(props);
-
-    if (!paymentProfileId) {
-      props.resetPaymentProfileForm();
-    } else {
-      props
-        .getPaymentProfile(paymentProfileId)
-        .then(props.getPaymentFeeTypes(paymentProfileId));
-    }
-
-    this.handleDeletePaymentFeeType =
-      this.handleDeletePaymentFeeType.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const oldId = prevProps.match.params.payment_profile_id;
-    const newId = this.props.match.params.payment_profile_id;
-
-    if (newId !== oldId) {
-      if (!newId) {
-        this.props.resetPaymentProfileForm();
-      } else {
-        this.props.getPaymentProfile(newId);
-      }
-    }
-  }
-
-  handleDeletePaymentFeeType(feeTypeId) {
-    const { paymentFeeTypes, deletePaymentFeeType } = this.props;
-    const feeType = paymentFeeTypes.paymentFeeTypes.find(
-      (r) => r.id === feeTypeId
-    );
-
-    Swal.fire({
-      title: T.translate("general.are_you_sure"),
-      text: `${T.translate("edit_location.remove_room_warning")} ${
-        feeType.name
-      }`,
-      type: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#DD6B55",
-      confirmButtonText: T.translate("general.yes_delete")
-    }).then((result) => {
-      if (result.value) {
-        deletePaymentFeeType(feeTypeId);
-      }
-    });
-  }
-
-  render() {
-    const { currentSummit, paymentFeeTypes, history, entity, errors, match } =
-      this.props;
-    const title = entity.id
-      ? T.translate("general.edit")
-      : T.translate("general.add");
-    const breadcrumb = entity.id ? entity.name : T.translate("general.new");
-
-    return (
-      <div className="container">
-        <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
-        <h3>
-          {title} {T.translate("edit_payment_profile.payment_profile")}
-          <AddNewButton entity={entity} />
-        </h3>
-        <hr />
-        {currentSummit && (
-          <PaymentProfile
-            entity={entity}
-            errors={errors}
-            currentSummit={currentSummit}
-            history={history}
-            paymentFeeTypes={paymentFeeTypes}
-            onSubmit={this.props.savePaymentProfile}
-            onDeleteFeeType={this.handleDeletePaymentFeeType}
-          />
-        )}
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = ({
-  currentSummitState,
-  currentPaymentProfileState,
-  currentPaymentFeeListTypeState
-}) => ({
-  currentSummit: currentSummitState.currentSummit,
-  paymentFeeTypes: currentPaymentFeeListTypeState,
-  ...currentPaymentProfileState
-});
-
-export default connect(mapStateToProps, {
-  getSummitById,
-  getPaymentProfile,
-  resetPaymentProfileForm,
-  savePaymentProfile,
-  getPaymentFeeTypes,
-  deletePaymentFeeType
-})(EditPaymentProfilePage);
diff --git a/src/pages/tickets/payment-profile-list-page.js b/src/pages/tickets/payment-profile-list-page.js
deleted file mode 100644
index 465176ccb..000000000
--- a/src/pages/tickets/payment-profile-list-page.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * Copyright 2020 OpenStack Foundation
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * */
-
-import React from "react";
-import { connect } from "react-redux";
-import T from "i18n-react/dist/i18n-react";
-import Table from "openstack-uicore-foundation/lib/components/table";
-import Swal from "sweetalert2";
-import {
-  getPaymentProfiles,
-  savePaymentProfile,
-  deletePaymentProfile
-} from "../../actions/ticket-actions";
-import { MAX_PER_PAGE } from "../../utils/constants";
-
-class PaymentProfileListPage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleEdit = this.handleEdit.bind(this);
-    this.handleDelete = this.handleDelete.bind(this);
-    this.handleSort = this.handleSort.bind(this);
-    this.handleNewPaymentProfile = this.handleNewPaymentProfile.bind(this);
-    this.state = {};
-  }
-
-  componentDidMount() {
-    const { currentSummit } = this.props;
-    if (currentSummit) {
-      this.props.getPaymentProfiles(1, MAX_PER_PAGE);
-    }
-  }
-
-  handleEdit(paymentProfileId) {
-    const { currentSummit, history } = this.props;
-    history.push(
-      `/app/summits/${currentSummit.id}/payment-profiles/${paymentProfileId}`
-    );
-  }
-
-  handleDelete(paymentProfileId) {
-    const { deletePaymentProfile } = this.props;
-
-    Swal.fire({
-      title: T.translate("general.are_you_sure"),
-      text: T.translate("payment_profiles.remove_warning"),
-      type: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#DD6B55",
-      confirmButtonText: T.translate("general.yes_delete")
-    }).then((result) => {
-      if (result.value) {
-        deletePaymentProfile(paymentProfileId);
-      }
-    });
-  }
-
-  handleSort(index, key, dir) {
-    this.props.getPaymentProfiles(1, MAX_PER_PAGE, key, dir);
-  }
-
-  handleNewPaymentProfile() {
-    const { currentSummit, history } = this.props;
-    history.push(`/app/summits/${currentSummit.id}/payment-profiles/new`);
-  }
-
-  render() {
-    const {
-      currentSummit,
-      paymentProfiles,
-      order,
-      orderDir,
-      totalPaymentProfiles
-    } = this.props;
-
-    const columns = [
-      {
-        columnKey: "id",
-        value: T.translate("payment_profiles.id"),
-        sortable: true
-      },
-      {
-        columnKey: "application_type",
-        value: T.translate("payment_profiles.application_type")
-      },
-      {
-        columnKey: "provider",
-        value: T.translate("payment_profiles.provider")
-      },
-      {
-        columnKey: "is_active",
-        value: T.translate("payment_profiles.active"),
-        render: (row) => (row.is_active ? "Yes" : "No")
-      }
-    ];
-
-    const table_options = {
-      sortCol: order,
-      sortDir: orderDir,
-      actions: {
-        edit: { onClick: this.handleEdit },
-        delete: { onClick: this.handleDelete }
-      }
-    };
-
-    if (!currentSummit.id) return <div />;
-
-    return (
-      <div className="container">
-        <h3>
-          {" "}
-          {T.translate("payment_profiles.payment_profiles_list")} (
-          {totalPaymentProfiles})
-        </h3>
-        <div className="row">
-          <div className="col-md-6 text-right col-md-offset-6">
-            <button
-              className="btn btn-primary right-space"
-              onClick={this.handleNewPaymentProfile}
-            >
-              {T.translate("payment_profiles.add_payment_profile")}
-            </button>
-          </div>
-        </div>
-
-        {paymentProfiles.length === 0 && (
-          <div>{T.translate("payment_profiles.no_payment_profiles")}</div>
-        )}
-
-        {paymentProfiles.length > 0 && (
-          <Table
-            options={table_options}
-            data={paymentProfiles}
-            columns={columns}
-            onSort={this.handleSort}
-          />
-        )}
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = ({
-  currentSummitState,
-  currentPaymentProfileListState
-}) => ({
-  currentSummit: currentSummitState.currentSummit,
-  ...currentPaymentProfileListState
-});
-
-export default connect(mapStateToProps, {
-  savePaymentProfile,
-  deletePaymentProfile,
-  getPaymentProfiles
-})(PaymentProfileListPage);
diff --git a/src/pages/tickets/payment-profile/__tests__/payment-profile-list-page.test.js b/src/pages/tickets/payment-profile/__tests__/payment-profile-list-page.test.js
new file mode 100644
index 000000000..3f73bacb4
--- /dev/null
+++ b/src/pages/tickets/payment-profile/__tests__/payment-profile-list-page.test.js
@@ -0,0 +1,154 @@
+import React from "react";
+import { screen, fireEvent, waitFor, act } from "@testing-library/react";
+import flushPromises from "flush-promises";
+import PaymentProfileListPage from "../payment-profile-list-page";
+import { renderWithRedux } from "../../../../utils/test-utils";
+import {
+  savePaymentProfile,
+  getPaymentProfiles,
+  savePaymentFeeType,
+  getPaymentFeeTypes,
+  resetPaymentProfileForm
+} from "../../../../actions/ticket-actions";
+
+let capturedDialogProps = null;
+
+jest.mock(
+  "../components/payment-profile-dialog",
+  () =>
+    function MockPaymentProfileDialog(props) {
+      capturedDialogProps = props;
+      return <div data-testid="payment-profile-dialog" />;
+    }
+);
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  translate: (key) => key
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/table",
+  () => () => null
+);
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/search-input",
+  () => () => null
+);
+
+jest.mock("../../../../actions/ticket-actions", () => ({
+  getPaymentProfiles: jest.fn(() => () => Promise.resolve()),
+  getPaymentProfile: jest.fn(() => () => Promise.resolve()),
+  savePaymentProfile: jest.fn(() => () => Promise.resolve()),
+  deletePaymentProfile: jest.fn(() => () => Promise.resolve()),
+  getPaymentFeeTypes: jest.fn(() => () => Promise.resolve()),
+  savePaymentFeeType: jest.fn(() => () => Promise.resolve()),
+  deletePaymentFeeType: jest.fn(() => () => Promise.resolve()),
+  resetPaymentProfileForm: jest.fn(() => () => undefined)
+}));
+
+const baseState = {
+  currentSummitState: {
+    currentSummit: { id: 1, name: "Test Summit" }
+  },
+  currentPaymentProfileListState: {
+    paymentProfiles: [],
+    term: "",
+    currentPage: 1,
+    perPage: 10,
+    order: "id",
+    orderDir: 1,
+    totalPaymentProfiles: 0
+  },
+  currentPaymentProfileState: {
+    entity: { id: 1, application_type: "SponsorServices", provider: "Stripe" }
+  },
+  currentPaymentFeeListTypeState: {
+    paymentFeeTypes: [],
+    totalPaymentFeeTypes: 0,
+    order: "id",
+    orderDir: 1
+  }
+};
+
+describe("PaymentProfileListPage popup behavior", () => {
+  beforeEach(() => {
+    capturedDialogProps = null;
+    savePaymentProfile.mockReturnValue(() => Promise.resolve());
+    getPaymentProfiles.mockReturnValue(() => Promise.resolve());
+    savePaymentFeeType.mockReturnValue(() => Promise.resolve());
+    getPaymentFeeTypes.mockReturnValue(() => Promise.resolve());
+    resetPaymentProfileForm.mockReturnValue(() => undefined);
+  });
+
+  const openPopup = async () => {
+    const addButton = screen.getByRole("button", {
+      name: /add_payment_profile/i
+    });
+    fireEvent.click(addButton);
+    await waitFor(() =>
+      expect(screen.getByTestId("payment-profile-dialog")).toBeInTheDocument()
+    );
+  };
+
+  test("dialog is not shown before Add is clicked, and closes when onClose is called", async () => {
+    renderWithRedux(<PaymentProfileListPage />, { initialState: baseState });
+    expect(
+      screen.queryByTestId("payment-profile-dialog")
+    ).not.toBeInTheDocument();
+
+    await openPopup();
+
+    await act(async () => {
+      capturedDialogProps.onClose();
+    });
+    expect(
+      screen.queryByTestId("payment-profile-dialog")
+    ).not.toBeInTheDocument();
+    expect(resetPaymentProfileForm).toHaveBeenCalled();
+  });
+
+  test("handleSave calls savePaymentProfile and refreshes the list on success", async () => {
+    renderWithRedux(<PaymentProfileListPage />, { initialState: baseState });
+    await openPopup();
+
+    await act(async () => {
+      await capturedDialogProps.onSave({
+        id: 0,
+        application_type: "Registration",
+        provider: "Stripe"
+      });
+      await flushPromises();
+    });
+
+    expect(savePaymentProfile).toHaveBeenCalledWith(
+      expect.objectContaining({
+        application_type: "Registration",
+        provider: "Stripe"
+      })
+    );
+    expect(getPaymentProfiles).toHaveBeenCalled();
+  });
+
+  test("fee type save keeps popup open and refreshes fee types", async () => {
+    renderWithRedux(<PaymentProfileListPage />, { initialState: baseState });
+    await openPopup();
+
+    await act(async () => {
+      await capturedDialogProps.onSaveFeeType({
+        id: 0,
+        name: "Processing Fee",
+        kind: "Rate",
+        payment_method: "card",
+        value: 250,
+        max_cents: 0,
+        min_cents: 0
+      });
+      await flushPromises();
+    });
+
+    expect(screen.getByTestId("payment-profile-dialog")).toBeInTheDocument();
+    expect(getPaymentFeeTypes).toHaveBeenCalledWith(
+      baseState.currentPaymentProfileState.entity.id
+    );
+  });
+});
diff --git a/src/pages/tickets/payment-profile/components/__tests__/payment-profile-dialog.test.js b/src/pages/tickets/payment-profile/components/__tests__/payment-profile-dialog.test.js
new file mode 100644
index 000000000..f07288bce
--- /dev/null
+++ b/src/pages/tickets/payment-profile/components/__tests__/payment-profile-dialog.test.js
@@ -0,0 +1,557 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react";
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  act
+} from "@testing-library/react";
+import PaymentProfileDialog from "../payment-profile-dialog";
+
+jest.mock("../../../../../hooks/useScrollToError", () => ({
+  __esModule: true,
+  default: jest.fn()
+}));
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+// Renders each row applying the column render functions — needed for table display tests
+jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => {
+  const React = require("react");
+  return {
+    __esModule: true,
+    default: function MockMuiTable({ columns, data, onEdit }) {
+      return (
+        <table data-testid="fee-types-table">
+          <tbody>
+            {data.map((row, i) => (
+              <tr key={row.id} data-testid={`row-${row.id}`}>
+                {columns.map((col) => (
+                  <td
+                    key={col.columnKey}
+                    data-testid={`cell-${col.columnKey}-${i}`}
+                  >
+                    {col.render ? col.render(row) : row[col.columnKey]}
+                  </td>
+                ))}
+                {onEdit && (
+                  <td>
+                    <button
+                      data-testid={`edit-row-${row.id}`}
+                      onClick={() => onEdit(row)}
+                    >
+                      edit
+                    </button>
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      );
+    }
+  };
+});
+
+// Native <select> connected to Formik so fireEvent.change updates the field
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/select",
+  () => {
+    const React = require("react");
+    const { useField } = require("formik");
+    return {
+      __esModule: true,
+      default: function MockMuiFormikSelect({ name, children, ...props }) {
+        const [field, meta] = useField(name);
+        return (
+          <>
+            <select data-testid={`select-${name}`} {...field} {...props}>
+              <option value="" />
+              {React.Children.map(children, (child) =>
+                child ? (
+                  <option value={child.props.value}>
+                    {child.props.children}
+                  </option>
+                ) : null
+              )}
+            </select>
+            {meta.touched && meta.error && <span>{meta.error}</span>}
+          </>
+        );
+      }
+    };
+  }
+);
+
+// Native <input> connected to Formik so validation error messages surface
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield",
+  () => {
+    const React = require("react");
+    const { useField } = require("formik");
+    return {
+      __esModule: true,
+      default: function MockMuiFormikTextField({ name, ...props }) {
+        const [field, meta] = useField(name);
+        return (
+          <>
+            <input data-testid={`input-${name}`} {...field} {...props} />
+            {meta.touched && meta.error && <span>{meta.error}</span>}
+          </>
+        );
+      }
+    };
+  }
+);
+
+// Native <input type="number"> connected to Formik — distinguishable from the Rate TextField
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/price-field",
+  () => {
+    const React = require("react");
+    const { useField } = require("formik");
+    return {
+      __esModule: true,
+      default: function MockMuiFormikPriceField({ name, ...props }) {
+        const [field, meta] = useField(name);
+        return (
+          <>
+            <input
+              data-testid={`price-${name}`}
+              type="number"
+              {...field}
+              {...props}
+            />
+            {meta.touched && meta.error && <span>{meta.error}</span>}
+          </>
+        );
+      }
+    };
+  }
+);
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/checkbox",
+  () => {
+    const React = require("react");
+    const { useField } = require("formik");
+    return {
+      __esModule: true,
+      default: function MockMuiFormikCheckbox({ name, ...props }) {
+        const [field] = useField({ name, type: "checkbox" });
+        return (
+          <input
+            data-testid={`checkbox-${name}`}
+            type="checkbox"
+            {...field}
+            {...props}
+          />
+        );
+      }
+    };
+  }
+);
+
+// Entity that satisfies the three conditions to show the fee type section:
+// id !== 0, provider === "Stripe", application_type === "SponsorServices"
+const feeTypeSectionEntity = {
+  id: 1,
+  application_type: "SponsorServices",
+  provider: "Stripe",
+  is_active: true,
+  test_mode_enabled: false,
+  send_email_receipt: false,
+  merchant_account_id: "",
+  live_secret_key: "sk_live_xxx",
+  live_publishable_key: "pk_live_xxx",
+  test_secret_key: "",
+  test_publishable_key: ""
+};
+
+const rateFeeType = {
+  id: 1,
+  name: "Processing Fee",
+  kind: "Rate",
+  payment_method: "card",
+  value: 250, // 2.5% — stored as basis points (value / 100)
+  max_cents: 0,
+  min_cents: 0
+};
+
+const amountFeeType = {
+  id: 2,
+  name: "Flat Fee",
+  kind: "Amount",
+  payment_method: "card",
+  value: 1500, // $15.00 — stored in cents
+  max_cents: 0,
+  min_cents: 0
+};
+
+const defaultPaymentFeeTypes = {
+  paymentFeeTypes: [],
+  totalPaymentFeeTypes: 0,
+  order: "id",
+  orderDir: 1
+};
+
+const defaultProps = {
+  onSave: jest.fn().mockResolvedValue({}),
+  onClose: jest.fn(),
+  onSaveFeeType: jest.fn().mockResolvedValue({}),
+  onDeleteFeeType: jest.fn().mockResolvedValue({}),
+  entity: {},
+  paymentFeeTypes: defaultPaymentFeeTypes
+};
+
+const renderDialog = (props = {}) =>
+  render(<PaymentProfileDialog {...defaultProps} {...props} />);
+
+const openFeeTypeForm = () => {
+  fireEvent.click(screen.getByRole("button", { name: /new_fee_type/i }));
+};
+
+const submitFeeTypeForm = () => {
+  fireEvent.click(screen.getByRole("button", { name: /save_fee_type/i }));
+};
+
+const submitProfileForm = () => {
+  fireEvent.click(screen.getByRole("button", { name: "general.save" }));
+};
+
+describe("PaymentProfileDialog", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    defaultProps.onSave.mockResolvedValue({});
+    defaultProps.onSaveFeeType.mockResolvedValue({});
+  });
+
+  describe("payment profile form", () => {
+    test("submitting with empty required fields shows validation errors and does not call onSave", async () => {
+      renderDialog({ entity: {} });
+      submitProfileForm();
+
+      await waitFor(() => {
+        // application_type and provider are the two required fields
+        expect(screen.getAllByText("validation.required")).toHaveLength(2);
+      });
+      expect(defaultProps.onSave).not.toHaveBeenCalled();
+    });
+
+    test("submitting with all required fields filled calls onSave then onClose", async () => {
+      renderDialog({ entity: {} });
+
+      fireEvent.change(screen.getByTestId("select-application_type"), {
+        target: { value: "Registration" }
+      });
+      fireEvent.change(screen.getByTestId("select-provider"), {
+        target: { value: "Stripe" }
+      });
+      submitProfileForm();
+
+      await waitFor(() => {
+        expect(defaultProps.onSave).toHaveBeenCalledWith(
+          expect.objectContaining({
+            application_type: "Registration",
+            provider: "Stripe"
+          })
+        );
+        expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    test("provider selection shows the correct provider-specific fields", () => {
+      renderDialog({ entity: {} });
+
+      fireEvent.change(screen.getByTestId("select-provider"), {
+        target: { value: "LawPay" }
+      });
+      expect(
+        screen.getByTestId("input-merchant_account_id")
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByTestId("checkbox-send_email_receipt")
+      ).not.toBeInTheDocument();
+
+      fireEvent.change(screen.getByTestId("select-provider"), {
+        target: { value: "Stripe" }
+      });
+      expect(
+        screen.getByTestId("checkbox-send_email_receipt")
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByTestId("input-merchant_account_id")
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("fee type table value display", () => {
+    const paymentFeeTypes = {
+      paymentFeeTypes: [rateFeeType, amountFeeType],
+      totalPaymentFeeTypes: 2,
+      order: "id",
+      orderDir: 1
+    };
+
+    test("renders fee type rows with correct names and formatted values", () => {
+      renderDialog({ entity: feeTypeSectionEntity, paymentFeeTypes });
+
+      expect(screen.getByTestId("fee-types-table")).toBeInTheDocument();
+      expect(screen.getByTestId("row-1")).toBeInTheDocument();
+      expect(screen.getByTestId("row-2")).toBeInTheDocument();
+      expect(screen.getByTestId("cell-name-0")).toHaveTextContent(
+        "Processing Fee"
+      );
+      expect(screen.getByTestId("cell-name-1")).toHaveTextContent("Flat Fee");
+      // rateFeeType: value = 250 → 250/100 = 2.5%
+      expect(screen.getByTestId("cell-value-0")).toHaveTextContent("2.5%");
+      // amountFeeType: value = 1500 cents → $15.00
+      expect(screen.getByTestId("cell-value-1")).toHaveTextContent("$15.00");
+    });
+
+    test.each([
+      ["profile is new (id = 0)", { id: 0 }],
+      ["provider is not Stripe", { provider: "LawPay" }],
+      [
+        "application type is not SponsorServices",
+        { application_type: "Registration" }
+      ]
+    ])("does not render the table when the %s", (_, override) => {
+      renderDialog({
+        entity: { ...feeTypeSectionEntity, ...override },
+        paymentFeeTypes
+      });
+
+      expect(screen.queryByTestId("fee-types-table")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("fee type validations", () => {
+    beforeEach(() => {
+      renderDialog({ entity: feeTypeSectionEntity });
+      openFeeTypeForm();
+    });
+
+    test("submitting empty form shows required error for name, kind, and payment_method", async () => {
+      submitFeeTypeForm();
+
+      // Formik validation is async — wait for errors to appear
+      await waitFor(() => {
+        expect(screen.getAllByText("validation.required")).toHaveLength(3);
+      });
+    });
+
+    test("Rate kind: value of 0 (below minimum) shows minimum validation error", async () => {
+      fireEvent.change(screen.getByTestId("select-kind"), {
+        target: { value: "Rate" }
+      });
+      // value stays at the initial 0, which is below the Rate minimum of 1
+      submitFeeTypeForm();
+
+      await waitFor(() => {
+        expect(screen.getByText("validation.minimum")).toBeInTheDocument();
+      });
+    });
+
+    test("Rate kind: value above maximum shows maximum validation error", async () => {
+      fireEvent.change(screen.getByTestId("select-kind"), {
+        target: { value: "Rate" }
+      });
+
+      // The Rate value field is a real MUI TextField (no data-testid).
+      // Find it as the only spinbutton not coming from the mocked price fields.
+      const valueInput = screen
+        .getAllByRole("spinbutton")
+        .find((el) => !el.hasAttribute("data-testid"));
+
+      // Typing "200" → stored as Math.round(200 * 100) = 20000, which exceeds TEN_THOUSAND (10000)
+      fireEvent.change(valueInput, { target: { value: "200" } });
+      submitFeeTypeForm();
+
+      await waitFor(() => {
+        expect(screen.getByText("validation.maximum")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("fee type kind field behavior", () => {
+    beforeEach(() => {
+      renderDialog({ entity: feeTypeSectionEntity });
+      openFeeTypeForm();
+    });
+
+    test("kind selection renders price field for Amount and percentage input for Rate", () => {
+      fireEvent.change(screen.getByTestId("select-kind"), {
+        target: { value: "Amount" }
+      });
+      expect(screen.getByTestId("price-value")).toBeInTheDocument();
+
+      fireEvent.change(screen.getByTestId("select-kind"), {
+        target: { value: "Rate" }
+      });
+      expect(screen.queryByTestId("price-value")).not.toBeInTheDocument();
+      expect(screen.getByText("%")).toBeInTheDocument();
+    });
+
+    test("changing kind resets value to 0", async () => {
+      // Set kind to Rate and enter a value
+      fireEvent.change(screen.getByTestId("select-kind"), {
+        target: { value: "Rate" }
+      });
+      const valueInput = screen
+        .getAllByRole("spinbutton")
+        .find((el) => !el.hasAttribute("data-testid"));
+      fireEvent.change(valueInput, { target: { value: "20" } });
+
+      // Switch to Amount — value should be reset
+      fireEvent.change(screen.getByTestId("select-kind"), {
+        target: { value: "Amount" }
+      });
+
+      // price-value is the Amount field; its formik value should be 0
+      await waitFor(() => {
+        expect(screen.getByTestId("price-value")).toHaveValue(0);
+      });
+    });
+  });
+
+  describe("isSaving behavior", () => {
+    test("close button calls onClose when not saving", () => {
+      renderDialog({ entity: {} });
+      fireEvent.click(screen.getByRole("button", { name: "close" }));
+      expect(defaultProps.onClose).toHaveBeenCalled();
+    });
+
+    test("save and close buttons are both disabled while a save is in flight", async () => {
+      let resolveOnSave;
+      defaultProps.onSave.mockReturnValue(
+        new Promise((r) => {
+          resolveOnSave = r;
+        })
+      );
+
+      renderDialog({ entity: {} });
+      fireEvent.change(screen.getByTestId("select-application_type"), {
+        target: { value: "Registration" }
+      });
+      fireEvent.change(screen.getByTestId("select-provider"), {
+        target: { value: "Stripe" }
+      });
+      submitProfileForm();
+
+      await waitFor(() => expect(defaultProps.onSave).toHaveBeenCalled());
+
+      expect(
+        screen.getByRole("button", { name: "general.save" })
+      ).toBeDisabled();
+      expect(screen.getByRole("button", { name: "close" })).toBeDisabled();
+
+      await act(async () => {
+        resolveOnSave({});
+      });
+    });
+
+    test("re-enables buttons and does not call onClose after save rejects", async () => {
+      defaultProps.onSave.mockRejectedValue(new Error("save failed"));
+
+      renderDialog({ entity: {} });
+      fireEvent.change(screen.getByTestId("select-application_type"), {
+        target: { value: "Registration" }
+      });
+      fireEvent.change(screen.getByTestId("select-provider"), {
+        target: { value: "Stripe" }
+      });
+      submitProfileForm();
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: "general.save" })
+        ).not.toBeDisabled();
+      });
+      expect(defaultProps.onClose).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("fee type form actions", () => {
+    const fillValidFeeTypeForm = async () => {
+      fireEvent.change(screen.getByTestId("input-name"), {
+        target: { value: "Processing Fee" }
+      });
+      fireEvent.change(screen.getByTestId("select-kind"), {
+        target: { value: "Amount" }
+      });
+      fireEvent.change(screen.getByTestId("select-payment_method"), {
+        target: { value: "card" }
+      });
+      await waitFor(() =>
+        expect(screen.getByTestId("price-value")).toBeInTheDocument()
+      );
+      fireEvent.change(screen.getByTestId("price-value"), {
+        target: { value: 1500 }
+      });
+    };
+
+    beforeEach(() => {
+      renderDialog({ entity: feeTypeSectionEntity });
+      openFeeTypeForm();
+    });
+
+    test("submitting a valid fee type form calls onSaveFeeType and hides the form", async () => {
+      await fillValidFeeTypeForm();
+      submitFeeTypeForm();
+
+      await waitFor(() => {
+        expect(defaultProps.onSaveFeeType).toHaveBeenCalledWith(
+          expect.objectContaining({
+            name: "Processing Fee",
+            kind: "Amount",
+            payment_method: "card"
+          })
+        );
+        expect(
+          screen.queryByRole("button", { name: /save_fee_type/i })
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    test("cancel hides the form without calling onSaveFeeType", () => {
+      fireEvent.click(screen.getByRole("button", { name: /general.cancel/i }));
+
+      expect(
+        screen.queryByRole("button", { name: /save_fee_type/i })
+      ).not.toBeInTheDocument();
+      expect(defaultProps.onSaveFeeType).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("fee type edit", () => {
+    test("clicking edit on a row opens and pre-fills the form with that fee type", async () => {
+      renderDialog({
+        entity: feeTypeSectionEntity,
+        paymentFeeTypes: {
+          paymentFeeTypes: [rateFeeType],
+          totalPaymentFeeTypes: 1,
+          order: "id",
+          orderDir: 1
+        }
+      });
+
+      fireEvent.click(screen.getByTestId(`edit-row-${rateFeeType.id}`));
+
+      await waitFor(() => {
+        expect(screen.getByTestId("input-name")).toHaveValue(rateFeeType.name);
+      });
+      expect(screen.getByTestId("select-kind")).toHaveValue(rateFeeType.kind);
+      expect(screen.getByTestId("select-payment_method")).toHaveValue(
+        rateFeeType.payment_method
+      );
+    });
+  });
+});
diff --git a/src/pages/tickets/payment-profile/components/payment-profile-dialog.js b/src/pages/tickets/payment-profile/components/payment-profile-dialog.js
new file mode 100644
index 000000000..70fd1a737
--- /dev/null
+++ b/src/pages/tickets/payment-profile/components/payment-profile-dialog.js
@@ -0,0 +1,702 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import T from "i18n-react/dist/i18n-react";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Button,
+  Divider,
+  Grid2,
+  IconButton,
+  InputAdornment,
+  MenuItem,
+  Box,
+  InputLabel,
+  TextField,
+  Tooltip
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import AddIcon from "@mui/icons-material/Add";
+import InfoIcon from "@mui/icons-material/Info";
+import { useFormik, FormikProvider } from "formik";
+import * as yup from "yup";
+import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import MuiFormikSelect from "openstack-uicore-foundation/lib/components/mui/formik-inputs/select";
+import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
+import MuiFormikPriceField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/price-field";
+import MuiFormikCheckbox from "openstack-uicore-foundation/lib/components/mui/formik-inputs/checkbox";
+import { currencyAmountFromCents } from "openstack-uicore-foundation/lib/utils/money";
+import useScrollToError from "../../../../hooks/useScrollToError";
+import { nullableDecimalValidation } from "../../../../utils/yup";
+import { ONE_HUNDRED, TEN_THOUSAND } from "../../../../utils/constants";
+
+const InfoTooltip = ({ title }) => (
+  <Tooltip
+    title={title}
+    placement="top"
+    componentsProps={{ tooltip: { sx: { fontSize: "1rem" } } }}
+  >
+    <InfoIcon sx={{ ml: 0.5, verticalAlign: "middle" }} />
+  </Tooltip>
+);
+
+const APPLICATION_TYPE_OPTIONS = [
+  { label: "Registration", value: "Registration" },
+  { label: "Bookable Rooms", value: "BookableRooms" },
+  { label: "Sponsor Services", value: "SponsorServices" }
+];
+
+const PROVIDER_OPTIONS = [
+  { label: "Stripe", value: "Stripe" },
+  { label: "LawPay", value: "LawPay" }
+];
+
+const PAYMENT_TYPE_FEE_KIND = [
+  { label: "Rate", value: "Rate" },
+  { label: "Amount", value: "Amount" }
+];
+
+const PAYMENT_TYPE_FEE_METHOD = [
+  // # Cards & wallets
+  { label: "Card", value: "card" },
+  { label: "Link", value: "link" },
+  { label: "CashApp", value: "cashapp" },
+  { label: "Paypal", value: "paypal" },
+  // # Bank debits
+  { label: "UsBankAccount", value: "us_bank_account" },
+  { label: "SepaDebit", value: "sepa_debit" },
+  { label: "BacsDebit", value: "bacs_debit" },
+  { label: "AuBecsDebit", value: "au_becs_debit" },
+  { label: "AcssDebit", value: "acss_debit" },
+  // # Bank redirects
+  { label: "Ideal", value: "ideal" },
+  { label: "Sofort", value: "sofort" },
+  { label: "Bancontact", value: "bancontact" },
+  { label: "Giropay", value: "giropay" },
+  { label: "Eps", value: "eps" },
+  { label: "P24", value: "p24" },
+  { label: "Blik", value: "blik" },
+  // # Buy Now, Pay Later
+  { label: "Klarna", value: "klarna" },
+  { label: "AfterpayClearpay", value: "afterpay_clearpay" },
+  { label: "Affirm", value: "affirm" },
+  // # Regional / other
+  { label: "Alipay", value: "alipay" },
+  { label: "WechatPay", value: "wechat_pay" },
+  { label: "Grabpay", value: "grabpay" },
+  { label: "Oxxo", value: "oxxo" },
+  { label: "Boleto", value: "boleto" },
+  { label: "Konbini", value: "konbini" }
+];
+
+const PaymentProfileDialog = ({
+  onSave,
+  onClose,
+  entity: initialEntity,
+  paymentFeeTypes,
+  onDeleteFeeType,
+  onSaveFeeType
+}) => {
+  const [showFeeTypeForm, setShowFeeTypeForm] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const formik = useFormik({
+    initialValues: {
+      id: initialEntity?.id || 0,
+      application_type: initialEntity?.application_type || "",
+      provider: initialEntity?.provider || "",
+      is_active: initialEntity?.is_active || false,
+      test_mode_enabled: initialEntity?.test_mode_enabled || false,
+      send_email_receipt: initialEntity?.send_email_receipt || false,
+      merchant_account_id: initialEntity?.merchant_account_id || "",
+      live_secret_key: initialEntity?.live_secret_key || "",
+      live_publishable_key: initialEntity?.live_publishable_key || "",
+      test_secret_key: initialEntity?.test_secret_key || "",
+      test_publishable_key: initialEntity?.test_publishable_key || ""
+    },
+    validationSchema: yup.object().shape({
+      application_type: yup
+        .string()
+        .required(T.translate("validation.required")),
+      provider: yup.string().required(T.translate("validation.required"))
+    }),
+    onSubmit: (values) => {
+      if (isSaving) return;
+      setIsSaving(true);
+      onSave(values)
+        .then(() => onClose())
+        .catch(() => {})
+        .finally(() => setIsSaving(false));
+    }
+  });
+
+  const feeTypeFormik = useFormik({
+    initialValues: {
+      id: 0,
+      name: "",
+      kind: "",
+      payment_method: "",
+      value: 0,
+      max_cents: null,
+      min_cents: null
+    },
+    validationSchema: yup.object().shape({
+      name: yup.string().required(T.translate("validation.required")),
+      kind: yup.string().required(T.translate("validation.required")),
+      payment_method: yup.string().required(T.translate("validation.required")),
+      value: yup
+        .number()
+        .typeError(T.translate("validation.number"))
+        .required(T.translate("validation.required"))
+        .when("kind", {
+          is: "Rate",
+          then: (schema) =>
+            schema
+              .integer(T.translate("validation.integer"))
+              .min(1, T.translate("validation.minimum", { minimum: 0.01 }))
+              .max(
+                TEN_THOUSAND,
+                T.translate("validation.maximum", { maximum: 100 })
+              ),
+          otherwise: (schema) =>
+            schema.min(0, T.translate("validation.non_negative"))
+        }),
+      max_cents: nullableDecimalValidation(),
+      min_cents: nullableDecimalValidation()
+    }),
+    onSubmit: (values) => {
+      if (isSaving) return;
+      setIsSaving(true);
+      onSaveFeeType(values)
+        .then(() => {
+          feeTypeFormik.resetForm();
+          setShowFeeTypeForm(false);
+        })
+        .catch(() => {})
+        .finally(() => setIsSaving(false));
+    }
+  });
+
+  useScrollToError(formik, true);
+
+  const title = initialEntity.id
+    ? `${T.translate("general.edit")} ${T.translate(
+        "payment_profiles.payment_profile"
+      )}`
+    : `${T.translate("general.add")} ${T.translate(
+        "payment_profiles.payment_profile"
+      )}`;
+
+  const fee_types_options = {
+    sortCol: paymentFeeTypes.order,
+    sortDir: paymentFeeTypes.orderDir
+  };
+
+  const fee_types_columns = [
+    {
+      columnKey: "name",
+      header: T.translate("edit_payment_profile.payment_type_fee_name")
+    },
+    {
+      columnKey: "kind",
+      header: T.translate("edit_payment_profile.payment_type_fee_kind")
+    },
+    {
+      columnKey: "payment_method",
+      header: T.translate("edit_payment_profile.payment_type_fee_method")
+    },
+    {
+      columnKey: "value",
+      header: T.translate("edit_payment_profile.payment_type_fee_value"),
+      render: (row) =>
+        row.kind === "Rate"
+          ? `${row.value / ONE_HUNDRED}%`
+          : `${currencyAmountFromCents(row.value)}`
+    },
+    {
+      columnKey: "max_cents",
+      header: T.translate("edit_payment_profile.payment_type_fee_max_cents")
+    },
+    {
+      columnKey: "min_cents",
+      header: T.translate("edit_payment_profile.payment_type_fee_min_cents")
+    }
+  ];
+
+  const handleClose = () => {
+    if (isSaving) return;
+    formik.resetForm();
+    onClose();
+  };
+
+  const handleFeeTypeDelete = (feeTypeId) => {
+    if (isSaving) return;
+    onDeleteFeeType(feeTypeId);
+  };
+
+  const handleFeeTypeEdit = (feeType) => {
+    feeTypeFormik.setValues({ ...feeType });
+    setShowFeeTypeForm(true);
+  };
+
+  const handleNewFeeType = () => {
+    feeTypeFormik.resetForm();
+    setShowFeeTypeForm(true);
+  };
+
+  const handleCancelFeeType = () => {
+    feeTypeFormik.resetForm();
+    setShowFeeTypeForm(false);
+  };
+
+  return (
+    <Dialog
+      open
+      onClose={handleClose}
+      maxWidth="md"
+      fullWidth
+      disableEnforceFocus
+      disableAutoFocus
+      disableRestoreFocus
+      disableEscapeKeyDown={isSaving}
+    >
+      <DialogTitle sx={{ display: "flex", justifyContent: "space-between" }}>
+        {title}
+        <IconButton
+          size="small"
+          onClick={handleClose}
+          sx={{ mr: 1 }}
+          aria-label="close"
+          disabled={isSaving}
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </DialogTitle>
+      <Divider />
+      <FormikProvider value={formik}>
+        <DialogContent>
+          <Grid2 container spacing={2} mb={2}>
+            <Grid2 size={6}>
+              <InputLabel htmlFor="application_type">
+                {T.translate("edit_payment_profile.application_type")}
+              </InputLabel>
+              <MuiFormikSelect
+                name="application_type"
+                placeholder={T.translate(
+                  "edit_payment_profile.application_type"
+                )}
+                disabled={Boolean(formik.values.id)}
+              >
+                {APPLICATION_TYPE_OPTIONS.map((opt) => (
+                  <MenuItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </MenuItem>
+                ))}
+              </MuiFormikSelect>
+            </Grid2>
+            <Grid2 size={6}>
+              <InputLabel htmlFor="provider">
+                {T.translate("edit_payment_profile.provider")}
+              </InputLabel>
+              <MuiFormikSelect name="provider">
+                {PROVIDER_OPTIONS.map((opt) => (
+                  <MenuItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </MenuItem>
+                ))}
+              </MuiFormikSelect>
+            </Grid2>
+
+            <Grid2 size={4}>
+              <MuiFormikCheckbox
+                name="is_active"
+                label={T.translate("edit_payment_profile.active")}
+              />
+            </Grid2>
+            <Grid2 size={4} sx={{ display: "flex" }}>
+              <MuiFormikCheckbox
+                name="test_mode_enabled"
+                label={
+                  <>
+                    {T.translate("edit_payment_profile.test_mode_enabled")}
+                    <InfoTooltip
+                      title={T.translate(
+                        "edit_payment_profile.info_stripe_test_mode"
+                      )}
+                    />
+                  </>
+                }
+              />
+            </Grid2>
+            {formik.values.provider === "Stripe" && (
+              <Grid2 size={4}>
+                <MuiFormikCheckbox
+                  name="send_email_receipt"
+                  label={
+                    <>
+                      {T.translate("edit_payment_profile.send_email_receipt")}
+                      <InfoTooltip
+                        title={T.translate(
+                          "edit_payment_profile.info_send_email_receipt"
+                        )}
+                      />
+                    </>
+                  }
+                />
+              </Grid2>
+            )}
+
+            {formik.values.provider === "LawPay" && (
+              <Grid2 size={12}>
+                <InputLabel htmlFor="merchant_account_id">
+                  {T.translate("edit_payment_profile.merchant_account_id")}
+                </InputLabel>
+                <MuiFormikTextField
+                  name="merchant_account_id"
+                  fullWidth
+                  variant="outlined"
+                />
+              </Grid2>
+            )}
+
+            <Grid2 size={6}>
+              <InputLabel htmlFor="live_secret_key">
+                {T.translate("edit_payment_profile.live_secret_key")}
+                <InfoTooltip
+                  title={T.translate("edit_payment_profile.info_stripe_keys")}
+                />
+              </InputLabel>
+              <MuiFormikTextField
+                name="live_secret_key"
+                required
+                fullWidth
+                variant="outlined"
+              />
+            </Grid2>
+            <Grid2 size={6}>
+              <InputLabel htmlFor="live_publishable_key">
+                {T.translate("edit_payment_profile.live_publishable_key")}
+                <InfoTooltip
+                  title={T.translate("edit_payment_profile.info_stripe_keys")}
+                />
+              </InputLabel>
+              <MuiFormikTextField
+                name="live_publishable_key"
+                required
+                fullWidth
+                variant="outlined"
+              />
+            </Grid2>
+            <Grid2 size={6}>
+              <InputLabel htmlFor="test_secret_key">
+                {T.translate("edit_payment_profile.test_secret_key")}
+                <InfoTooltip
+                  title={T.translate("edit_payment_profile.info_stripe_keys")}
+                />
+              </InputLabel>
+              <MuiFormikTextField
+                name="test_secret_key"
+                fullWidth
+                variant="outlined"
+              />
+            </Grid2>
+            <Grid2 size={6}>
+              <InputLabel htmlFor="test_publishable_key">
+                {T.translate("edit_payment_profile.test_publishable_key")}
+                <InfoTooltip
+                  title={T.translate("edit_payment_profile.info_stripe_keys")}
+                />
+              </InputLabel>
+              <MuiFormikTextField
+                name="test_publishable_key"
+                fullWidth
+                variant="outlined"
+              />
+            </Grid2>
+          </Grid2>
+          {formik.values.id !== 0 &&
+            formik.values.provider === "Stripe" &&
+            formik.values.application_type === "SponsorServices" && (
+              <>
+                <Divider />
+                <Box mt={2}>
+                  <h5>
+                    {T.translate("edit_payment_profile.payment_type_fee")}
+                  </h5>
+                  <Grid2
+                    size={12}
+                    container
+                    mb={2}
+                    justifyContent="space-between"
+                    alignItems="center"
+                  >
+                    <Grid2>
+                      {paymentFeeTypes.totalPaymentFeeTypes}{" "}
+                      {T.translate("edit_payment_profile.payment_type_fees")}
+                    </Grid2>
+                    <Grid2>
+                      {!showFeeTypeForm && (
+                        <Button
+                          variant="contained"
+                          onClick={handleNewFeeType}
+                          startIcon={<AddIcon />}
+                          sx={{
+                            height: "36px",
+                            fontSize: "1.4rem",
+                            lineHeight: "2.4rem",
+                            letterSpacing: "0.4px"
+                          }}
+                        >
+                          {T.translate("edit_payment_profile.new_fee_type")}
+                        </Button>
+                      )}
+                    </Grid2>
+                  </Grid2>
+                  <FormikProvider value={feeTypeFormik}>
+                    {showFeeTypeForm && (
+                      <Grid2 size={12} container spacing={2} mb={2}>
+                        <Grid2 size={4}>
+                          <InputLabel htmlFor="name">
+                            {T.translate(
+                              "edit_payment_profile.payment_type_fee_name"
+                            )}
+                          </InputLabel>
+                          <MuiFormikTextField
+                            name="name"
+                            fullWidth
+                            variant="outlined"
+                            margin="none"
+                          />
+                        </Grid2>
+                        <Grid2 size={4}>
+                          <InputLabel htmlFor="kind">
+                            {T.translate(
+                              "edit_payment_profile.payment_type_fee_kind"
+                            )}
+                          </InputLabel>
+                          <MuiFormikSelect
+                            name="kind"
+                            placeholder={T.translate(
+                              "edit_payment_profile.payment_type_fee_kind"
+                            )}
+                            onChange={(e) => {
+                              feeTypeFormik.setValues(
+                                {
+                                  ...feeTypeFormik.values,
+                                  kind: e.target.value,
+                                  value: 0
+                                },
+                                false
+                              );
+                              feeTypeFormik.setFieldTouched(
+                                "value",
+                                false,
+                                false
+                              );
+                            }}
+                          >
+                            {PAYMENT_TYPE_FEE_KIND.map((opt) => (
+                              <MenuItem key={opt.value} value={opt.value}>
+                                {opt.label}
+                              </MenuItem>
+                            ))}
+                          </MuiFormikSelect>
+                        </Grid2>
+                        <Grid2 size={4}>
+                          <InputLabel htmlFor="payment_method">
+                            {T.translate(
+                              "edit_payment_profile.payment_type_fee_method"
+                            )}
+                          </InputLabel>
+                          <MuiFormikSelect
+                            name="payment_method"
+                            placeholder={T.translate(
+                              "edit_payment_profile.payment_type_fee_method"
+                            )}
+                            renderValue={(selected) => {
+                              if (!selected)
+                                return (
+                                  <span style={{ color: "#aaa" }}>
+                                    {T.translate(
+                                      "edit_payment_profile.payment_type_fee_method"
+                                    )}
+                                  </span>
+                                );
+                              const opt = PAYMENT_TYPE_FEE_METHOD.find(
+                                (o) => o.value === selected
+                              );
+                              return opt ? opt.label : selected;
+                            }}
+                          >
+                            {PAYMENT_TYPE_FEE_METHOD.map((opt) => (
+                              <MenuItem key={opt.value} value={opt.value}>
+                                {opt.label}
+                              </MenuItem>
+                            ))}
+                          </MuiFormikSelect>
+                        </Grid2>
+                        <Grid2 size={4}>
+                          <InputLabel htmlFor="value">
+                            {T.translate(
+                              "edit_payment_profile.payment_type_fee_value"
+                            )}
+                          </InputLabel>
+                          {feeTypeFormik.values.kind === "Amount" ? (
+                            <MuiFormikPriceField
+                              name="value"
+                              fullWidth
+                              variant="outlined"
+                              margin="none"
+                              inCents
+                            />
+                          ) : (
+                            <TextField
+                              type="number"
+                              value={
+                                feeTypeFormik.values.value > 0
+                                  ? feeTypeFormik.values.value / ONE_HUNDRED
+                                  : ""
+                              }
+                              onChange={(e) => {
+                                const pct = parseFloat(e.target.value);
+                                feeTypeFormik.setFieldValue(
+                                  "value",
+                                  Number.isNaN(pct)
+                                    ? 0
+                                    : Math.round(pct * ONE_HUNDRED)
+                                );
+                              }}
+                              onBlur={() =>
+                                feeTypeFormik.setFieldTouched("value", true)
+                              }
+                              error={
+                                feeTypeFormik.touched.value &&
+                                Boolean(feeTypeFormik.errors.value)
+                              }
+                              helperText={
+                                feeTypeFormik.touched.value &&
+                                feeTypeFormik.errors.value
+                              }
+                              fullWidth
+                              variant="outlined"
+                              margin="none"
+                              slotProps={{
+                                input: {
+                                  endAdornment: (
+                                    <InputAdornment position="end">
+                                      %
+                                    </InputAdornment>
+                                  )
+                                },
+                                htmlInput: { min: 0.01, max: 100, step: 0.01 }
+                              }}
+                            />
+                          )}
+                        </Grid2>
+                        <Grid2 size={4}>
+                          <InputLabel htmlFor="max_cents">
+                            {T.translate(
+                              "edit_payment_profile.payment_type_fee_max_cents"
+                            )}
+                          </InputLabel>
+                          <MuiFormikPriceField
+                            name="max_cents"
+                            fullWidth
+                            variant="outlined"
+                            margin="none"
+                            inCents
+                          />
+                        </Grid2>
+                        <Grid2 size={4}>
+                          <InputLabel htmlFor="min_cents">
+                            {T.translate(
+                              "edit_payment_profile.payment_type_fee_min_cents"
+                            )}
+                          </InputLabel>
+                          <MuiFormikPriceField
+                            name="min_cents"
+                            fullWidth
+                            variant="outlined"
+                            margin="none"
+                            inCents
+                          />
+                        </Grid2>
+                        <Grid2
+                          size={12}
+                          sx={{
+                            display: "flex",
+                            justifyContent: "flex-end",
+                            gap: 1
+                          }}
+                        >
+                          <Button
+                            variant="outlined"
+                            onClick={handleCancelFeeType}
+                            sx={{
+                              height: "36px",
+                              fontSize: "1.4rem",
+                              lineHeight: "2.4rem",
+                              letterSpacing: "0.4px"
+                            }}
+                          >
+                            {T.translate("general.cancel")}
+                          </Button>
+                          <Button
+                            variant="contained"
+                            onClick={feeTypeFormik.handleSubmit}
+                            sx={{
+                              height: "36px",
+                              fontSize: "1.4rem",
+                              lineHeight: "2.4rem",
+                              letterSpacing: "0.4px"
+                            }}
+                          >
+                            {T.translate("edit_payment_profile.save_fee_type")}
+                          </Button>
+                        </Grid2>
+                      </Grid2>
+                    )}
+                  </FormikProvider>
+                  <MuiTable
+                    columns={fee_types_columns}
+                    data={paymentFeeTypes.paymentFeeTypes}
+                    options={fee_types_options}
+                    totalRows={paymentFeeTypes.totalPaymentFeeTypes}
+                    onDelete={handleFeeTypeDelete}
+                    onEdit={handleFeeTypeEdit}
+                  />
+                </Box>
+              </>
+            )}
+        </DialogContent>
+        <Divider />
+        <DialogActions>
+          <Button
+            onClick={formik.handleSubmit}
+            variant="contained"
+            disabled={isSaving}
+          >
+            {T.translate("general.save")}
+          </Button>
+        </DialogActions>
+      </FormikProvider>
+    </Dialog>
+  );
+};
+
+PaymentProfileDialog.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
+  entity: PropTypes.object,
+  paymentFeeTypes: PropTypes.array,
+  onSaveFeeType: PropTypes.func.isRequired,
+  onDeleteFeeType: PropTypes.func.isRequired
+};
+
+PaymentProfileDialog.defaultProps = {
+  entity: {}
+};
+
+export default PaymentProfileDialog;
diff --git a/src/pages/tickets/payment-profile/payment-profile-list-page.js b/src/pages/tickets/payment-profile/payment-profile-list-page.js
new file mode 100644
index 000000000..e29307fc6
--- /dev/null
+++ b/src/pages/tickets/payment-profile/payment-profile-list-page.js
@@ -0,0 +1,253 @@
+/**
+ * Copyright 2020 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import T from "i18n-react/dist/i18n-react";
+import { Box, Button, Grid2 } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import {
+  getPaymentProfiles,
+  getPaymentProfile,
+  savePaymentProfile,
+  deletePaymentProfile,
+  getPaymentFeeTypes,
+  deletePaymentFeeType,
+  savePaymentFeeType,
+  resetPaymentProfileForm
+} from "../../../actions/ticket-actions";
+import { DEFAULT_CURRENT_PAGE } from "../../../utils/constants";
+import PaymentProfileDialog from "./components/payment-profile-dialog";
+
+const PaymentProfileListPage = ({
+  currentSummit,
+  paymentProfiles,
+  term,
+  currentPage,
+  perPage,
+  order,
+  orderDir,
+  totalPaymentProfiles,
+  getPaymentProfiles,
+  getPaymentProfile,
+  savePaymentProfile,
+  deletePaymentProfile,
+  resetPaymentProfileForm,
+  currentPaymentProfile,
+  paymentFeeTypes,
+  getPaymentFeeTypes,
+  savePaymentFeeType,
+  deletePaymentFeeType
+}) => {
+  useEffect(() => {
+    if (currentSummit?.id)
+      getPaymentProfiles("", DEFAULT_CURRENT_PAGE, perPage);
+  }, [currentSummit?.id]);
+
+  const [paymentProfilePopup, setPaymentProfilePopup] = useState(false);
+
+  const handleEdit = (paymentProfile) => {
+    getPaymentProfile(paymentProfile.id).then(() => {
+      getPaymentFeeTypes(paymentProfile.id);
+      setPaymentProfilePopup(true);
+    });
+  };
+
+  const handleSave = (entity) =>
+    savePaymentProfile(entity).then(() => {
+      getPaymentProfiles(term, DEFAULT_CURRENT_PAGE, perPage, order, orderDir);
+    });
+
+  const handleDelete = (paymentProfileId) =>
+    deletePaymentProfile(paymentProfileId).then(() =>
+      getPaymentProfiles(term, DEFAULT_CURRENT_PAGE, perPage, order, orderDir)
+    );
+
+  const handleSearch = (searchTerm) => {
+    getPaymentProfiles(searchTerm, DEFAULT_CURRENT_PAGE, perPage);
+  };
+
+  const handlePageChange = (page) => {
+    getPaymentProfiles(term, page, perPage, order, orderDir);
+  };
+  const handlePerPageChange = (newPerPage) => {
+    getPaymentProfiles(term, DEFAULT_CURRENT_PAGE, newPerPage, order, orderDir);
+  };
+
+  const handleSort = (key, dir) => {
+    getPaymentProfiles(term, DEFAULT_CURRENT_PAGE, perPage, key, dir);
+  };
+
+  const handleClose = () => {
+    resetPaymentProfileForm();
+    setPaymentProfilePopup(false);
+  };
+
+  const handleSaveFeeType = (entity) =>
+    savePaymentFeeType(entity).then(() => {
+      getPaymentFeeTypes(currentPaymentProfile.id);
+    });
+
+  const handleDeleteFeeType = (feeTypeId) =>
+    deletePaymentFeeType(feeTypeId)
+      .then(() => getPaymentFeeTypes(currentPaymentProfile.id))
+      .catch(() => {});
+
+  const handleNewPaymentProfile = () => {
+    resetPaymentProfileForm();
+    setPaymentProfilePopup(true);
+  };
+
+  const columns = [
+    {
+      columnKey: "id",
+      header: T.translate("payment_profiles.id"),
+      sortable: true
+    },
+    {
+      columnKey: "application_type",
+      header: T.translate("payment_profiles.application_type")
+    },
+    {
+      columnKey: "provider",
+      header: T.translate("payment_profiles.provider")
+    },
+    {
+      columnKey: "is_active",
+      header: T.translate("payment_profiles.active"),
+      render: (row) => (row.is_active ? "Yes" : "No")
+    }
+  ];
+
+  const table_options = {
+    sortCol: order,
+    sortDir: orderDir
+  };
+
+  if (!currentSummit.id) return <div />;
+
+  return (
+    <div className="container">
+      <h3>{T.translate("payment_profiles.payment_profiles_list")}</h3>
+      <Grid2
+        container
+        spacing={1}
+        sx={{
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 2
+        }}
+      >
+        <Grid2 size={2}>
+          <Box component="span">
+            {totalPaymentProfiles}{" "}
+            {T.translate("payment_profiles.payment_profiles")}
+          </Box>
+        </Grid2>
+        <Grid2
+          container
+          size={10}
+          gap={1}
+          sx={{
+            justifyContent: "flex-end",
+            alignItems: "center"
+          }}
+        >
+          <Grid2 size={4}>
+            <SearchInput
+              term={term}
+              onSearch={handleSearch}
+              placeholder={T.translate(
+                "payment_profiles.placeholders.search_profiles"
+              )}
+            />
+          </Grid2>
+          <Button
+            variant="contained"
+            onClick={handleNewPaymentProfile}
+            startIcon={<AddIcon />}
+            sx={{
+              height: "36px",
+              padding: "6px 16px",
+              fontSize: "1.4rem",
+              lineHeight: "2.4rem",
+              letterSpacing: "0.4px"
+            }}
+          >
+            {T.translate("payment_profiles.add_payment_profile")}
+          </Button>
+        </Grid2>
+      </Grid2>
+
+      {paymentProfiles.length === 0 && (
+        <div>{T.translate("payment_profiles.no_payment_profiles")}</div>
+      )}
+
+      {paymentProfiles.length > 0 && (
+        <MuiTable
+          columns={columns}
+          data={paymentProfiles}
+          options={table_options}
+          totalRows={totalPaymentProfiles}
+          perPage={perPage}
+          currentPage={currentPage}
+          onPageChange={handlePageChange}
+          onPerPageChange={handlePerPageChange}
+          onSort={handleSort}
+          onDelete={handleDelete}
+          onEdit={handleEdit}
+          getName={(row) => row.id}
+          deleteDialogBody={(id) =>
+            T.translate("payment_profiles.remove_warning", { name: id })
+          }
+        />
+      )}
+
+      {paymentProfilePopup && (
+        <PaymentProfileDialog
+          entity={currentPaymentProfile}
+          paymentFeeTypes={paymentFeeTypes}
+          onClose={handleClose}
+          onSave={handleSave}
+          onSaveFeeType={handleSaveFeeType}
+          onDeleteFeeType={handleDeleteFeeType}
+        />
+      )}
+    </div>
+  );
+};
+
+const mapStateToProps = ({
+  currentSummitState,
+  currentPaymentProfileListState,
+  currentPaymentProfileState,
+  currentPaymentFeeListTypeState
+}) => ({
+  currentSummit: currentSummitState.currentSummit,
+  paymentFeeTypes: currentPaymentFeeListTypeState,
+  currentPaymentProfile: currentPaymentProfileState.entity,
+  ...currentPaymentProfileListState
+});
+
+export default connect(mapStateToProps, {
+  getPaymentProfiles,
+  getPaymentProfile,
+  savePaymentProfile,
+  deletePaymentProfile,
+  resetPaymentProfileForm,
+  getPaymentFeeTypes,
+  savePaymentFeeType,
+  deletePaymentFeeType
+})(PaymentProfileListPage);
diff --git a/src/reducers/payment_profiles/__tests__/payment-profile-list-reducer.test.js b/src/reducers/payment_profiles/__tests__/payment-profile-list-reducer.test.js
new file mode 100644
index 000000000..92613c9f6
--- /dev/null
+++ b/src/reducers/payment_profiles/__tests__/payment-profile-list-reducer.test.js
@@ -0,0 +1,62 @@
+import {
+  REQUEST_PAYMENT_PROFILES,
+  RECEIVE_PAYMENT_PROFILES
+} from "../../../actions/ticket-actions";
+import paymentProfileListReducer from "../payment-profile-list-reducer";
+
+const DEFAULT_STATE = {
+  paymentProfiles: [],
+  term: "",
+  order: "id",
+  orderDir: 1,
+  currentPage: 1,
+  lastPage: 1,
+  perPage: 10,
+  totalPaymentProfiles: 0
+};
+
+describe("paymentProfileListReducer", () => {
+  test("REQUEST_PAYMENT_PROFILES stores search params", () => {
+    const state = paymentProfileListReducer(DEFAULT_STATE, {
+      type: REQUEST_PAYMENT_PROFILES,
+      payload: {
+        term: "stripe",
+        page: 2,
+        perPage: 25,
+        order: "provider",
+        orderDir: 0
+      }
+    });
+
+    expect(state).toMatchObject({
+      term: "stripe",
+      currentPage: 2,
+      perPage: 25,
+      order: "provider",
+      orderDir: 0
+    });
+  });
+
+  test("RECEIVE_PAYMENT_PROFILES updates list and pagination", () => {
+    const profiles = [
+      { id: 1, provider: "stripe" },
+      { id: 2, provider: "paypal" }
+    ];
+    const state = paymentProfileListReducer(DEFAULT_STATE, {
+      type: RECEIVE_PAYMENT_PROFILES,
+      payload: {
+        response: {
+          data: profiles,
+          total: 2,
+          current_page: 1,
+          last_page: 3
+        }
+      }
+    });
+
+    expect(state.paymentProfiles).toEqual(profiles);
+    expect(state.totalPaymentProfiles).toBe(2);
+    expect(state.currentPage).toBe(1);
+    expect(state.lastPage).toBe(3);
+  });
+});
diff --git a/src/reducers/payment_profiles/payment-profile-list-reducer.js b/src/reducers/payment_profiles/payment-profile-list-reducer.js
index d1837784f..a8454c8a2 100644
--- a/src/reducers/payment_profiles/payment-profile-list-reducer.js
+++ b/src/reducers/payment_profiles/payment-profile-list-reducer.js
@@ -24,8 +24,12 @@ import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions";
 
 const DEFAULT_STATE = {
   paymentProfiles: [],
+  term: "",
   order: "id",
   orderDir: 1,
+  currentPage: 1,
+  lastPage: 1,
+  perPage: 10,
   totalPaymentProfiles: 0
 };
 
@@ -37,17 +41,23 @@ const paymentProfileListReducer = (state = DEFAULT_STATE, action) => {
       return DEFAULT_STATE;
     }
     case REQUEST_PAYMENT_PROFILES: {
-      const { order, orderDir } = payload;
-      return { ...state, order, orderDir };
+      const { term, page, perPage, order, orderDir } = payload;
+      return { ...state, term, currentPage: page, perPage, order, orderDir };
     }
     case RECEIVE_PAYMENT_PROFILES: {
-      const { total } = payload.response;
+      const {
+        current_page: currentPage,
+        total,
+        last_page: lastPage
+      } = payload.response;
       const paymentProfiles = payload.response.data;
 
       return {
         ...state,
         paymentProfiles,
-        totalPaymentProfiles: total
+        totalPaymentProfiles: total,
+        currentPage,
+        lastPage
       };
     }
     case PAYMENT_PROFILE_ADDED: {
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 4aeb71930..192758367 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -145,6 +145,8 @@ export const TEN = 10;
 
 export const ONE_HUNDRED = 100;
 
+export const TEN_THOUSAND = 10000;
+
 export const COLUMN_4 = 4;
 
 export const COLUMN_8 = 8;
@@ -155,6 +157,8 @@ export const HIGH_Z_INDEX = 9999;
 
 export const DELTA_SECS = 300;
 
+export const MAX_CENTS = 99;
+
 export const EVENT_TYPE_PRESENTATION = "PresentationType";
 
 export const EVENT_TYPE_FISHBOWL = "Fishbowl";