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.
© 2015 Magento, Inc. All rights reserved.
Payment integration patterns
in Magento2
Dmytro Kvashnin
Software engineer 3 at ...
© 2015 Magento, Inc. Page | 2
Who am I
Main routine
 Magento Payment & Shipment Integrations
 Magento Performance track
...
© 2015 Magento, Inc. Page | 3
What’s the plan
 Magento2 Checkout Infrastructure
 Web-Services
 Payment Integration patt...
© 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 4
1 Magento Checkout Infrastructure
© 2015 Magento, Inc. Page | 5
Magento Checkout Infrastructure
Checkout
Quote
Shipments
PaymentsCatalog
Customer
© 2015 Magento, Inc. Page | 6
Checkout life cycle
Add Address
Apply
coupon/other
stuff
Add
Shipping
provider
Add
Payment
C...
© 2015 Magento, Inc. Page | 7
Notice!
Create Order == Add Payment
© 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 8
2 Magento2 Web-Services
© 2015 Magento, Inc. Page | 9
Magento2 Web-Services
Magento2
SOAP
and REST
API
Client
browser
Mobile
App
CRM
…
© 2015 Magento, Inc. Page | 10
Magento2 REST Elements
 HTTP verb - action to perform
 GET
 PUT
 POST
 DELETE
 Endpoi...
© 2015 Magento, Inc. Page | 11
Magento2 Service Descriptor
<route url="/V1/my-module/my-resource/:id" method="POST">
<serv...
© 2015 Magento, Inc. Page | 12
Checkout Web Services
 Add Address and Shipping Carrier
/V1/carts/:cartId/shipping-informa...
© 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 13
3 Integration patterns
© 2015 Magento, Inc. Page | 14
Why should I know them?
Because most time we spend on figuring them
out from documentation.
© 2015 Magento, Inc. Page | 15
Integration patterns
 Redirect to Payment Provider
 Hosted Page
 Transparent Redirect
 ...
© 2015 Magento, Inc. Page | 16
Redirect to Payment
Provider
© 2015 Magento, Inc. Page | 17
Redirect to Payment Provider
Summary
Customer gets redirected to Payment
Providers secured ...
© 2015 Magento, Inc. Page | 18
Redirect to Payment Provider
Pros
 Merchant is not involved in payment
processing routine....
© 2015 Magento, Inc. Page | 19
Redirect to Payment Provider
Step one
© 2015 Magento, Inc. Page | 20
Redirect to Payment Provider
Step one
Subjects
 RedirectPayment Client Component
 UiCompo...
© 2015 Magento, Inc. Page | 21
Redirect to Payment Provider
Step two
Subjects
 Payment provider – Payment page on provide...
© 2015 Magento, Inc. Page | 22
Redirect to Payment Provider
Components
 Checkout UI Component
 Merchant response callbac...
© 2015 Magento, Inc. Page | 23
Hosted page
© 2015 Magento, Inc. Page | 24
Hosted Page
Summary
Customer stays on merchant side while
payment page is provided in modal...
© 2015 Magento, Inc. Page | 25
Hosted Page
Check
Payment
Provider
Pay in secured
iframe
Checkout
success page
Pros
 Merch...
© 2015 Magento, Inc. Page | 26
Hosted Page
Step one
© 2015 Magento, Inc. Page | 27
Hosted Page
Step one
Subjects
 HP Client Component –
 UiComponent extended from Magento_C...
© 2015 Magento, Inc. Page | 28
Hosted Page
Step two
© 2015 Magento, Inc. Page | 29
Hosted Page
Step two
Subjects
 Modal frame – holds Payment Provider page, redirects to Mer...
© 2015 Magento, Inc. Page | 30
Hosted Page
Components
 Checkout UI Component
 Merchant response callback
 Modal frame e...
© 2015 Magento, Inc. Page | 31
Transparent Redirect
© 2015 Magento, Inc. Page | 32
Transparent Redirect
Summary
Customer enters payment information into a
form on merchant si...
© 2015 Magento, Inc. Page | 33
Transparent Redirect
Pros
 Merchant is not involved in payment
processing routine.
 Form ...
© 2015 Magento, Inc. Page | 34
Transparent Redirect
© 2015 Magento, Inc. Page | 35
Transparent Redirect
© 2015 Magento, Inc. Page | 36
Transparent Redirect
Components
 Checkout UI Component
 Merchant response callback
 Moda...
© 2015 Magento, Inc. Page | 37
Client Side Encryption
© 2015 Magento, Inc. Page | 38
Client Side Encryption
Summary
Customer enters payment information into a
form on merchant ...
© 2015 Magento, Inc. Page | 39
Client Side Encryption
Pros
 Merchant is not involved in payment
processing routine.
 Sup...
© 2015 Magento, Inc. Page | 40
Client Side Encryption
© 2015 Magento, Inc. Page | 41
Client Side Encryption
Components
 Checkout UI Component
 Payment Provider encryption lib...
© 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 42
4 Summary
© 2015 Magento, Inc. Page | 43
Summary
 Magento2 Web-Services make it easier to implement
Complex Payment Integrations
 ...
© 2015 Magento, Inc. Page | 44© 2015
Q/A
Upcoming SlideShare
Loading in …5
×

Payment integration patterns в Magento2

2,237 views

Published on

"Payment integration patterns в Magento2"
Дмитрий Квашнин, Magento inc.
19.12.2015 - Magento 2 Release Event Chernivtsi
#m2cv

Published in: Software
  • Be the first to comment

Payment integration patterns в Magento2

  1. 1. © 2015 Magento, Inc. All rights reserved. Payment integration patterns in Magento2 Dmytro Kvashnin Software engineer 3 at Magento 19 Dec 2015
  2. 2. © 2015 Magento, Inc. Page | 2 Who am I Main routine  Magento Payment & Shipment Integrations  Magento Performance track  Magento Tools Pet projects  Magento2 PhpStorm plugin  Various music production  Do Python, Java at free time
  3. 3. © 2015 Magento, Inc. Page | 3 What’s the plan  Magento2 Checkout Infrastructure  Web-Services  Payment Integration patterns  Redirect to Payment Provider  Hosted Page  Transparent Redirect  Client Side Encryption  Code?
  4. 4. © 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 4 1 Magento Checkout Infrastructure
  5. 5. © 2015 Magento, Inc. Page | 5 Magento Checkout Infrastructure Checkout Quote Shipments PaymentsCatalog Customer
  6. 6. © 2015 Magento, Inc. Page | 6 Checkout life cycle Add Address Apply coupon/other stuff Add Shipping provider Add Payment Create Order
  7. 7. © 2015 Magento, Inc. Page | 7 Notice! Create Order == Add Payment
  8. 8. © 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 8 2 Magento2 Web-Services
  9. 9. © 2015 Magento, Inc. Page | 9 Magento2 Web-Services Magento2 SOAP and REST API Client browser Mobile App CRM …
  10. 10. © 2015 Magento, Inc. Page | 10 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” } }
  11. 11. © 2015 Magento, Inc. Page | 11 Magento2 Service Descriptor <route url="/V1/my-module/my-resource/:id" method="POST"> <service class=”MeVendorMyModuleApiMyResourceManagementInterface" method="createResource"/> <resources> <resource ref=”self"/> </resources> </route>
  12. 12. © 2015 Magento, Inc. Page | 12 Checkout 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
  13. 13. © 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 13 3 Integration patterns
  14. 14. © 2015 Magento, Inc. Page | 14 Why should I know them? Because most time we spend on figuring them out from documentation.
  15. 15. © 2015 Magento, Inc. Page | 15 Integration patterns  Redirect to Payment Provider  Hosted Page  Transparent Redirect  Client Side Encryption
  16. 16. © 2015 Magento, Inc. Page | 16 Redirect to Payment Provider
  17. 17. © 2015 Magento, Inc. Page | 17 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 Check Payment Provider Submit credentials on Payment Provider’s web-page Return to Checkout success page
  18. 18. © 2015 Magento, Inc. Page | 18 Redirect to Payment Provider 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 Check Payment Provider Submit credentials on Payment Provider’s web-page Return to Checkout success page
  19. 19. © 2015 Magento, Inc. Page | 19 Redirect to Payment Provider Step one
  20. 20. © 2015 Magento, Inc. Page | 20 Redirect to Payment Provider Step one 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
  21. 21. © 2015 Magento, Inc. Page | 21 Redirect to Payment Provider Step two 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
  22. 22. © 2015 Magento, Inc. Page | 22 Redirect to Payment Provider Components  Checkout UI Component  Merchant response callback  Redirect link provider Complexity  Low Estimation  2-3 weeks Summary
  23. 23. © 2015 Magento, Inc. Page | 23 Hosted page
  24. 24. © 2015 Magento, Inc. Page | 24 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
  25. 25. © 2015 Magento, Inc. Page | 25 Hosted Page Check Payment Provider Pay in secured iframe Checkout success 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
  26. 26. © 2015 Magento, Inc. Page | 26 Hosted Page Step one
  27. 27. © 2015 Magento, Inc. Page | 27 Hosted Page Step one 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
  28. 28. © 2015 Magento, Inc. Page | 28 Hosted Page Step two
  29. 29. © 2015 Magento, Inc. Page | 29 Hosted Page Step two 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
  30. 30. © 2015 Magento, Inc. Page | 30 Hosted Page Components  Checkout UI Component  Merchant response callback  Modal frame event listener  Frame link provider Complexity  Middle Estimation  4-5 weeks Summary
  31. 31. © 2015 Magento, Inc. Page | 31 Transparent Redirect
  32. 32. © 2015 Magento, Inc. Page | 32 Transparent Redirect 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 Check Payment Provider Pay “in store” Checkout success page
  33. 33. © 2015 Magento, Inc. Page | 33 Transparent Redirect 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 Check Payment Provider Pay “in store” Checkout success page
  34. 34. © 2015 Magento, Inc. Page | 34 Transparent Redirect
  35. 35. © 2015 Magento, Inc. Page | 35 Transparent Redirect
  36. 36. © 2015 Magento, Inc. Page | 36 Transparent Redirect Components  Checkout UI Component  Merchant response callback  Modal frame event listener  Form generator  Frame generator Complexity  High Estimation  5 weeks Summary
  37. 37. © 2015 Magento, Inc. Page | 37 Client Side Encryption
  38. 38. © 2015 Magento, Inc. Page | 38 Client Side Encryption 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
  39. 39. © 2015 Magento, Inc. Page | 39 Client Side Encryption 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 Check Payment Provider Pay “in store” Checkout success page
  40. 40. © 2015 Magento, Inc. Page | 40 Client Side Encryption
  41. 41. © 2015 Magento, Inc. Page | 41 Client Side Encryption Components  Checkout UI Component  Payment Provider encryption library Complexity  Low - Middle Estimate  Depends  2 weeks – 5 weeks Summary
  42. 42. © 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 42 4 Summary
  43. 43. © 2015 Magento, Inc. Page | 43 Summary  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
  44. 44. © 2015 Magento, Inc. Page | 44© 2015 Q/A

×