Como adicionar pagamento personalizado ao Magento 2 Checkout
Publicados: 2021-05-11Índice
Uma das grandes melhorias do Magento 2.x em relação ao Magento 1.x é que os métodos de pagamento personalizados podem ser integrados ao checkout. Neste tutorial, mostraremos como implementar uma renderização de método de pagamento no checkout do Magento 2.
Etapa 1: criar o arquivo de componente .js
Para começar, seu renderizador de método de pagamento deve atuar como um componente de interface do usuário que depende do módulo Magento_Checkout e estende o componente de método de pagamento padrão (o renderizador de método de pagamento padrão está localizado em <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
Crie o arquivo .js do componente (o renderizador da forma de pagamento) em seu diretório de módulo personalizado. Ele deve ser armazenado no <your_module_dir>/view/frontend/web/js/view/ .
A visão geral do renderizador da forma de pagamento é a seguinte:
definir(
['Magento_Checkout/js/visualizar/pagamento/
predefinição'
],
função(Componente) {
'
use estrito';
return Component.extend({
padrões: {
template: ' % caminho para o template % '
},
// adiciona a lógica necessária aqui
});
}
); Para que este novo método de pagamento possa acessar os dados de configuração do sistema , ele deve implementar a interface \Magento\Checkout\Model\ConfigProviderInterface , e a classe que o implementa deve ser injetada no provedor de configuração composta via configuração de frontend DI.
Exemplo de arquivo .php que implementa \Magento\Checkout\Model\ConfigProviderInterface :
classe MyCustomPaymentConfigProvider implementa \Magento\Checkout\Model\ConfigProviderInterface
{
...
função pública getConfig()
{
Retorna [
// 'chave' => 'valor' pares de configuração
];
}
...
} E caso seu novo método de pagamento exija informações de cartão de crédito , você deve usar o renderizador Magento para implementar o formulário de cartão de crédito (localizado em <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
Etapa 2: criar o componente .js registrando o renderizador
Em seu diretório de módulo personalizado, crie o componente de interface do usuário .js que registra o renderizador do método de pagamento na lista de renderizadores. Ele deve estar localizado no <your_module_dir>/view/frontend/web/js/view/ .
O conteúdo do arquivo é o seguinte:
definir(
['uiComponent', 'Magento_Checkout/js/model/payment/renderer - list'],
função(
Componente,
lista de renderizadores
) {
'
use estrito';
rendererList.push({
digite: ' % payment_method_code % ',
componente: ' % js_renderer_component % '
},
// outros renderizadores de métodos de pagamento, se necessário
);
/** Adicione a lógica de visualização aqui, se necessário */
return Component.extend({});
}
);Etapa 3: criar o modelo para o componente de forma de pagamento
Crie um novo <your_module_dir>/view/frontend/web/template/<your_template>.html em seu diretório de módulo personalizado. O modelo pode usar a sintaxe Knockout JS.
Por exemplo, o modelo para renderizar a forma de pagamento do PayPal Express:
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
Etapa 4: declarar a forma de pagamento no layout
- Crie um novo
<your_module_dir>/view/frontend/layout/checkout_index_index.xmlem seu diretório de módulo personalizado - Adicione o seguinte código a esse arquivo
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corpo>
<referenceBlock name="checkout.root">
<argumentos>
<nome do argumento="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="filhos" xsi:type="array">
<item name="passos" xsi:type="array">
<item name="filhos" xsi:type="array">
<item name="passo de faturamento" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="filhos" xsi:type="array">
<item name="pagamento" xsi:type="array">
<item name="filhos" xsi:type="array">
<!-- Declarar componentes adicionais antes do pagamento. INICIAR -->
<item name="beforeMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">beforeMethods</item>
<item name="filhos" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</item>
</item>
</item>
<!-- Declarar componentes adicionais antes do pagamento. FIM -->
<!-- Declare a forma de pagamento (o componente que se cadastra na lista). INICIAR -->
<item name="renders" xsi:type="array">
<item name="filhos" xsi:type="array">
<item name="%nome do grupo dos métodos de pagamento%" xsi:type="array">
<!-- Exemplo de valor: Magento_Paypal/view/frontend/web/js/view/payment-->
<item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
<item name="métodos" xsi:type="array">
<!-- Adicione isto se o seu método de pagamento exigir a inserção de um endereço de cobrança-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
<!-- Declare a forma de pagamento (o componente que se cadastra na lista). FIM -->
<!-- Declare componentes adicionais após o pagamento. INICIAR -->
<item name="afterMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">afterMethods</item>
<item name="filhos" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</item>
</item>
</item>
<!-- Declare componentes adicionais após o pagamento. FIM -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argumento>
</argumentos>
</referenceBlock>
</body>
</page>(Somente para o modo de produção) Etapa 5: Executar comandos da CLI
No modo de produção, você precisará executar mais alguns comandos como:
php bin/magento setup:di:compile php bin/magento setup:static-content:deploy php bin/cache do magento:limpo
Pacote de extensão de check-out Magento 2
A página de checkout é, de longe, o destino mais importante de qualquer site online, que pode trazer um cliente para um consumidor ou afastá-lo do ponto de venda.
Felizmente, esta extensão de checkout do Magento 2 ajuda a otimizar seu checkout sem esforço.
Confira o terno agora!
Veja também:
Como personalizar o processo de checkout no Magento 2
Como adicionar código de desconto ao checkout no Magento