Magento 2 Checkout'a Özel Ödeme Nasıl Eklenir
Yayınlanan: 2021-05-11İçindekiler
Magento 2.x'in Magento 1.x'e göre en büyük gelişmelerinden biri, özel ödeme yöntemlerinin kasaya entegre edilebilmesidir. Bu eğitimde, Magento 2 kasasında bir ödeme yöntemi oluşturmanın nasıl uygulanacağını göstereceğiz.
1. Adım: .js bileşen dosyasını oluşturun
Başlangıç olarak, ödeme yöntemi oluşturucunuz Magento_Checkout modülüne bağlı olan ve varsayılan ödeme yöntemi bileşenini genişleten bir UI bileşeni olarak hareket etmelidir (varsayılan ödeme yöntemi oluşturucu <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js bulunur) <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
Özel modül dizininizde bileşenin .js dosyasını (ödeme yöntemi oluşturucusu) oluşturun. <your_module_dir>/view/frontend/web/js/view/ dizininde saklanmalıdır.
Ödeme yöntemi oluşturucusunun genel görünümü aşağıdaki gibidir:
tanımlamak(
['Magento_Checkout / js / görünüm / ödeme /
varsayılan'
],
fonksiyon(Bileşen) {
'
sıkı kullanın';
Component.extend({
varsayılanlar: {
şablon: ' % şablonuna giden yol % '
},
// gerekli mantığı buraya ekleyin
});
}
); Bu yeni ödeme yönteminin sistem yapılandırma verilerine erişebilmesi için \Magento\Checkout\Model\ConfigProviderInterface arabirimini uygulaması ve bunu uygulayan sınıfın DI ön uç yapılandırması aracılığıyla bileşik yapılandırma sağlayıcısına enjekte edilmesi gerekir.
\Magento\Checkout\Model\ConfigProviderInterface uygulayan örnek .php dosyası:
class MyCustomPaymentConfigProvider, \Magento\Checkout\Model\ConfigProviderInterface öğesini uygular
{
...
genel işlev getConfig()
{
dönüş [
// 'anahtar' => 'değer' konfigürasyon çiftleri
];
}
...
} Ve yeni ödeme yönteminizin kredi kartı bilgisi gerektirmesi durumunda, kredi kartı formunu uygulamak için Magento oluşturucuyu kullanmalısınız ( <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
2. Adım: Oluşturucuyu kaydeden .js bileşenini oluşturun
Özel modül dizininizde, ödeme yöntemi oluşturucusunu oluşturucular listesine kaydeden .js UI bileşenini oluşturun. <your_module_dir>/view/frontend/web/js/view/ dizini altında bulunmalıdır.
Dosya içeriği aşağıdaki gibidir:
tanımlamak(
['uiComponent', 'Magento_Checkout / js / model / ödeme / oluşturucu - liste'],
işlev(
Bileşen,
oluşturucuListesi
) {
'
sıkı kullanın';
rendererList.push({
tür: ' % ödeme_metod_kodu %',
bileşen: ' % js_renderer_component % '
},
// gerekirse diğer ödeme yöntemi oluşturucuları
);
/** Gerekirse buraya görünüm mantığını ekleyin */
Component.extend({}) döndür;
}
);3. Adım: Ödeme yöntemi bileşeni için şablon oluşturun
Özel modül dizininizde yeni bir <your_module_dir>/view/frontend/web/template/<your_template>.html dosyası oluşturun. Şablon, Knockout JS sözdizimini kullanabilir.
Örneğin, PayPal Express ödeme yöntemini işlemek için şablon:
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
Adım 4: Ödeme yöntemini düzende bildirin
- Özel modül dizininizde yeni bir
<your_module_dir>/view/frontend/layout/checkout_index_index.xmldosyası oluşturun - O dosyaya aşağıdaki kodu ekleyin
<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">
<argümanlar>
<argument name="jsLayout" xsi:type="dizi">
<item name="bileşenler" xsi:type="dizi">
<item name="checkout" xsi:type="array">
<item name="çocuklar" xsi:type="array">
<item name="adımlar" xsi:type="dizi">
<item name="çocuklar" xsi:type="array">
<item name="faturalandırma adımı" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="çocuklar" xsi:type="array">
<item name="ödeme" xsi:type="array">
<item name="çocuklar" xsi:type="array">
<!-- Ödeme bileşenlerinden önce ek bildirin. BAŞLAT -->
<item name="beforeMethods" xsi:type="dizi">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">Yöntemlerden önce</item>
<item name="çocuklar" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</ite>
</ite>
</ite>
<!-- Ödeme bileşenlerinden önce ek bildirin. SON -->
<!-- Ödeme yöntemini bildirin (listede kayıtlı olan bileşen). BAŞLAT -->
<item name="render" xsi:type="array">
<item name="çocuklar" xsi:type="array">
<item name="% ödeme yöntemlerinin grup adı%" xsi:type="array">
<!-- Değer örneği: Magento_Paypal/view/frontend/web/js/view/ödeme-->
<item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
<item name="yöntemler" xsi:type="dizi">
<!-- Ödeme yönteminiz bir fatura adresi girmenizi gerektiriyorsa bunu ekleyin-->
<item name="%payment_method_code%" xsi:type="dizi">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</ite>
</ite>
</ite>
</ite>
</ite>
<!-- Ödeme yöntemini bildirin (listede kayıtlı olan bileşen). SON -->
<!-- Ödeme sonrası bileşenleri bildir. BAŞLAT -->
<item name="afterMethods" xsi:type="dizi">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">afterMethods</item>
<item name="çocuklar" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</ite>
</ite>
</ite>
<!-- Ödeme sonrası bileşenleri bildir. SON -->
</ite>
</ite>
</ite>
</ite>
</ite>
</ite>
</ite>
</ite>
</ite>
</argüman>
</argümanlar>
</referenceBlock>
</body>
</sayfa>(Yalnızca üretim modu için) Adım 5 : CLI komutlarını çalıştırın
Üretim modunda, bunun gibi birkaç komut daha çalıştırmanız gerekecek:
php bin/magento kurulumu:di:derleme php bin/magento kurulumu:statik içerik:dağıtım php bin/magento önbelleği:temiz
Magento 2 Checkout Uzantı Paketi
Ödeme sayfası, herhangi bir çevrimiçi web sitesinin, bir müşteriyi bir tüketici haline getirebilecek veya satış noktasından uzaklaştırabilecek en önemli varış noktasıdır.
Neyse ki, bu Magento 2 Checkout Extension, ödemenizi zahmetsizce optimize etmenize yardımcı olur.
Takım elbiseyi şimdi kontrol et!
Ayrıca bakınız:
Magento 2'de Ödeme İşlemi Nasıl Özelleştirilir
Magento'da Ödemeye İndirim Kodu Nasıl Eklenir