Payment integration patterns в Magento2
Transcript of Payment integration patterns в Magento2
![Page 1: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/1.jpg)
© 2015 Magento, Inc. All rights reserved.
Payment integration patterns in Magento2
Dmytro KvashninSoftware engineer 3 at Magento
19 Dec 2015
MAGENTO 2 RELEASE EVENT CHERNIVTSI
![Page 2: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/2.jpg)
© 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
![Page 3: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/3.jpg)
© 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?
![Page 4: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/4.jpg)
© 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 4
1 Magento Checkout Infrastructure
![Page 5: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/5.jpg)
© 2015 Magento, Inc. Page | 5
Magento Checkout Infrastructure
Checkout
Quote
Shipments
PaymentsCatalog
Customer
![Page 6: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/6.jpg)
© 2015 Magento, Inc. Page | 6
Checkout life cycle
Add AddressApply
coupon/other stuff
Add Shipping provider
Add PaymentCreate Order
![Page 7: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/7.jpg)
© 2015 Magento, Inc. Page | 7
Notice!
Create Order == Add Payment
![Page 8: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/8.jpg)
© 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 8
2 Magento2 Web-Services
![Page 9: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/9.jpg)
© 2015 Magento, Inc. Page | 9
Magento2 Web-Services
Magento2 SOAP
and REST API
Client browse
r
Mobile App CRM
…
![Page 10: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/10.jpg)
© 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” }}
![Page 11: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/11.jpg)
© 2015 Magento, Inc. Page | 11
Magento2 Service 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>
![Page 12: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/12.jpg)
© 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
![Page 13: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/13.jpg)
© 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 13
3 Integration patterns
![Page 14: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/14.jpg)
© 2015 Magento, Inc. Page | 14
Why should I know them?
Because most time we spend on figuring them out from documentation.
![Page 15: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/15.jpg)
© 2015 Magento, Inc. Page | 15
Integration patterns
Redirect to Payment Provider
Hosted Page
Transparent Redirect
Client Side Encryption
![Page 16: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/16.jpg)
© 2015 Magento, Inc. Page | 16
Redirect to Payment Provider
![Page 17: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/17.jpg)
© 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
![Page 18: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/18.jpg)
© 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
![Page 19: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/19.jpg)
© 2015 Magento, Inc. Page | 19
Redirect to Payment ProviderStep one
![Page 20: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/20.jpg)
© 2015 Magento, Inc. Page | 20
Redirect to Payment ProviderStep one
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
![Page 21: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/21.jpg)
© 2015 Magento, Inc. Page | 21
Redirect to Payment ProviderStep two
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
![Page 22: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/22.jpg)
© 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
![Page 23: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/23.jpg)
© 2015 Magento, Inc. Page | 23
Hosted page
![Page 24: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/24.jpg)
© 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 securediframe
Checkout success page
![Page 25: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/25.jpg)
© 2015 Magento, Inc. Page | 25
Hosted Page
Check Payment Provider
Pay in securediframe
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
![Page 26: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/26.jpg)
© 2015 Magento, Inc. Page | 26
Hosted PageStep one
![Page 27: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/27.jpg)
© 2015 Magento, Inc. Page | 27
Hosted PageStep one
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
![Page 28: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/28.jpg)
© 2015 Magento, Inc. Page | 28
Hosted PageStep two
![Page 29: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/29.jpg)
© 2015 Magento, Inc. Page | 29
Hosted PageStep 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 \Magento\Framework\App\Action\Action
Web-service /V1/hosted-page/:cartId/callback
Checkout Place order service –
Web-service /V1/carts/mine/payment-information
![Page 30: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/30.jpg)
© 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
![Page 31: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/31.jpg)
© 2015 Magento, Inc. Page | 31
Transparent Redirect
![Page 32: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/32.jpg)
© 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
![Page 33: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/33.jpg)
© 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
![Page 34: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/34.jpg)
© 2015 Magento, Inc. Page | 34
Transparent Redirect
![Page 35: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/35.jpg)
© 2015 Magento, Inc. Page | 35
Transparent Redirect
![Page 36: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/36.jpg)
© 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
![Page 37: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/37.jpg)
© 2015 Magento, Inc. Page | 37
Client Side Encryption
![Page 38: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/38.jpg)
© 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
![Page 39: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/39.jpg)
© 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
![Page 40: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/40.jpg)
© 2015 Magento, Inc. Page | 40
Client Side Encryption
![Page 41: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/41.jpg)
© 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
![Page 42: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/42.jpg)
© 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 42
4 Summary
![Page 43: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/43.jpg)
© 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
![Page 44: Payment integration patterns в Magento2](https://reader034.fdocuments.net/reader034/viewer/2022042611/58792ab91a28ab7c448b54b9/html5/thumbnails/44.jpg)
© 2015 Magento, Inc. Page | 44© 2015
Q/A