How to implement payment gateway integration for non-credit card on Magento2

  • View
    409

  • Download
    11

Embed Size (px)

Transcript

0

How to implement paymentgateway integration fornon-credit card on Magento2

CONFIDENTIAL Copyright 2016 Veriteworks Inc. All Rights Reserved.

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

0

About me...CTO of Veriteworks Inc.

Working with Magento since 2007.

Organizer of Magento Japanese user groupsince 2008.

Japanese locale maintainer for M1 & M2.

@hirokazu_nishi

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

The purpose of this sessionLearn what is non-credit card payment

How to implement these kinds of payment method on Magento2

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

E-Commerce and PaymentsCredit CardPayPalCash on DeliveryBank PaymentConvenience Store PaymentElectronic MoneyDeferred PaymentShopping LoanBitcoin?Union PaymentAliPay

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

3

CVS & Bank PaymentCustomers can pay after placing order at store or ATM.

Merchants just wait until their customers payment.

Most of services have notify API like PayPals IPN notification.

If customers wont pay until their payment term day, merchants can cancel their order.

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

4

Deferred Payment & Shopping LoanPayment gateways review each transaction.

Sometimes they return Under examination response.Its as same as PayPals Fraud detection

Magento has to keep orders state Payment Review

Payment gateways notify examination results to specified URL.

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

5

What should we know?

Server SideClient SideXML filesDesign PatternsModern PHPrequire.jsknockout.jsUI componentLESSHTML5config.xmldi.xmlpayment.xmllayout xml

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

If you hope to implement payment module for Magento2, you have to know 2 sides of knowledge.One is server side, and the other is client side.

The first one is Modern PHP. It means, namespace, generator, closure, reflection, traits, and many new features of PHP. These are not used in Magento1.x.Next is Design Patterns. Magento2 uses many design patterns. Its good for you to learn Gung of Fours before you start working with Magento2.Third is XML files. Both Magento1 and 2 use XML files for configuration. Magento2 has XSD files for all XML files. you have to understand each XML files meaning and purpose.

Client side,You have to know require.js and knockout.js. These are important for frontend development on Magento2.And also UI component has many useful Javascript components.LESS & HTML5 are necessary for frontend development. No doubt to use them for web development.6

Server to Server integrationMove to other siteIntegration type

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

Server sideClient Side

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

Server sideYou have to know Payment modules structure

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

Structure of payment module (~ 2.0.6)Connection ClassTransactionOrderInfoAbstractMethodCcOther methodsOther Cc methodsFreeauthorizecapturerefundcancelinitialize...etc

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

before 2.0.6, Payment module was inheritance based implementation. Like Magento1.All payment methods are subclass of AbstractMethod and implement many command methods. Then each payment method class was easy to become complex and huge.Of course, payment method class needs other classes for processing payment process.

This structure is same as Magento1.x. So we can understand it really easy, but difficult to write test codes.

10

Structure of payment module (2.0.6 ~)AdaptervalueHandlerPoolvalidatorPoolcommandPoolcommandsBuilderCompositeTransferFactoryClientInterfaceHandlerChainValidatorInterfacevalidatorshandlersValueHandlerInterfaceValueHandlerInterfaceValidatorInterfaceValidatorInterfaceBuilderInterfaceBuilderInterfaceHandlerInterfaceHandlerInterfaceCommandInterfaceauthorizecapturerefundcancelinitialize...etcPayment Gateway

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

After 2.0.6, AbstractMethod was deprecated. We can use Adapter class for implementing payment method.

Adapter uses many other elements, but Id like to show you 3 in this slide.valueHandlerPool. validatorPool and commandPool.

ValueHandlerPool has classes of accessing Configuration Values. You can get configuration values through these handlers.ValidatorPool has classes of payment parameter validation logic. You can check each parameters of payment request in simple separate classes.

CommandPool has payment action classes array. All command classes implement CommandInterface.Command classes use many related classes.

BuilderComposite is aggregator of payment request parameter builders.TransferFactory is converter for parameter that generated by builders.ClientInterface is a connector class. It has http client for sending payment request to the gateway server.ValidatetorInterface is response data validator. You can check the gateway returns valid response or not.HandlerChain is response data handling interface class. You can implement concrete logic for processing payment result data.11

2.0.6 or later, you have to know...VirtualType on di.xml

Interfaces, OOP, Design Patterns

No need to extend Adapter

Command classes use many related classes

Each commands are implemented as simple & separated classes.

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

For non-credit card PaymentSet order state to new.

Set order status to pending payment.or you can create dedicated status for it.

Merchants have to wait until customers payment.

Most APIs dont have refund, cancel, capture API.You have to refund their bank account directly.

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

For non-creditcard Paymentinitialize is good for non-Credit Card PaymentSet true for can_initialize value

Relate transaction with order and payment manually.Otherwise, Magento set order status as processing

Save API response data into transaction additional data field for announcing payment information to your customer.receipt number, due date, etc...

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

Server SideClient Side

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

Client sideExtend Magento_Checkout/js/action/place-orderYou have to learn Require.js

knockout.js & templates

Use ConfigProvider and JS functionsMagento2 cant pass any variables directly to templates like Magento1.x

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

16

What is ConfigProvider?One of the Data Transfer ObjectImplement ConfigProviderInterface

Define getter for system configuration variables of your payment method as array

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

Exampleclass CvsProvider implements ConfigProviderInterface{ public function getConfig() { $config = []; if ($this->method->isAvailable()) { $config = ['payment' => [ 'example_payment' => [ 'availableTypes' => $this->getAvailableTypes(), ]] ]; } return $config; }

protected function getAvailableTypes() { $configData = []; //generate configData array from configuration data. return $configData; }}

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

Define JS functionsNeeds to override or define some functions

Override initObservableadd observer for custom input fields

Override getDataassign input fields value for payment info data

Define config data loading methods from window.checkoutConfig.payment

Define select box options array generator

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

sampleinitObservable: function () { this._super() .observe([ availableType' ]);

return this;},getData: function () { return { 'method': this.item.method, 'additional_data': { available_type': this.availableType() } };},getExampleValues: function () { return _.map(this.getExampleTypes(), function (value, key) { return { 'value': key, code': value }; });}

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

Adjust templatesDefine input form elements & knockout.js syntaxes.

Frontend developers have to know which element needs which function & data sources.

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

sample

Page. #

CONFIDENTIALCopyright 2016 Veriteworks Inc. All Rights Reserved.

Server to Server integrationMove to othe