How to implement payment gateway integration for non-credit card on Magento2
-
Upload
hirokazu-nishi -
Category
Engineering
-
view
439 -
download
12
Transcript of 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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
The purpose of this session
• Learn what is “non-credit card payment”
• How to implement these kinds of payment method on Magento2
Page. 4
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
Server to Server
integration
Move to other site
Integration type
Page. 9
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
Server side Client Side
Page. 10
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
Server side
You have to know Payment module’s structure
Page. 11
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
Structure of payment module (~ 2.0.6)
Connection Class
Transaction
Order
Info
AbstractMethod
Cc Other methods
Other Cc methods
Free
authorizecapturerefundcancelinitialize...etc
Page. 12
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
Server Side Client Side
Page. 17
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
Adjust templates
• Define input form elements & knockout.js syntaxes.
• Frontend developers have to know which element needs which function & data sources.
Page. 23
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
sample
<div class="payment-method-content"> <div class="field number required"> <label data-bind="attr: {for: getCode() + '_available_type'}" class="label"> <span><!-- ko i18n: 'Name'--><!-- /ko --></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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
Server to Server
integration
Move to other site
Integration type
Page. 25
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
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
CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved.
That's allAny Questions?