I developed the payment module,can you tell me How to jump to the third-party payment platform

[LifeAsBook]

thank you!

[dkvashninbay]

Hi, please provide more details, as it doesn't clear how an already implemented payment integration can't reach the payment gateway.

[LifeAsBook]

@dkvashninbay
when i click Place Order button ,i don't know next way how to develop,can you give me a flow diagram.

Now,i change the Magento\Checkout\view\frontend\web\js\action\place-order.js to jump my payment website,but i feel is not right!

please help me ！thank you very much!

[LifeAsBook]

@alankent Can you give me some advice

[dkvashninbay]

Currently there is no public doc, which covers the case, so for an example please look at how Paypal, Authorizenet, Offline payments are configured.
Here is the brief overview, of general configurations and code.
Configuring payment step is mandatory. In order to add a payment method to this step, developer has to add corresponding item into checkout_index_index.xml layout. Payment section itself is described in checkout_index_index.xml of Magento_Checkout module.

...
<item name="payment" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Checkout/js/view/payment</item>
        <item name="children" xsi:type="array">
            <item name="renders" xsi:type="array">
                <item name="component" xsi:type="string">uiComponent</item>
                    <item name="children" xsi:type="array">
                         <!-- JS components that register new payment methods -->
                    </item>
                </item>
            </item>
        </item>
    </item>
</item>
...

If billing address is required for the target payment solution, the following layout configuration must be added.

...
<item name="payment" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="renders" xsi:type="array">
             <item name="%group name of the payment methods%" xsi:type="array">
                  <item name="component" xsi:type="string">%component_that_registers_payment_renderers_by_payment_code%</item>
                  <item name="methods" xsi:type="array">
                       <item name="%payment_method_code%" xsi:type="array">
                           <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
                       </item>
                  </item>
             </item>
        </item>
    </item>
</item>
...

JS component that registers payment method renderers:

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: '%payment_method_code%',
                component: '%js_renderer_component%'
            },
            // other payment method renderers (developer can register multiple payment methods)
        );
        /** Add view logic here if needed */
        return Component.extend({});
    }
);

Payment Method Renderer JS Component (%js_renderer_component%)

define(
    [
        'Magento_Checkout/js/view/payment/default'
    ],
    function (Component) {
        'use strict';
        return Component.extend({
            defaults: {
                template: '%path to template%'
            },

            /** add required logic here */
        });
    }
);

Payment Method Template (%path to template%)

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice">
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
    </div>
    <div class="payment-method-content">
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>


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

[LifeAsBook]

@dkvashninbay Now I do not know what the interface to change the order of the state should call