Plataforma de última geraçãoDescontinuado

Casos de uso de amostra para customização da página de captura de pagamento

Editar online

Este tópico descreve alguns casos de uso de amostra para mostrar como é possível customizar os vários métodos de pagamento na página de captura de Pagamento

Substituindo o painel do método de pagamento existente

É possível substituir e atualizar um método de pagamento existente conforme suas necessidades de negócios. O exemplo a seguir mostra como é possível incluir uma mensagem de aviso para o método de pagamento em dinheiro
  1. Adicione a seguinte estrutura de pastas em store-extensions-src, se ainda não estiver presente: store-extensions-src/app/app-common/components/payment-method
  2. Copie o componente de caixa de <WORKSPACE>/store-frontend/src/app/app-common/components/payment-method para <WORKSPACE>/store-frontend/store-extensions-src/app/app-common folder/components/payment-method
  3. Atualize esse componente de acordo com suas necessidades de negócios

Reordenando métodos de pagamento

É possível reordenar as áreas de janela do método de pagamento na página de captura de Pagamento O exemplo a seguir mostra como é possível mostrar o cartão de crédito como o primeiro painel de método de pagamento
  1. Copie o arquivo payment-methods.config.ts de <WORKSPACE>/store-frontend/src/app/features/orders/order-capture-wizard-page/payment-capture/ para a pasta <WORKSPACE>/store-frontend/store-extensions-src/app/features/order/order-capture-wizard-page/payment-capture/ .
  2. Altere a ordem das chaves no objeto PaymentMethodConfig conforme seu requisito.

Removendo um método de pagamento

É possível remover um método de pagamento da página de captura de Pagamento. O exemplo a seguir mostra como remover o método de pagamento do cartão de presente
  1. Copie o arquivo payment-methods.config.ts de <WORKSPACE>/store-frontend/src/app/features/orders/order-capture-wizard-page/payment-capture/ para a pasta <WORKSPACE>/store-frontend/store-extensions-src/app/features/order/order-capture-wizard-page/payment-capture/ .
  2. Remova o seguinte item do objeto PaymentMethodConfig no arquivo payment-methods.config.ts :
    'GIFT_CARD': {
    tid: 'GiftCardPaymentMethod',
    titleBundleKey: 'paymentCapturePage.TITLE_GiftCardPaymentMethod',
    component: GiftCardComponent,
    iconClass: 'app-icon-gift-card-20'
  }

Removendo quantia devida do subcabeçalho da página

  1. Copie a pasta payment-capture de store-frontend/src/app/features/orders/order-capture-wizard-page para store-extensions-src/app/features/orders/order-capture-wizard-page.
  2. Remova o último elemento div dentro de isf-modify-search-banner que contém as informações de quantia devida do payment-capture.component.html no novo componente