Cara Menambahkan Pembayaran Kustom ke Magento 2 Checkout
Diterbitkan: 2021-05-11Daftar Isi
Salah satu peningkatan besar Magento 2.x dibandingkan Magento 1.x adalah metode pembayaran khusus dapat diintegrasikan ke dalam checkout. Dalam tutorial ini, kami akan menunjukkan cara menerapkan rendering metode pembayaran di checkout Magento 2.
Langkah 1: Buat file komponen .js
Untuk memulai, perender metode pembayaran Anda harus bertindak sebagai komponen UI yang bergantung pada modul Magento_Checkout dan memperluas komponen metode pembayaran default (perender metode pembayaran default terletak di <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
Buat file .js komponen (perender metode pembayaran) di direktori modul kustom Anda. Itu harus disimpan di <your_module_dir>/view/frontend/web/js/view/ .
Tampilan umum dari penyaji metode pembayaran adalah sebagai berikut:
mendefinisikan(
['Magento_Checkout / js / lihat / pembayaran /
bawaan'
],
fungsi(Komponen) {
'
gunakan ketat';
kembalikan Component.extend({
default: {
templat: ' % jalur ke templat % '
},
// tambahkan logika yang diperlukan di sini
});
}
); Agar metode pembayaran baru ini dapat mengakses data konfigurasi sistem , metode ini harus mengimplementasikan antarmuka \Magento\Checkout\Model\ConfigProviderInterface , dan kelas yang mengimplementasikannya harus disuntikkan ke penyedia konfigurasi gabungan melalui konfigurasi frontend DI.
Contoh file .php yang mengimplementasikan \Magento\Checkout\Model\ConfigProviderInterface :
kelas MyCustomPaymentConfigProvider mengimplementasikan \Magento\Checkout\Model\ConfigProviderInterface
{
...
fungsi publik getConfig()
{
kembali [
// 'kunci' => 'nilai' pasangan konfigurasi
];
}
...
} Dan jika metode pembayaran baru Anda memerlukan informasi kartu kredit , Anda harus menggunakan perender Magento untuk menerapkan formulir kartu kredit (terletak di <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
Langkah 2: Buat komponen .js yang mendaftarkan penyaji
Di direktori modul kustom Anda, buat komponen UI .js yang mendaftarkan perender metode pembayaran dalam daftar perender. Itu harus berada di bawah <your_module_dir>/view/frontend/web/js/view/ .
Isi filenya seperti di bawah ini:
mendefinisikan(
['uiComponent', 'Magento_Checkout / js / model / pembayaran / penyaji - daftar'],
fungsi(
Komponen,
daftar penyaji
) {
'
gunakan ketat';
rendererList.push({
ketik: '% pembayaran_metode_kode %',
komponen: ' % js_renderer_component % '
},
// penyaji metode pembayaran lainnya jika diperlukan
);
/** Tambahkan logika tampilan di sini jika diperlukan */
mengembalikan Component.extend({});
}
);Langkah 3: Buat template untuk komponen metode pembayaran
Buat file <your_module_dir>/view/frontend/web/template/<your_template>.html baru di direktori modul kustom Anda. Template dapat menggunakan sintaks Knockout JS.
Misalnya, template untuk merender metode pembayaran PayPal Express:
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
Langkah 4: Nyatakan metode pembayaran dalam tata letak
- Buat file
<your_module_dir>/view/frontend/layout/checkout_index_index.xmlbaru di direktori modul kustom Anda - Tambahkan kode berikut ke file itu
<halaman xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<tubuh>
<referenceBlock name="checkout.root">
<argumen>
<nama argumen="jsLayout" xsi:type="array">
<nama item="komponen" xsi:type="array">
<nama item="checkout" xsi:type="array">
<nama item="anak" xsi:type="array">
<nama item="langkah" xsi:type="array">
<nama item="anak" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<nama item="anak" xsi:type="array">
<nama item="pembayaran" xsi:type="array">
<nama item="anak" xsi:type="array">
<!-- Menyatakan tambahan sebelum komponen pembayaran. MULAI -->
<item name="beforeMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">beforeMethods</item>
<nama item="anak" xsi:type="array">
<nama item="%nama_fitur_anda%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</item>
</item>
</item>
<!-- Menyatakan tambahan sebelum komponen pembayaran. SELESAI -->
<!-- Menyatakan metode pembayaran (komponen yang terdaftar dalam daftar). MULAI -->
<nama item="render" xsi:type="array">
<nama item="anak" xsi:type="array">
<item name="%nama grup metode pembayaran%" xsi:type="array">
<!-- Contoh nilai: Magento_Paypal/view/frontend/web/js/view/payment-->
<item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
<nama item="metode" xsi:type="array">
<!-- Tambahkan ini jika metode pembayaran Anda mengharuskan memasukkan alamat penagihan-->
<nama item="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">benar</item>
</item>
</item>
</item>
</item>
</item>
<!-- Menyatakan metode pembayaran (komponen yang terdaftar dalam daftar). SELESAI -->
<!-- Menyatakan komponen tambahan setelah pembayaran. MULAI -->
<nama item="afterMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">afterMethods</item>
<nama item="anak" xsi:type="array">
<nama item="%nama_fitur_anda%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</item>
</item>
</item>
<!-- Menyatakan komponen tambahan setelah pembayaran. SELESAI -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argumen>
</argumen>
</referenceBlock>
</tubuh>
</halaman>(Hanya untuk mode produksi) Langkah 5: Jalankan perintah CLI
Dalam mode produksi, Anda harus menjalankan beberapa perintah lagi seperti:
php bin/penyiapan magento:di:kompilasi php bin/magento setup: statis-konten: menyebarkan php bin/cache magento: bersih
Suite Ekstensi Checkout Magento 2
Halaman checkout, sejauh ini, adalah tujuan terpenting dari situs web online mana pun, yang dapat membawa pelanggan ke konsumen atau mendorong mereka menjauh dari tempat penjualan.
Untungnya, Ekstensi Checkout Magento 2 ini membantu mengoptimalkan checkout Anda dengan mudah.
Periksa setelannya sekarang!
Lihat juga:
Cara Menyesuaikan Proses Checkout di Magento 2
Cara Menambahkan Kode Diskon ke Checkout di Magento