Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,245 views

Published on

Meet Magento 2016 Indonesia's presentation.
Describe Magento2 payment module structure & non-credit card payment.

Published in: Engineering
  • this is of no use as there are missing pieces
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved. How to implement payment gateway integration for non-credit card on Magento2
  2. 2. Page. 1 CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved. About me... • CTO of Veriteworks Inc. • Working with Magento since 2007. • Organizer of Magento Japanese user group since 2008. • Japanese locale maintainer for M1 & M2. • @hirokazu_nishi
  3. 3. Page. 2 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
  4. 4. Page. 3 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
  5. 5. Page. 4 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.
  6. 6. Page. 5 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.
  7. 7. Page. 6 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.xml di.xml payment.xml layout xml
  8. 8. Page. 7 CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved. Server to Server integration Move to other site Integration type
  9. 9. Page. 8 CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved. Server side Client Side
  10. 10. Page. 9 CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved. Server side You have to know Payment module’s structure
  11. 11. Page. 10 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 authorize capture refund cancel initialize ...etc
  12. 12. Page. 11 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 ValueHandlerInterface ValueHandlerInterface ValidatorInterface ValidatorInterface BuilderInterface BuilderInterface HandlerInterface HandlerInterface CommandInterface authorize capture refund cancel initialize ...etc Payment Gateway
  13. 13. Page. 12 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.
  14. 14. Page. 13 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.
  15. 15. Page. 14 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...
  16. 16. Page. 15 CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved. Server Side Client Side
  17. 17. Page. 16 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
  18. 18. Page. 17 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
  19. 19. Page. 18 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; } }
  20. 20. Page. 19 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
  21. 21. Page. 20 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 }; }); }
  22. 22. Page. 21 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.
  23. 23. Page. 22 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>
  24. 24. Page. 23 CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved. Server to Server integration Move to other site Integration type
  25. 25. Page. 24 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.
  26. 26. Page. 25 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; }
  27. 27. Page. 26 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.
  28. 28. Page. 27 CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved. public function execute() { /** @var MagentoSalesApiOrderRepositoryInterface $this->_orderRepository */ /** @var MagentoSalesModelOrder $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'); } }
  29. 29. Page. 28 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.
  30. 30. Page. 29 CONFIDENTIALCopyright© 2016 Veriteworks Inc. All Rights Reserved. That's all Any Questions?

×