วิธีเพิ่มการชำระเงินแบบกำหนดเองให้กับ Magento 2 Checkout

เผยแพร่แล้ว: 2021-05-11

สารบัญ

หนึ่งในการปรับปรุงครั้งใหญ่ของ Magento 2.x เหนือ Magento 1.x คือสามารถรวมวิธีการชำระเงินแบบกำหนดเองเข้ากับการชำระเงินได้ ในบทช่วยสอนนี้ เราจะแสดงวิธีใช้งานการแสดงผลวิธีการชำระเงินในการชำระเงิน Magento 2

ขั้นตอนที่ 1: สร้างไฟล์คอมโพเนนต์ .js

ในการเริ่มต้น ตัวแสดงวิธีการชำระเงินของคุณควรทำหน้าที่เป็นส่วนประกอบ UI ที่ขึ้นอยู่กับโมดูล Magento_Checkout และขยายองค์ประกอบวิธีการชำระเงินเริ่มต้น (ตัวแสดงวิธีการชำระเงินเริ่มต้นอยู่ใน <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js )

สร้างไฟล์ . .js ของคอมโพเนนต์ (ตัวแสดงวิธีการชำระเงิน) ในไดเร็กทอรีโมดูลที่กำหนดเองของคุณ ต้องเก็บไว้ใน <your_module_dir>/view/frontend/web/js/view/

มุมมองทั่วไปของตัวแสดงวิธีการชำระเงินมีดังต่อไปนี้: 

 กำหนด(
    ['Magento_Checkout / js / ดู / ชำระเงิน /
        ค่าเริ่มต้น'
    ],
    ฟังก์ชั่น (ส่วนประกอบ) {
        '
        ใช้อย่างเข้มงวด';
        ส่งคืน Component.extend ({
            ค่าเริ่มต้น: {
                แม่แบบ: ' % เส้นทางไปยังแม่แบบ % '
            },
            // เพิ่มตรรกะที่จำเป็นที่นี่
        });
    }
);

เพื่อให้วิธีการชำระเงินใหม่นี้สามารถ เข้าถึงข้อมูลการกำหนดค่าระบบ ได้ ต้องใช้อินเทอร์เฟซ \Magento\Checkout\Model\ConfigProviderInterface และคลาสที่ใช้จะต้องส่งไปยังผู้ให้บริการการกำหนดค่าคอมโพสิตผ่านการกำหนดค่าส่วนหน้า DI

ตัวอย่างไฟล์ .php ที่ใช้ \Magento\Checkout\Model\ConfigProviderInterface : 

 คลาส MyCustomPaymentConfigProvider ใช้ \Magento\Checkout\Model\ConfigProviderInterface
{
...
    ฟังก์ชั่นสาธารณะ getConfig()
    {
        กลับ [
            // 'คีย์' => 'ค่า' คู่การกำหนดค่า
        ];
    }
...
}

และในกรณีที่วิธีการชำระเงินใหม่ของคุณต้องการ ข้อมูลบัตรเครดิต คุณควรใช้ตัวแสดง Magento เพื่อใช้แบบฟอร์มบัตรเครดิต (อยู่ใน <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js )

ขั้นตอนที่ 2: สร้างคอมโพเนนต์ .js ที่ลงทะเบียนตัวแสดงภาพ

ในไดเรกทอรีโมดูลที่กำหนดเองของคุณ ให้สร้างองค์ประกอบ .js UI ซึ่งลงทะเบียนตัวแสดงวิธีการชำระเงินในรายการตัวแสดง ต้องอยู่ใต้ <your_module_dir>/view/frontend/web/js/view/

เนื้อหาของไฟล์มีดังนี้: 

 กำหนด(
    ['uiComponent', 'Magento_Checkout / js / model / การชำระเงิน / renderer - รายการ'],
    การทำงาน(
        ส่วนประกอบ,
        rendererList
    ) {
        '
        ใช้อย่างเข้มงวด';
        rendererList.push ({
                ประเภท: ' % payment_method_code % ',
                องค์ประกอบ: ' % js_renderer_component % '
            },
            // ตัวแสดงวิธีการชำระเงินอื่น ๆ หากจำเป็น
        );
        /** เพิ่มตรรกะการดูที่นี่ หากจำเป็น */
        ส่งคืน Component.extend({});
    }
);

ขั้นตอนที่ 3: สร้างเทมเพลตสำหรับองค์ประกอบวิธีการชำระเงิน

สร้างไฟล์ <your_module_dir>/view/frontend/web/template/<your_template>.html ใหม่ในไดเร็กทอรีโมดูลที่กำหนดเองของคุณ เทมเพลตสามารถใช้ไวยากรณ์ Knockout JS

เช่น เทมเพลตสำหรับแสดงวิธีการชำระเงิน PayPal Express:

https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html

ขั้นตอนที่ 4: ประกาศวิธีการชำระเงินในรูปแบบ

  1. สร้างไฟล์ <your_module_dir>/view/frontend/layout/checkout_index_index.xml ใหม่ในไดเร็กทอรีโมดูลที่คุณกำหนดเอง
  2. เพิ่มรหัสต่อไปนี้ในไฟล์นั้น 
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <อาร์กิวเมนต์>
                <ชื่ออาร์กิวเมนต์="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <!-- ประกาศเพิ่มเติมก่อนส่วนประกอบการชำระเงิน เริ่ม -->
                                                        <item name="beforeMethods" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">ก่อนวิธีการ</item>
                                                            <item name="children" 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>
                                                        <!-- ประกาศเพิ่มเติมก่อนส่วนประกอบการชำระเงิน END -->
                                                        <!-- ประกาศวิธีการชำระเงิน (องค์ประกอบที่ลงทะเบียนในรายการ) เริ่ม -->
                                                        <item name="renders" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <ชื่อรายการ="%ชื่อกลุ่มของวิธีการชำระเงิน%" xsi:type="array">
                                                                    <!-- ตัวอย่างมูลค่า: Magento_Paypal/view/frontend/web/js/view/payment-->
                                                                    <item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
                                                                    <item name="methods" xsi:type="array">

                                                                        <!-- เพิ่มสิ่งนี้หากวิธีการชำระเงินของคุณกำหนดให้ป้อนที่อยู่สำหรับการเรียกเก็บเงิน-->
                                                                        <item name="%payment_method_code%" xsi:type="array">
                                                                            <item name="isBillingAddressRequired" xsi:type="boolean">จริง</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                        <!-- ประกาศวิธีการชำระเงิน (องค์ประกอบที่ลงทะเบียนในรายการ) END -->

                                                        <!-- ประกาศส่วนประกอบเพิ่มเติมหลังการชำระเงิน เริ่ม -->
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">afterMethods</item>
                                                            <item name="children" 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>
                                                        <!-- ประกาศส่วนประกอบเพิ่มเติมหลังการชำระเงิน END -->
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </อาร์กิวเมนต์>
            </arguments>
        </referenceBlock>
    </body>
</page>

(สำหรับโหมดการผลิตเท่านั้น) ขั้นตอนที่ 5 : รันคำสั่ง CLI

ในโหมดใช้งานจริง คุณจะต้องเรียกใช้คำสั่งเพิ่มเติมสองสามคำสั่งดังนี้: 

 การตั้งค่า php bin/magento:di:compile
การตั้งค่า php bin/magento:static-content:deploy
php bin/magento cache:ล้าง

Magento 2 Checkout Extension Suite

หน้าชำระเงินเป็นปลายทางที่สำคัญที่สุดของเว็บไซต์ออนไลน์ใด ๆ ที่สามารถนำลูกค้าเข้าสู่ผู้บริโภคหรือผลักพวกเขาออกจากจุดขาย
โชคดีที่ Magento 2 Checkout Extension นี้ช่วยเพิ่มประสิทธิภาพการชำระเงินของคุณได้อย่างง่ายดาย
ตรวจสอบชุดสูทตอนนี้!

ดูสิ่งนี้ด้วย:
วิธีปรับแต่งกระบวนการชำระเงินใน Magento 2
วิธีเพิ่มรหัสส่วนลดเพื่อชำระเงินใน Magento