Extending payment methods

In the Payment capture page, you can extend the application-provided payment methods configuration to add, edit, or delete payment methods.

Payment capture page

Adding a new payment method

Note: You must first configure new payment methods so that the getPaymentTypeList API can return the payment method configuration.

Create the following folder structure under store-extensions-src, if not already present: store-extensions-src/app/features/orders/order-capture-wizard-page/payment-capture
Add the following folder structure under store-extensions-src, if not already present:store-extensions-src/app/app-common/components/payment-method
Copy the app-common-extension.module.ts file from <WORKSPACE>/store-frontend/src/app/app-common to <WORKSPACE>/store-frontend/store-extensions-src/app/app-common folder.
Note: If the app-common-extension.module.tsfile is already present, do not copy the file. Custom components and providers are declared in this file.
Copy the payment-methods.config.ts file from <WORKSPACE>/store-frontend/src/app/features/orders/order-capture-wizard-page/payment-capture/ to <WORKSPACE>/store-frontend/store-extensions-src/app/features/order/order-capture-wizard-page/payment-capture/ folder.
To add a new payment panel, add an object in the PaymentMethodConfig object as shown in the following example to add the debit card payment method:
```
'DEBIT_CARD': {      
  tid: 'DebitCardPaymentMethod',    
  titleBundleKey: 'paymentCapturePage.TITLE_DebitCardPaymentMethod',
  component: DebitCardComponent,
  iconClass: 'app-icon-payment-options'
        }
```
The new DebitCardComponent component must be created inside the store-extensions-src/app/app-common/components/payment-method folder and must also be added in the declarations and entryComponents of the app-common-extension.module.ts file in the store-extensions-src folder.