Next-generation platformDeprecated

Sample use cases for customization of Payment capture page

This topic describes a few sample use cases to show how you can customize the various payment methods in the Payment capture page.

Overriding existing payment method panel

You can override and update an existing payment method as per your business requirements. The following example shows how you can add a warning message to the cash payment method.
  1. Add the following folder structure under store-extensions-src, if not already present:
    store-extensions-src/app/app-common/components/payment-method
  2. Copy the cash component from <WORKSPACE>/store-frontend/src/app/app-common/components/payment-method to <WORKSPACE>/store-frontend/store-extensions-src/app/app-common folder/components/payment-method.
  3. Update this component according to your business needs

Reordering payment methods

You can reorder the payment method panes in the Payment capture page. The following example shows how you can show credit card as the first payment method panel.
  1. Copy the payment-methods.config.ts file from <WORKSPACE>/store-frontend/src/app/features/orders/order-capture-wizard-page/payment-capture/ to the <WORKSPACE>/store-frontend/store-extensions-src/app/features/order/order-capture-wizard-page/payment-capture/ folder.
  2. Change the order of the keys in the PaymentMethodConfig object as per your requirement.

Removing a payment method

You can remove a payment method from the Payment capture page. The following example shows how to remove the gift card payment method.
  1. Copy the payment-methods.config.ts file from <WORKSPACE>/store-frontend/src/app/features/orders/order-capture-wizard-page/payment-capture/ to the <WORKSPACE>/store-frontend/store-extensions-src/app/features/order/order-capture-wizard-page/payment-capture/ folder.
  2. Remove the following item from the PaymentMethodConfig object in the payment-methods.config.ts file:
    'GIFT_CARD': {
    tid: 'GiftCardPaymentMethod',
    titleBundleKey: 'paymentCapturePage.TITLE_GiftCardPaymentMethod',
    component: GiftCardComponent,
    iconClass: 'app-icon-gift-card-20'
  }

Removing Amount due from the sub-header of the page

  1. Copy the payment-capture folder from store-frontend/src/app/features/orders/order-capture-wizard-page to store-extensions-src/app/features/orders/order-capture-wizard-page.
  2. Remove the last div element inside isf-modify-search-banner that contains the amount due information from payment-capture.component.html in the new component.