Magento Payment Gateway ​Integration Tutorial

1
(No Transcript)
2
Introduction

• Online shopping has gained popularity among
  customers. It is here to stay! Only 2 out of 10
  prefer to shop offline. For shopping online, the
  payments should be online. Statista has revealed
  that the total transaction value in the Digital
  Payments segment is estimated to reach
  US6,752,388m in 2021.
• Till 2022, for digital commerce, the transaction
  value will be US5,411,354. It shows that you
  must offer your potential customers online
  payment opportunities. And of course, for that,
  you need to integrate them into your eCommerce
  website. Magento eCommerce development services
  can be taken from the leading company intended
  basically for payment integration.

3
Best Way to Integrate Payment Gateways in Magento
Store
4
Paypal

• This platform is used by most Millennials. The
  main aim is to receive payments and boost revenue
  levels for those customers who have this account.
  The big companies integrate it as an extra
  payment method.
• For integration, Express API is used it is a
  convenient and fast method. Below is an example
  of the Express checkout and standard PayPal
  processing fee
• No monthly or setup fees
• US fees 2.9 0.30 for each transaction.
• International fees 3.9 0.30 for each
  transaction.

5

• PayPal Payments Pro processing fees
• No setup fees.
• 30 monthly fee.
• US fees 2.9 0.30 for each transaction.
• International fees 3.9 0.30 for each
  transaction.
• Virtual terminal fees 3.1 0.30 for each
  domestic transaction extra 1 for cross-border
  transactions.
• Steps to integrate PayPal
• You require a JavaScript checkout.js script for
  integrating Express Checkout (PayPal provides
  this).
• To use the button, just integrate the checkout.js
  script to the customer
• Add the code below on the page where you want to
  impart the PayPal Button

6
(No Transcript)
7

• By using the PayPal checkout script, configure
  the look of the button on the Magento website.
  Also, describe the outline when the buyer cancels
  or authorizes the payment. Find what appears when
  an error occurs
• paypal-button
• Container component in which the button is
  rendered.
• Style
• Button appearance customization.
• payment()
• When the consumer clicks on the button, it
  appears. It lets you set up and return the
  payment to begin the checkout process.
• onAuthorize()
• This function appears when the customers log in
  and go for payment authorization. The
  confirmation page performs here.

8

• onCancel()
• It is called when the payment is canceled.
  Usually, the consumer is taken back to the basic
  page.
• onError()
• It is used in case of any error occurrence.
• paypal-button
• This is a container element to render the button.
• For integration, there are many options, like
• Braintree SDK
• Client-side Rest
• Server-side REST.
• The method that goes with the business
  requirements can be chosen. Remember to test all
  before allowing the customers to use the payment
  form live.

9
Authorize.net

• Authorize.Net is a popular payment gateway due
  to customizable integration, easy-to-use checkout
  opportunities, subscription-based additional
  features and fraud protection services, etc.
• Below is the information on processing fees
• 49 setup fee, paid just once.
• 25 chargeback fee.
• 25 getaway fee every month.
• Transaction fee is 2.9 0.30.

10

• Steps to integrate Authorize.net
• For accessing Authorize.Net API, you have to make
  a sandbox account from the merchant
  authentication. Every request is sent from the
  HTTP POST technique to the API endpoints URLs.
• HTTP Request Method POST
• Sandbox API Endpoint https//apitest.authorize.ne
  t/xml/v1/request.api
• Production API Endpoint https//api.authorize.net
  /xml/v1/request.api
• XML Content-Type text/xml
• JSON Content-Type application/json
• API Schema (XSD) https//api.authorize.net/xml/v1
  /schema/AnetApiSchema.xsd

11

• For integrating the authorize.net, below are the
  options
• Advanced Integration Method (AIM)
• Server Integration Method (SIM)
• Direct Post Method (DPM)
• Simple Checkout
• These offer various levels of control and
  compliance, possess various SSL requirements and
  business types. What best you can do is that you
  can examine the official site and select the best
  possible solution.

12
Stripe

• Stripe came to market some time back, and the
  popularity it gains in less time is tremendous.
  The payment gateway is customizable and advises
  complex and state of art features like accepting
  payments from third-party applications or
  marketplace or subscriptions.
• It is easily customizable, which implies the
  expert Magento developers can manage everything
  according to the business requirements. Below is
  an example of the processing fee
• No monthly fees and No setup fees
• 15 dispute or chargeback fee.
• Transaction fee is 2.9 0.30 per transaction.
• Bitcoin or ACH processing fee is 0.8 5 cap.

13

• Steps to integrate Stripe
• Step 1 Fix Stripe Elements
• From Stripe.js, the stripe elements can be found
  out. The script can be loaded easily from
  https//js.stripe.com and integrated on the web
  page.
• It is better to use the script on the checkout
  and other web pages as well if fraud protection
  is your concern. Hence, Stripe can find out the
  anomalous behavior and save the site from
  breaching.
• Create an instance of elements that appears as
• var stripe Stripe(pk_test_6pRNASCoBOKtIshFeQd4X
  MUh)
• var elements stripe.elements()
• Replace the general API key above with an actual
  publishable API key. Therefore, you can test the
  code with the account on Stripe. Always remember
  to change it with the live key for production use
  when you want to receive the customers payments.
  

14

• Step 2 Generate a payment form
• The elements will make UI components hosted by
  Stripe. They gather the card information from the
  customers and make it secure. There is no need to
  create them manually because they can be placed
  from there only.
• For including the components in a suitable area,
  make empty DOM containers with a new ID in the
  payment form. The right way is to insert the
  container next to or within the attribute related
  to the element container ID. This will create an
  element that automatically attracts focus when
  the customer selects the label.

15
(No Transcript)
16

• When the forms get loaded, build an instance of
  an element and use it in the element container
• // Custom styling can be passed to options when
  creating an Element.
• var style
• base
• // Add your base input styles here. For
  example
• fontSize 16px,
• color 32325d,

17

• // Create an instance of the card Element.
• var card elements.create(card, style
  style)
• // Add an instance of the card Element into the
  card-element
• card.mount(card-element)
• The card element lessens the number of fields and
  converts the form simply. It is to create a
  flexible, single input field gathering the
  required data.

18

• Step 3 Generate a token to transmit card data
  securely
• Every payment collected from elements should be
  converted to a token. Check the submit constantly
  on the form by making an event handler. It sends
  the information to Stripe and limits the
  submission.
• // Create a token or display an error when the
  form is submitted.
• var form document.getElementById(payment-form)
  
• form.addEventListener(submit, function(event)
• event.preventDefault()
• stripe.createToken(card).then(function(result)

19

• if (result.error)
• // Inform the customer that there was an
  error.
• var errorElement document.getElementById(c
  ard-errors)
• errorElement.textContent
  result.error.message
• else
• // Send the token to your server.
• stripeTokenHandler(result.token)
• )
• )

20

• Step 4 Submit the token and the other form to
  the server
• Then, the token should be submitted to the server
  with other details settled. Below is how it
  appears on JavaScript
• function stripeTokenHandler(token)
• // Insert the token ID into the form so it gets
  submitted to the server
• var form document.getElementById(payment-form
  )
• var hiddenInput document.createElement(input)
  
• hiddenInput.setAttribute(type, hidden)
• hiddenInput.setAttribute(name, stripeToken)
• hiddenInput.setAttribute(value, token.id)
• form.appendChild(hiddenInput)
• form.submit()

21
Amazon Payments

• Amazon Pay enables the clients to create the
  financial transaction on-site for easy checkout
  using one account. It is secure and flexible
  provides services of two types to businesses
  Amazon Simple Pay (ASP) and Checkout by Amazon
  (CBA).
• ASP redirects the client to Amazons secure
  payment website to fill in the payment details.
  Whereas CBA as an eCommerce solution allows the
  business owners to accept the account details and
  leverage Amazon for payment processing. Know
  about its processing fee below
• No monthly or setup fees
• Same pricing as Stripe 2.9 0.30 per
  transaction.

22

• Step to integrate Amazon Pay
• Before starting the process, below are the
  requirements that you should follow for
  completing the Amazon Pay Setup in Admin
• A verified Amazon Pay merchant account
  (https//pay.amazon.com/signup)
• Amazon Pay seller credentials
• Connect to Amazon Pay
• From the Admin sidebar, navigate to
  Store-gtSettings-gt Configuration.
• Fix the Scope from the upper-left scope to find
  out where to apply the Amazon Pay configuration.
• Grow sales from the left panel and select the
  Payment gateways.
• Choose configure for Amazon Pay.

23

• With no account information for Amazon Pay,
  select Get started for registering the new
  account from the Amazon Seller Central.

24

• After getting the account details, complete the
  below sections
• Credentials
• The process of transferring credentials is done
  automatically from an Amazon Pay account to
  Admin. They can be discovered from the Amazon
  Seller Central in Sandbox and Production modes.
• Sandbox mode Configure credentials
• Choose the test credentials for Amazon Pay
  Sandbox.
• Develop the Credential section.

25
(No Transcript)
26

• Merchant Id
• Access Key Id
• Secret Access Key
• Client ID
• Client Secret
• .

• For Credentials JSON, choose to enter the JSON
  string of every Amazon Pay sellers details.
• It can be used to fix the values for Access Key
  ID, Merchant ID, Client ID, Secret Access Key,
  and Client Secret on save and clear for the
  values which are manually entered.
• Change Sandbox to Yes.
• Fix the Payment Region for the store.
• After completing, select Save Config for
  validating the supplied details.
• Search for the Your Amazon configuration is
  valid message from the configuration page top
  side.
• When the credential is accurate, get the
  configuration done. Or, edit the details and try
  again

27
Concluding Remarks

• Despite the payment solution, you pick, keep your
  business needs in mind, consider what fits the
  best. Work on the number of transactions you
  need to work on every month and how many you are
  planning in the future. So, consider different
  options and find out if they are going along with
  the eCommerce website objective.
• Consider that the sites integrating payment
  methods are more liked by customers. In case you
  need any piece of advice on payment gateway
  integration, contact with expert Magento
  developers of Magentofx. We will discuss and
  give you the solutions that will be helpful!
  Thanks for reading!

28
Contact us
CORPORATE ADDRESS 305, 3110 Main St building
2, Santa Monica USA, 90405 Email ID
sales_at_magentofx.com Phone No. 1
323-739-5672 Visit Us magentofx.com Social
Source https//magentofx.com/magento-payme
nt-gateway-integration/
29
(No Transcript)