Magento 2 Checkout에 사용자 정의 결제를 추가하는 방법
게시 됨: 2021-05-11목차
Magento 1.x에 비해 Magento 2.x의 큰 개선 사항 중 하나는 사용자 지정 결제 방법을 결제에 통합할 수 있다는 것입니다. 이 튜토리얼에서는 Magento 2 체크아웃에서 결제 수단 렌더링을 구현하는 방법을 보여줍니다.
1단계: .js 구성 요소 파일 만들기
시작하려면 결제 수단 렌더러가 Magento_Checkout 모듈에 의존하고 기본 결제 수단 구성 요소를 확장하는 UI 구성 요소로 작동해야 합니다(기본 결제 수단 렌더러는 <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js 에 있습니다. <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 프론트엔드 구성을 통해 복합 구성 공급자에 주입되어야 합니다.
\Magento\Checkout\Model\ConfigProviderInterface 구현하는 샘플 .php 파일:
MyCustomPaymentConfigProvider 클래스는 \Magento\Checkout\Model\ConfigProviderInterface를 구현합니다.
{
...
공개 함수 getConfig()
{
반품 [
// 'key' => 'value' 구성 쌍
];
}
...
} 그리고 새로운 결제 방법에 신용 카드 정보 가 필요한 경우 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 / 모델 / 결제 / 렌더러 - 목록'],
기능(
요소,
렌더러 목록
) {
'
엄격한 사용';
rendererList.push({
유형: ' % 지불 방식_코드 % ',
구성 요소: ' % 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단계: 레이아웃에서 결제 수단 선언
- 사용자 정의 모듈 디렉토리에 새
<your_module_dir>/view/frontend/layout/checkout_index_index.xml파일을 만듭니다. - 해당 파일에 다음 코드 추가
<페이지 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<본체>
<referenceBlock name="checkout.root">
<인수>
<인수 이름="jsLayout" xsi:type="배열">
<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">
<항목 이름="결제" xsi:type="배열">
<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">beforeMethods</item>
<item name="children" xsi:type="array">
<항목 이름="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</항목>
</항목>
</항목>
<!-- 지불 구성 요소 전에 추가를 선언하십시오. 종료 -->
<!-- 결제 수단(목록에 등록하는 구성 요소)을 선언합니다. 시작 -->
<item name="renders" xsi:type="array">
<item name="children" xsi:type="array">
<item name="%결제 수단의 그룹 이름%" xsi:type="array">
<!-- 값의 예: Magento_Paypal/view/frontend/web/js/view/payment-->
<item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
<항목 이름="방법" xsi:type="배열">
<!-- 결제 방법에 청구서 수신 주소를 입력해야 하는 경우 추가-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">참</item>
</항목>
</항목>
</항목>
</항목>
</항목>
<!-- 결제 수단(목록에 등록하는 구성 요소)을 선언합니다. 종료 -->
<!-- 결제 후 추가 요소를 선언합니다. 시작 -->
<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">
<항목 이름="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</항목>
</항목>
</항목>
<!-- 결제 후 추가 요소를 선언합니다. 종료 -->
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</항목>
</인수>
</인수>
</referenceBlock>
</바디>
</페이지>(프로덕션 모드 전용) 5단계: CLI 명령 실행
프로덕션 모드에서는 다음과 같은 몇 가지 명령을 더 실행해야 합니다.
PHP bin/magento 설정:di:컴파일 PHP bin/magento 설정:정적 콘텐츠:배포 PHP bin/magento 캐시:정리
Magento 2 체크아웃 확장 제품군
체크아웃 페이지는 단연코 모든 온라인 웹사이트의 가장 중요한 목적지로, 고객을 소비자로 끌어들이거나 판매 시점에서 멀어지게 할 수 있습니다.
고맙게도 이 Magento 2 Checkout Extension을 사용하면 간편하게 결제를 최적화할 수 있습니다.
지금 바로 슈트를 확인해보세요!
또한보십시오:
Magento 2에서 결제 프로세스를 사용자 정의하는 방법
Magento에서 결제에 할인 코드를 추가하는 방법