Download - Payment Integration patterns in Magento 2
![Page 1: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/1.jpg)
1
Payment integration patterns in Magento 2
Release in Chernivtsi 2016
elogic.co | [email protected]
![Page 2: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/2.jpg)
2
Plan
• Magento 2 Checkout Infrastructure• Web services • Payment Integration patterns
Redirect to Payment ProviderHosted PageTransparent RedirectClient Side Encryption
• Code?
elogic.co | [email protected]
![Page 4: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/4.jpg)
4
Magento Checkout Infrastructure
Checkout
Quote
Shipments
PaymentsCatalog
Customer
elogic.co | [email protected]
![Page 5: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/5.jpg)
5
Checkout life cycle
Add AddressApply
coupon/other stuff
Add Shipping provider
Add PaymentCreate Order
elogic.co | [email protected]
![Page 7: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/7.jpg)
7
Magento 2 Web Services
Magento2 SOAP and REST API
Client browse
r
Mobile App CRM
…
elogic.co | [email protected]
![Page 8: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/8.jpg)
8
Magento2 REST Elements• HTTP verb - action to perform
• GET• PUT• POST• DELETE
• Endpoint - /V1/my-module/my-resource/:idHTTP header – Authorization, Content-Type, AcceptCall payload:{ “my-resource”: { “id”: “10”, “name”: “My First Resource” }}
elogic.co | [email protected]
![Page 9: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/9.jpg)
9
Magento 2 Sevice Descriptor
<route url="/V1/my-module/my-resource/:id" method="POST"> <service class=”MeVendor\MyModule\Api\MyResourceManagementInterface" method="createResource"/> <resources> <resource ref=”self"/> </resources></route>
elogic.co | [email protected]
![Page 10: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/10.jpg)
10
Chechout Web Services
Add Address and Shipping Carrier/V1/carts/:cartId/shipping-information
Add Payment/V1/guest-carts/:cartId/set-payment-information
Add Payment and Place Order/V1/carts/mine/payment-information
![Page 11: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/11.jpg)
11
3.Integration patterns
Redirect to Payment Provider Hosted Page
Transparent Redirect Client Side Encryption
elogic.co | [email protected]
![Page 13: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/13.jpg)
13
Redirect to Payment Provider
SummaryCustomer gets redirected to Payment Providers secured page responsible for payment processing.
Examples Worldpay HTML redirect PayPal Express Checkout Eway Responsive Shared Page Liqpay Checkout 3.0
elogic.co | [email protected]
Check Payment Provider
Submit credentials on Payment Provider’s web-page
Return to Checkout success page
![Page 14: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/14.jpg)
14
Pros• Merchant is not involved in payment
processing routine.• Easy support for 3D Secure and other
stuff• Easy to implement
Cons• User is being redirected to other page• Payment Page is not customizable• Payment Page may be not UX
responsive
elogic.co | [email protected]
Redirect to Payment Provider
![Page 16: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/16.jpg)
16
Subjects• RedirectPayment Client Component
• UiComponent extended from Magento_Checkout/js/view/payment/default
• Redirect Payment Link Provider • Implementation of \Magento\Framework\App\Action\Action• Web-service /V1/redirect-payment/:cartId/link
• Checkout Place Order Service
• Web-service /V1/carts/:cartId/payment-information
elogic.co | [email protected]
Step one
![Page 17: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/17.jpg)
17
Subjects• Payment provider – Payment page on provider side• Merchant response callback (Response handler, Redirect page)
• implementation of \Magento\Framework\App\Action\Action• Web-service /V1/hosted-page/:cartId/callback
Step two
elogic.co | [email protected]
![Page 18: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/18.jpg)
18
Summary
Components
• Checkout UI Component• Merchant response callback• Redirect link provider
Complexity• Low
Estimation• 2-3 weeks
elogic.co | [email protected]
![Page 20: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/20.jpg)
20
Hosted page
Summary Customer stays on merchant side
while payment page is provided in modal iframe
Examples Braintree Drop-in UI PayPal Payments Advanced PayPal Payflow Link PayPal WPPHS Eway Iframe
Check Payment Provider
Pay in securediframe
Checkout success page
elogic.co | [email protected]
![Page 21: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/21.jpg)
21
Hosted page
Pros• Merchant is not involved in payment processing routine.• Easy to implement• Customer stays on Merchant web-site
Cons• 3D secure and other payment solutions can be not supported by this method
elogic.co | [email protected]
![Page 23: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/23.jpg)
23
Subjects HP Client Component –
UiComponent extended from Magento_Checkout/js/view/payment/default HP Link Provider –
Implementation of \Magento\Framework\App\Action\Action Web-service /V1/my-hosted-page/:cartId/link
Checkout Place order service – Web-service /V1/carts/mine/payment-information
Step one
elogic.co | [email protected]
![Page 25: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/25.jpg)
25
Subjects• Modal frame – holds Payment Provider page, redirects to Merchant Web-site
after processing payment• Merchant response callback (Response handler, Redirect page)
• Implementation of \Magento\Framework\App\Action\Action• Web-service /V1/hosted-page/:cartId/callback
• Checkout Place order service – Web-service /V1/carts/mine/payment-information
Step two
elogic.co | [email protected]
![Page 26: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/26.jpg)
26
Summary
Components• Checkout UI Component• Merchant response callback• Modal frame event listener• Frame link provider
Complexity• Middle
Estimation• 4-5 weeks
elogic.co | [email protected]
![Page 28: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/28.jpg)
28
Transparent direct
Check Payment Provider
Pay “in store”
Checkout success page
SummaryCustomer enters payment information into a form on merchant side which is submitted directly to Payment Provider.
Examples Eway Transparent Redirect Payflowpro Transparent Redirect Cybersource Secure Acceptance
elogic.co | [email protected]
![Page 29: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/29.jpg)
29
Transparent direct
Pros Merchant is not involved in payment processing
routine. Form is fully customizable May not submit order with failed payment verification
Cons Requires coding 3D secure can be not supported
elogic.co | [email protected]
![Page 32: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/32.jpg)
32
Summary
Components• Checkout UI Component• Merchant response callback• Modal frame event listener• Form generator• Frame generator
Complexity• High
Estimation• 5 weeks
elogic.co | [email protected]
![Page 34: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/34.jpg)
34
Client Side Scripting
SummaryCustomer enters payment information into a form on merchant side which is then encoded and processed through merchant server.
Examples Braintree Hosted Fields Eway Direct with Client Side Encryption
Check Payment Provider
Pay “in store”
Checkout success page
elogic.co | [email protected]
![Page 35: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/35.jpg)
35
Client Side Scripting
Pros Merchant is not involved in payment processing routine. Support for 3D Secure and other stuff Form is fully customizable May not submit order with failed payment verification Form is encrypted by Payment Provider
Cons Requires coding
elogic.co | [email protected]
![Page 37: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/37.jpg)
37
Components• Checkout UI Component• Payment Provider encryption library
Complexity• Low - Middle
Estimate• 2 weeks – 5 weeks
Summary
elogic.co | [email protected]
![Page 39: Payment Integration patterns in Magento 2](https://reader034.vdocument.in/reader034/viewer/2022042604/58792ab91a28ab7c448b54bb/html5/thumbnails/39.jpg)
39
Conclusion
Magento2 Web-Services make it easier to implement Complex Payment Integrations
We know general integration patterns all Payment Provider follow
We know how to determine the complexity of our integration depending on it’s type
elogic.co | [email protected]