Creating custom redirect payment method?

Question

I've been having trouble finding documentation to implement a custom payment method. The flow needs to be like this:

1. User selects [custom payment method] on the checkout page.
2. Order is placed.
3. afterOrderPlaced should check if [custom payment method] was used and make a request to an external API with order code and credentials(From config page. This is ready)
4. Get back an order code as response, append it to a URL from config and redirect user to the payment provider's page.
5. Complete payment there and get redirected back to a URL along with the orderCode as param.
6. In said URL we get the orderCode, mark the order as payment complete or similar(This step is ready)
7. Go to thank you page.

I mostly haven't been able how to implement the frontend part of the payment method. I have looked through the posts in here and nothing is helping.

Additionally I've been reading these:

• https://developer.adobe.com/commerce/php/development/payments-integrations/payment-gateway/
• https://developer.adobe.com/commerce/php/tutorials/frontend/custom-checkout/add-payment-method/
• https://developer.adobe.com/commerce/php/development/payments-integrations/base-integration/
• https://github.com/magento/magento2-samples/tree/master/sample-module-payment-gateway

and all of these are out of date and/or deprecated on top of just being written like guides of the "do this and that" style which don't help. I don't want to have any front-end forms or validation or whatever they tell me to, in the checkout. That's all gonna be handled by the payment provider.

Is there any resource I can actually read that isn't "the source code" of how to implement a payment method and more importantly what each file's purpose is? For example why do we have these 2 files with the same name and the documentation just tells me to add them? What is each file's purpose and what can I modify in there? Where are there reference?

Answer 1

1. view/frontend/web/js/view/payment/sample_gateway.js

Using this file, you new method show into magento payment method list.

2. view/frontend/web/js/view/payment/method-renderer/sample_gateway.js

This file is use, when customer select your method from the list and what further need to do.

Answer 2

Unfortunately, the Magento documentation is very poorly written and everything is so vague, it might as well not be written at all since it provides no help whatsoever.

This article is the only one that actually worked for me and after trying many different ways and looking through my own code which wasn't working, the problem I had seemed to me the very poor naming conventions for Magento.

The error I had specifically was in /method-renderer/[my own payment here].js which needed to be written specifically [Vendor_Module]/payment/[lower snake case]