Magento Payment Gateway ​Integration Tutorial - PowerPoint PPT Presentation

About This Presentation

Magento Payment Gateway ​Integration Tutorial


Want to give a payment option to your online customer? All you need to add a payment gateway with your Magento Store. To learn the procedure of Payment Gateway integration with Your Magento eCommerce Store, read our blog. – PowerPoint PPT presentation

Number of Views:123


Transcript and Presenter's Notes

Title: Magento Payment Gateway ​Integration Tutorial

(No Transcript)
  • 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.

Best Way to Integrate Payment Gateways in Magento
  • 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

  • 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
  • Virtual terminal fees 3.1 0.30 for each
    domestic transaction extra 1 for cross-border
  • Steps to integrate PayPal
  • You require a JavaScript checkout.js script for
    integrating Express Checkout (PayPal provides
  • 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

(No Transcript)
  • 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
  • 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.

  • onCancel()
  • It is called when the payment is canceled.
    Usually, the consumer is taken back to the basic
  • 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.

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

  • Steps to integrate
  • 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//
  • Production API Endpoint https//
  • XML Content-Type text/xml
  • JSON Content-Type application/json
  • API Schema (XSD) https//

  • For integrating the, below are the
  • 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.

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

  • 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// and integrated on the web
  • 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
  • Create an instance of elements that appears as
  • var stripe Stripe(pk_test_6pRNASCoBOKtIshFeQd4X
  • 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.

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

(No Transcript)
  • 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
  • fontSize 16px,
  • color 32325d,

  • // Create an instance of the card Element.
  • var card elements.create(card, style
  • // Add an instance of the card Element into the
  • 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.

  • Step 3 Generate a token to transmit card data
  • 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
  • // 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)

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

  • 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,
  • form.appendChild(hiddenInput)
  • form.submit()

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
  • 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

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

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

  • 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
  • Develop the Credential section.

(No Transcript)
  • 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
  • When the credential is accurate, get the
    configuration done. Or, edit the details and try

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!

Contact us
CORPORATE ADDRESS 305, 3110 Main St building
2, Santa Monica USA, 90405 Email ID Phone No. 1
323-739-5672 Visit Us Social
Source https//
(No Transcript)
Write a Comment
User Comments (0)