Payment Gateway redirect/iframe to/from payment provider

[ewigepluse564d]

I'm developing a payment gateway extension and it "works" in the sense of I can show it in the backend and frontend and have my "Place Order" button.

But that's where I despair..

I want to:

1. Via API Call, create an order at the external payment gateway backend (I can do that with curl in the Gateway Client
2. When I receive the order URL from the external payment gateway, I want to redirect to this URL so that the customer can pay there. Alternatively, display the URL in an iframe so that the customer can pay.

How can I do step 2? I can't find that out.. Both options would be ok for me..

Thanks a lot in advance!

[ewigepluse564d · Accepted solution]

I solved the problem myself now.

Basically the solution I was looking for is like this:

1. In frontend/web/template/payment/form.html, I do set my JS action.

    <div class="actions-toolbar">
            <div class="primary">
                <button data-role="review-save"
                        class="action primary checkout"
                        type="submit"
                        data-bind="
                            click: talerAction,
                            attr: {title: $t('Place Order')},
                            enable: (getCode() == isChecked()),
                            css: {disabled: !isPlaceOrderActionAllowed()}                                "
                        disabled>
                    <span data-bind="i18n: 'Place Order'"></span>
                </button>
            </div>
        </div>
   

2. In the JS, I do open my payment popup

3. At the end of the JS, i simply put this.placeOrder() and it goes on with the normal payment flow.

[Sanjay Jethva]

@ewigepluse564d 

Hey,

In your payment method javascript file.
1. web\js\view\payment\method-renderer\custom-payment-direct.js
define([
    ...
        'Magento_Ui/js/modal/modal'
    ...
], function(.., modal, ..){
    
     // Your modal options
     var modaloption = {
            type: 'popup',
            modalClass: 'custom-modal',
            responsive: true,
            innerScroll: true,
            clickableOverlay: true,
            title: 'Payment',
            buttons: [],
            opened: function() {
                $(".custom-modal-popup .modal-footer").hide();
            }
        };


     placeOrder: function () {

                if (this.validate() && additionalValidators.validate()) {
                    fullScreenLoader.startLoader(true);
                    this.openModalToPay();
                }
                return false;
            },

    openModalToPay: function() {
        ...
        // generate iframe content dynamically to load url
        var url = "your-response-url";
        $(".iframe-contain").html('<iframe width="100%" allowpaymentrequest allow="payment" height="500px" src="' + url + '"></iframe>');

        // use iframe-contain in your custom .html file

        var pelecardoption = modal(modaloption, $('.custom-modal-popup'));
        ...
    }
})