Magento Payment & Vault Framework overview: - Types of payment integrations in Magento - How to implement own payment method - Vaulting credit cards

1. © 2016 Magento, Inc. Page | 1
Magento Payment &
Vault
Framework

2. © 2016 Magento, Inc. Page | 2
Software Engineer at Magento
Ievgen Sentiabov

3. © 2016 Magento, Inc. Page | 3
Checkout

4. © 2016 Magento, Inc. Page | 4
Lifecycle
Add product to
the shopping
cart
Specify
shipping
address
Select shipping
carrier
Select payment
method
Order creationAll are happy

5. © 2016 Magento, Inc. Page | 5
Select shipping address

6. © 2016 Magento, Inc. Page | 6
Payment form

7. © 2016 Magento, Inc. Page | 7
PCI compliance
• HTTPS
• Encryption
• Do not store credit cards

8. © 2016 Magento, Inc. Page | 8
Order confirmation

9. © 2016 Magento, Inc. Page | 9
Payment Integrations

10. © 2016 Magento, Inc. Page | 10
Type of integrations
• Redirect to Payment Provider
• Hosted Page
• Transparent Redirect

11. © 2016 Magento, Inc. Page | 11
Redirect to Payment Provider
• PayPal Express Checkout
• eWAY Responsive Shared Page
• WorldPay HTML Redirect
Select payment
method
Redirect to
Payment
Provider
Return to the
store
Order creation

12. © 2016 Magento, Inc. Page | 12
Hosted Page
• Braintree Hosted Fields
• PayPal Payments Advanced
• PayPal Payflow Link
• PayPal WPPHS
• eWAY iframe
• Authorize.net Direct Post
Select payment
method
Pay in “iframe” Order creation

13. © 2016 Magento, Inc. Page | 13
Transparent Redirect
• PayPal Payflow Pro
• CyberSource Secure Acceptance
Select payment
method
Pay in store Order creation

14. © 2016 Magento, Inc. Page | 14
"+" "-"
Transparent Redirect More UI customization Less secure
More development
Redirect to Payment
Provider
Pay on trusted gateway
Easy for integration
Leave store to pay
Hosted Page All data in iframe Less UI customization
More difficulties with
additional features like
3D Secure

15. © 2016 Magento, Inc. Page | 15
How it works

16. © 2016 Magento, Inc. Page | 16

17. © 2016 Magento, Inc. Page | 17
Payment Provider
Gateway

18. © 2016 Magento, Inc. Page | 18
Evolution of integrations

19. © 2016 Magento, Inc. Page | 19
Evolution of integrations
• Inherits AbstractMethod • Configures Adapter via virtual
types
• Overrides via children
• methods
• Configuration via xml
• Inheritance • Composition
• Code duplication • Components

20. © 2016 Magento, Inc. Page | 20
Payment Gateway interaction

21. © 2016 Magento, Inc. Page | 21
Components
• Command Pool
• Gateway Command (authorization, invoicing)
• Request Builder
• Http/Soap/SDK Client
• Response Validator
• Response Handler

22. © 2016 Magento, Inc. Page | 22
Command Pool

23. © 2016 Magento, Inc. Page | 23
How to build request
• Extends
common BuilderComposite
• Builders implement
BuilderInterface
• Composite can contain other
composites

24. © 2016 Magento, Inc. Page | 24
Customer Builder
Payment Builder
Address Builder
array (
'request' => array (
'customer' => array (
'firstName' => 'John',
'lastName' => 'Doe',
'phone' => '444-44-444-44',
'email' => 'john.doe@magento.com',
),
'amount' => '18.00',
'paymentMethodNonce' => '16069c7e53066',
'orderId' => '000000006',
'billing' => array (
'streetAddress' => 'Somewhere under palm tree',
'locality' => 'Paradize City',
'region' => 'CA',
'postalCode' => '90230',
'countryCodeAlpha2' => 'US',
),
'shipping' => array (
'streetAddress' => 'Somewhere under palm tree',
'locality' => 'Paradize City',
'region' => 'CA',
'postalCode' => '90230',
'countryCodeAlpha2' => 'US',
),
),
);

25. © 2016 Magento, Inc. Page | 25
Request client
• Implementation of
MagentoPaymentGatewayHttpTransferFactoryInterface
• Client implements
• MagentoPaymentGatewayHttpClientInterface

26. © 2016 Magento, Inc. Page | 26
Validation
• Extends common ValidatorComposite
• A validator implements ValidatorInteface
public function validate(array $validationSubject);
• The validator should return implementation of ResultInterface

27. © 2016 Magento, Inc. Page | 27
Response handlers
• Handler implements
HandlerInterface
• List of handler and
extends HandlerChain

28. © 2016 Magento, Inc. Page | 28
Command
Combine all components for payment integrations

29. © 2016 Magento, Inc. Page | 29
Gateway
Command
Transfer
Factory
Request
Client
Payment
Processor
Validator Composite
Request Builder
Handler Chain
Handlers
execute subject request
request
requestresponse
response
Validators
Builders

30. © 2016 Magento, Inc. Page | 30

31. © 2016 Magento, Inc. Page | 31
Vault integration

32. © 2016 Magento, Inc. Page | 32

33. © 2016 Magento, Inc. Page | 33
Vault as part of payment integration

34. © 2016 Magento, Inc. Page | 34
Features
• Tokenized credit cards
• Does not require additional infrastructure
• Uses existing payment integration
• Adaptation for new requirements
• Testable code

35. © 2016 Magento, Inc. Page | 35
Common steps
1. Vault facade for existing payment integration
2. Handlers to store payment token
3. Vault commands (authorize, sale, etc.)
4. Providers to work with stored tokens

36. © 2016 Magento, Inc. Page | 36
How to store Payment Token
• Use one of available factories -> PaymentTokenInterfaceFactory
• Last 4 numbers
• Expiration date
• Credit card type
• Client details
Credit Card Account

37. © 2016 Magento, Inc. Page | 37
• Payment token creation
$paymentToken = $this->paymentTokenFactory->create();
$paymentToken->setGatewayToken($token);
$paymentToken->setTokenDetails(json_encode([
'type' => $transaction->cardDetails->cardType,
'maskedCC' => $transaction->cardDetails->last4,
'expirationDate' => $transaction->cardDetails->expirationDate
]));

38. © 2016 Magento, Inc. Page | 38
• Store payment token in Extension Attributes
$extAttrs = $payment->getExtensionAttributes();
$extAttrs->setVaultPaymentToken($paymentToken);

39. © 2016 Magento, Inc. Page | 39

40. © 2016 Magento, Inc. Page | 40
Display on Checkout Page
• Implementation of TokenUiComponentProviderInterface provider:
- Specify UI component for rendering
- Transmit data from Payment Token
• Add new provider to list of Vault providers components
<type name="MagentoVaultModelUiTokensConfigProvider">
<arguments>
<argument name="tokenUiComponentProviders" xsi:type="array">
<item name="sample" xsi:type="object">
SampleModelUiTokenUiComponentProvider
</item>
</argument>
</arguments>
</type>

41. © 2016 Magento, Inc. Page | 41

42. © 2016 Magento, Inc. Page | 42
Display in the customer profile
• Implement one of renderers: CardRendererInterface or
TokenRendererInterface
• Add to layout
<referenceContainer name="content">
<referenceBlock name="vault.cards.list">
<block class="MagentoSampleBlockCustomerCardRenderer" name="sample.car
d.renderer" template="Magento_Vault::customer_account/credit_card.phtml"/>
</referenceBlock>
</referenceContainer>

43. © 2016 Magento, Inc. Page | 43
Summary
• Different payment integrations can use the same
components
• Adaptation for new requirements
• Do not need to store credit cards
• Payment tokens more secure

44. © 2016 Magento, Inc. Page | 44
Useful links
http://devdocs.magento.com/guides/v2.1/payments-integrations/bk-payments-
integrations.html - How to add payment integration
https://github.com/magento/magento2-samples/tree/master/sample-module-
payment-gateway - Sample Payment Gateway
http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_pa
yment.html - Add payment method to the Checkout Page
http://www.slideshare.net/elogic_commerce/payment-integration-
patterns-magento2 - Types of payment integrations
https://plugins.jetbrains.com/plugin/8024 - Magento 2 PHPStorm Plugin