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

CONFIDENTIAL Copyright© 2016 Veriteworks Inc. All Rights Reserved.

How to implement paymentgateway integration for

non-credit card on Magento2

Page. 2

CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.

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. 3


The purpose of this session

• Learn what is “non-credit card payment”

• How to implement these kinds of payment method on Magento2

Page. 4


E-Commerce and Payments

• Credit Card• PayPal• Cash on

Delivery• Bank Payment• Convenience

Store Payment• Electronic

Money

• Deferred Payment

• Shopping Loan• Bitcoin?• Union Payment• AliPay

Page. 5


CVS & Bank Payment

• Customers can pay after placing order at store or ATM.

• Merchants just wait until their customers payment.

• Most of services have notify API like PayPal’s IPN notification.

• If customers won’t pay until their payment term day, merchants can cancel their order.

Page. 6


Deferred Payment & Shopping Loan

• Payment gateways review each transaction.

• Sometimes they return “Under examination” response.– It’s as same as PayPal’s “Fraud

detection”

• Magento has to keep order’s state “Payment Review”

• Payment gateways notify examination results to specified URL.

Page. 7


What should we know?

Server Side Client Side

XML files

Design Patterns

Modern PHP require.js

knockout.js

UI component

LESS

HTML5

config.xmldi.xml

payment.xmllayout xml

Page. 8


Server to Server

integration

Move to other site

Integration type

Page. 9


Server side Client Side

Page. 10


Server side

You have to know Payment module’s structure

Page. 11


Structure of payment module (~ 2.0.6)

Connection Class

Transaction

Order

Info

AbstractMethod

Cc Other methods

Other Cc methods

Free

authorizecapturerefundcancelinitialize...etc

Page. 12


Structure of payment module (2.0.6 ~)

Adapter valueHandlerPool

validatorPool

commandPool

commands

BuilderComposite

TransferFactory

ClientInterface

HandlerChain

ValidatorInterface

validators

handlers

ValueHandlerInterfaceValueHandlerInterface

ValidatorInterfaceValidatorInterface

BuilderInterfaceBuilderInterface

HandlerInterfaceHandlerInterface

CommandInterface

authorizecapturerefundcancelinitialize...etc

Payment Gateway

Page. 13


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. 14


For non-credit card Payment

• Set 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 don’t have “refund”, “cancel”, “capture” API.• You have to refund their bank account

directly.

Page. 15


For non-creditcard Payment

• “initialize” is good for non-Credit Card Payment• Set “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. 16


Server Side Client Side

Page. 17


Client side

• Extend “Magento_Checkout/js/action/place-order”• You have to learn Require.js

• knockout.js & templates

• Use ConfigProvider and JS functions• Magento2 can’t pass any variables

directly to templates like Magento1.x

Page. 18


What is ConfigProvider?

• One of the Data Transfer Object– Implement ConfigProviderInterface

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

Page. 19


Example

class 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. 20


Define JS functions

• Needs to override or define some functions

• Override initObservable– add observer for custom input fields

• Override getData– assign input fields value for payment info data

• Define config data loading methods from “window.checkoutConfig.payment”

• Define select box options array generator

Page. 21


sample

initObservable: 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. 22


Adjust templates

• Define input form elements & knockout.js syntaxes.

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

Page. 23


sample

<div class="payment-method-content"> <div class="field number required"> <label data-bind="attr: {for: getCode() + '_available_type'}" class="label"> <span></span> </label> <div class="control"> <select name="payment[available_type]" class="select select-type" data-bind="attr: {id: getCode() + '_available_type', 'data-container': getCode() + '-available-type', 'data-validate': JSON.stringify({required:true})}, enable: isActive($parents), options: getAvailableValues(), optionsValue: 'value', optionsText: ’code', optionsCaption: $t('-- Please Select --'), value: availableType"> </select> </div> </div></div>

Page. 24


Server to Server

integration

Move to other site

Integration type

Page. 25


move to other site

• POST payment request data from hidden form.

• Need custom controller for redirecting to payment gateway page.– You have to change “window.location” to

redirect form URL.

• If they allow to use iframe for displaying their payment page, you can use it.

Page. 26


placeOrder: function (data, event) { var self = this; if (event) { event.preventDefault();}

if (this.validate() && additionalValidators.validate()) { this.isPlaceOrderActionAllowed(false);

this.getPlaceOrderDeferredObject() .fail(function () { self.isPlaceOrderActionAllowed(true); } ) .done(function () { if (self.redirectAfterPlaceOrder) { window.location.replace(url.build(path/to/redirect/')); } } ); return true; } return false;}

Page. 27


Receive result

• Create controller for receiving result data from payment gateway.

• Update order information with the result data.

• Order::save(), Order::delete() are in deprecated status.– Use “OrderRepository” for save/delete

orders.

Page. 28


public function execute(){ /** @var \Magento\Sales\Api\OrderRepositoryInterface $this->_orderRepository */ /** @var \Magento\Sales\Model\Order $order */ $order = $this->_orderRepository->get($orderId); $method = $order->getPayment()->getMethodInstance(); $this->_coreRegistry->register('isSecureArea', true, true);

if($method->someHandlingMethod(/** Your required params **/)) { $this->_orderRepository->save($order); $this->_redirect('checkout/onepage/success'); } else { $order->cancel();

$this->_session->restoreQuote();

$this->_orderRepository->delete($order); $this->_redirect('checkout/cart'); }}

Page. 29


Receive or Fetch latest payment status

• Receiving latest payment status from the service is same as PayPal IPN.

• Fetch latest payment status should be implemented as cron job.

• Please read Payment Gateways’ documents.

Page. 30


That's allAny Questions?

Engineering

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