Payment Gateway redirect/iframe to/from payment provider

Question

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!

Answer 1

There would be 2 options.

1. Iframe - The payment form would be displayed in the Checkout screen itself. You need to follow the instructions regarding the parameters to be passed in the Payment Gateway. (cancel_url, return_url, etc.). As per the URL param given, create controllers and get the orders created programmatically.

2. Redirection - Same as iframe form, pass the params with the custom route link, and upon the payment response, create the orders using Rest API.

"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." -- Usually, the payment gateway has the documentation - link, and params to pass. Please let me know the Payment Gateway you are trying to integrate.

Answer 2

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.