Payment integration patterns в Magento2

© 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

© 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


What’s the plan

Magento2 Checkout Infrastructure

Web-Services

Payment Integration patterns Redirect to Payment Provider

Hosted Page

Transparent Redirect

Client Side Encryption

Code?

© 2015 Magento, Inc. All rights reserved.© 2015 Magento, Inc. Page | 4

1 Magento Checkout Infrastructure


Magento Checkout Infrastructure

Checkout

Quote

Shipments

PaymentsCatalog

Customer


Checkout life cycle

Add AddressApply

coupon/other stuff

Add Shipping provider

Add PaymentCreate Order


Notice!

Create Order == Add Payment


2 Magento2 Web-Services


Magento2 Web-Services

Magento2 SOAP

and REST API

Client browse

r

Mobile App CRM

…


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” }}


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>


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


3 Integration patterns


Why should I know them?

Because most time we spend on figuring them out from documentation.


Integration patterns

Redirect to Payment Provider

Hosted Page







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



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


Submit credentials on Payment Provider’s web-page

Return to Checkout success page


Redirect to Payment ProviderStep one


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


Redirect to Payment ProviderStep two

Subjects

Payment provider – Payment page on provider side

Merchant response callback (Response handler, Redirect page)


Web-service /V1/hosted-page/:cartId/callback



Components

Checkout UI Component

Merchant response callback

Redirect link provider

Complexity

Low

Estimation

2-3 weeks

Summary


Hosted page


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


Pay in securediframe

Checkout success page


Hosted Page


Pay in securediframe


Pros


Easy to implement

Customer stays on Merchant web-site

Cons

3D secure and other payment solutions can be not supported by this method


Hosted PageStep one


Hosted PageStep one

Subjects

HP Client Component –

UiComponent extended from Magento_Checkout/js/view/payment/default

HP Link Provider –


Web-service /V1/my-hosted-page/:cartId/link

Checkout Place order service –

Web-service /V1/carts/mine/payment-information


Hosted PageStep two


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)


Web-service /V1/hosted-page/:cartId/callback

Checkout Place order service –

Web-service /V1/carts/mine/payment-information


Hosted Page

Components



Modal frame event listener

Frame link provider

Complexity

Middle

Estimation

4-5 weeks

Summary





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


Pay “in store”




Pros


Form is fully customizable

May not submit order with failed payment verification

Cons

Requires coding

3D secure can be not supported


Pay “in store”








Components



Modal frame event listener

Form generator

Frame generator

Complexity

High

Estimation

5 weeks

Summary





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


Pay “in store”




Pros


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


Pay “in store”






Components


Payment Provider encryption library

Complexity

Low - Middle

Estimate

Depends 2 weeks – 5 weeks

Summary


4 Summary


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

© 2015 Magento, Inc. Page | 44© 2015

Q/A