Embed Size (px)
Citation preview
1
Payment integration patterns in Magento 2
Release in Chernivtsi 2016
elogic.co | [email protected]
2
Plan
• Magento 2 Checkout Infrastructure• Web services • Payment Integration patterns
Redirect to Payment ProviderHosted PageTransparent RedirectClient Side Encryption
• Code?
elogic.co | [email protected]
4
Magento Checkout Infrastructure
Checkout
Quote
Shipments
PaymentsCatalog
Customer
elogic.co | [email protected]
5
Checkout life cycle
Add AddressApply
coupon/other stuff
Add Shipping provider
Add PaymentCreate Order
elogic.co | [email protected]
7
Magento 2 Web Services
Magento2 SOAP and REST API
Client browse
r
Mobile App CRM
…
elogic.co | [email protected]
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]
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]
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
11
3.Integration patterns
Redirect to Payment Provider Hosted Page
Transparent Redirect Client Side Encryption
elogic.co | [email protected]
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
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
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
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]
18
Summary
Components
• Checkout UI Component• Merchant response callback• Redirect link provider
Complexity• Low
Estimation• 2-3 weeks
elogic.co | [email protected]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
37
Components• Checkout UI Component• Payment Provider encryption library
Complexity• Low - Middle
Estimate• 2 weeks – 5 weeks
Summary
elogic.co | [email protected]
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]
