Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Payment integration patterns in Magento 2
Release in Chernivtsi 2016
elogic.co | hey@elogic.co 1
Plan
• Magento 2 Checkout Infrastructure
• Web services
• Payment Integration patterns
Redirect to Payment Provider
Hosted...
1. Magento Checkout Infrastructure
elogic.co | hey@elogic.co 3
Magento Checkout Infrastructure
Checkout
Quote
Shipments
PaymentsCatalog
Customer
elogic.co | hey@elogic.co 4
Checkout life cycle
Add Address
Apply
coupon/other
stuff
Add Shipping
provider
Add PaymentCreate Order
elogic.co | hey@elo...
elogic.co | hey@elogic.co
2. Magento 2 Web-Services
6
Magento 2 Web Services
Magento2
SOAP and
REST API
Client
browser
Mobile
App
CRM
…
elogic.co | hey@elogic.co 7
Magento2 REST Elements
• HTTP verb - action to perform
• GET
• PUT
• POST
• DELETE
• Endpoint - /V1/my-module/my-resource/...
Magento 2 Sevice Descriptor
<route url="/V1/my-module/my-resource/:id" method="POST">
<service
class=”MeVendorMyModuleApiM...
Chechout Web Services
Add Address and Shipping Carrier
/V1/carts/:cartId/shipping-
information
Add Payment
/V1/guest-carts...
3.Integration patterns
Redirect to Payment Provider 
Hosted Page 
Transparent Redirect 
Client Side Encryption 
elogic...
Redirect to Payment Provider
elogic.co | hey@elogic.co
12
Redirect to Payment Provider
Summary
Customer gets redirected to Payment
Providers secured page responsible for
payment pr...
Pros
• Merchant is not involved in payment
processing routine.
• Easy support for 3D Secure and other
stuff
• Easy to impl...
Redirect to Payment Provider
Step one
elogic.co | hey@elogic.co 15
Subjects
• RedirectPayment Client Component
• UiComponent extended from
Magento_Checkout/js/view/payment/default
• Redirec...
Subjects
• Payment provider – Payment page on provider side
• Merchant response callback (Response handler, Redirect page)...
Summary
Components
• Checkout UI Component
• Merchant response callback
• Redirect link provider
Complexity
• Low
Estimati...
Hosted page
elogic.co | hey@elogic.co 19
Hosted page
Summary
 Customer stays on merchant side
while payment page is provided in
modal iframe
Examples
 Braintree ...
Hosted page
Pros
• Merchant is not involved in payment processing routine.
• Easy to implement
• Customer stays on Merchan...
Step one
elogic.co | hey@elogic.co 22
Subjects
 HP Client Component –
 UiComponent extended from Magento_Checkout/js/view/payment/default
 HP Link Provider –...
Step two
elogic.co | hey@elogic.co 24
Subjects
• Modal frame – holds Payment Provider page, redirects to Merchant Web-site
after processing payment
• Merchant r...
Summary
Components
• Checkout UI Component
• Merchant response callback
• Modal frame event listener
• Frame link provider...
Transparent direct
elogic.co | hey@elogic.co 27
Transparent direct
Check
Payment
Provider
Pay “in store”
Checkout
success page
Summary
Customer enters payment information...
Transparent direct
Pros
 Merchant is not involved in payment processing
routine.
 Form is fully customizable
 May not s...
Transparent direct
elogic.co | hey@elogic.co 30
Transparent Direct
elogic.co | hey@elogic.co 31
Summary
Components
• Checkout UI Component
• Merchant response callback
• Modal frame event listener
• Form generator
• Fr...
Client Side Encryption
elogic.co | hey@elogic.co 33
Client Side Scripting
Summary
Customer enters payment information into
a form on merchant side which is then
encoded and p...
Client Side Scripting
Pros
 Merchant is not involved in payment processing routine.
 Support for 3D Secure and other stu...
Client Side Scripting
elogic.co | hey@elogic.co 36
Components
• Checkout UI Component
• Payment Provider encryption library
Complexity
• Low - Middle
Estimate
• 2 weeks – 5 ...
4. Conclusion
elogic.co | hey@elogic.co 38
Conclusion
 Magento2 Web-Services make it easier to implement Complex Payment
Integrations
 We know general integration ...
Upcoming SlideShare
Loading in …5
×

Payment Integration patterns in Magento 2

1,485 views

Published on

If you’re developing or deploying a payment gateway in Magento2, you may face different challenges related to various stages of your project.In this case our presentation may be useful for you.

Published in: Software
  • Thanks for interesting presentation. As a supplement we recommend an article of our CTO, Piotr Karwatka - how to upgrade Magento to 2 version: http://bit.ly/1WDNF3f
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Payment Integration patterns in Magento 2

  1. 1. Payment integration patterns in Magento 2 Release in Chernivtsi 2016 elogic.co | hey@elogic.co 1
  2. 2. Plan • Magento 2 Checkout Infrastructure • Web services • Payment Integration patterns Redirect to Payment Provider Hosted Page Transparent Redirect Client Side Encryption • Code? elogic.co | hey@elogic.co 2
  3. 3. 1. Magento Checkout Infrastructure elogic.co | hey@elogic.co 3
  4. 4. Magento Checkout Infrastructure Checkout Quote Shipments PaymentsCatalog Customer elogic.co | hey@elogic.co 4
  5. 5. Checkout life cycle Add Address Apply coupon/other stuff Add Shipping provider Add PaymentCreate Order elogic.co | hey@elogic.co 5
  6. 6. elogic.co | hey@elogic.co 2. Magento 2 Web-Services 6
  7. 7. Magento 2 Web Services Magento2 SOAP and REST API Client browser Mobile App CRM … elogic.co | hey@elogic.co 7
  8. 8. Magento2 REST Elements • HTTP verb - action to perform • GET • PUT • POST • DELETE • Endpoint - /V1/my-module/my-resource/:id HTTP header – Authorization, Content-Type, Accept Call payload: { “my-resource”: { “id”: “10”, “name”: “My First Resource” } } elogic.co | hey@elogic.co 8
  9. 9. Magento 2 Sevice Descriptor <route url="/V1/my-module/my-resource/:id" method="POST"> <service class=”MeVendorMyModuleApiMyResourceManagementInterface" method="createResource"/> <resources> <resource ref=”self"/> </resources> </route> elogic.co | hey@elogic.co 9
  10. 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 10
  11. 11. 3.Integration patterns Redirect to Payment Provider  Hosted Page  Transparent Redirect  Client Side Encryption  elogic.co | hey@elogic.co 11
  12. 12. Redirect to Payment Provider elogic.co | hey@elogic.co 12
  13. 13. Redirect to Payment Provider Summary Customer 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 | hey@elogic.co Check Payment Provider Submit credentials on Payment Provider’s web- page Return to Checkout success page 13
  14. 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 | hey@elogic.co Redirect to Payment Provider 14
  15. 15. Redirect to Payment Provider Step one elogic.co | hey@elogic.co 15
  16. 16. Subjects • RedirectPayment Client Component • UiComponent extended from Magento_Checkout/js/view/payment/default • Redirect Payment Link Provider • Implementation of MagentoFrameworkAppActionAction • Web-service /V1/redirect-payment/:cartId/link • Checkout Place Order Service • Web-service /V1/carts/:cartId/payment-information elogic.co | hey@elogic.co Step one 16
  17. 17. Subjects • Payment provider – Payment page on provider side • Merchant response callback (Response handler, Redirect page) • implementation of MagentoFrameworkAppActionAction • Web-service /V1/hosted-page/:cartId/callback Step two elogic.co | hey@elogic.co 17
  18. 18. Summary Components • Checkout UI Component • Merchant response callback • Redirect link provider Complexity • Low Estimation • 2-3 weeks elogic.co | hey@elogic.co 18
  19. 19. Hosted page elogic.co | hey@elogic.co 19
  20. 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 secured iframe Checkout success page elogic.co | hey@elogic.co 20
  21. 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 | hey@elogic.co 21
  22. 22. Step one elogic.co | hey@elogic.co 22
  23. 23. Subjects  HP Client Component –  UiComponent extended from Magento_Checkout/js/view/payment/default  HP Link Provider –  Implementation of MagentoFrameworkAppActionAction  Web-service /V1/my-hosted-page/:cartId/link  Checkout Place order service –  Web-service /V1/carts/mine/payment-information Step one elogic.co | hey@elogic.co 23
  24. 24. Step two elogic.co | hey@elogic.co 24
  25. 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 MagentoFrameworkAppActionAction • Web-service /V1/hosted-page/:cartId/callback • Checkout Place order service – Web-service /V1/carts/mine/payment-information Step two elogic.co | hey@elogic.co 25
  26. 26. Summary Components • Checkout UI Component • Merchant response callback • Modal frame event listener • Frame link provider Complexity • Middle Estimation • 4-5 weeks elogic.co | hey@elogic.co 26
  27. 27. Transparent direct elogic.co | hey@elogic.co 27
  28. 28. Transparent direct Check Payment Provider Pay “in store” Checkout success page Summary Customer 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 | hey@elogic.co 28
  29. 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 | hey@elogic.co 29
  30. 30. Transparent direct elogic.co | hey@elogic.co 30
  31. 31. Transparent Direct elogic.co | hey@elogic.co 31
  32. 32. Summary Components • Checkout UI Component • Merchant response callback • Modal frame event listener • Form generator • Frame generator Complexity • High Estimation • 5 weeks elogic.co | hey@elogic.co 32
  33. 33. Client Side Encryption elogic.co | hey@elogic.co 33
  34. 34. Client Side Scripting Summary Customer 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 | hey@elogic.co 34
  35. 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 | hey@elogic.co 35
  36. 36. Client Side Scripting elogic.co | hey@elogic.co 36
  37. 37. Components • Checkout UI Component • Payment Provider encryption library Complexity • Low - Middle Estimate • 2 weeks – 5 weeks Summary elogic.co | hey@elogic.co 37
  38. 38. 4. Conclusion elogic.co | hey@elogic.co 38
  39. 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 | hey@elogic.co 39

×