Push Payments

Example Project: Scan to Pay with Visa

Help enable cardholders to pay for services with a quick scan.

by: Visa Singapore Innovation Team

share...

When a cardholder is in a hurry, a scan to pay app with Visa capabilities can help let enrolled and eligible cardholders use their mobile device to scan a participating merchant’s QR code to quickly pay for an item or service. From food cards and taxis to restaurants and brick-and-mortar stores, merchants can make it easy for consumers to pay from their phone.

How does it work?

This app makes use of Visa APIs and microservices as well as third-party systems to provide a simple, easy user experience. In the back of the participating taxi, at the food cart, or in the store—wherever the user is, it can be simple to pay. Here’s an overview of the app. Below, you can find some information about how we created the application.


Merchant uses the app to create the QR code

The scan to pay app with Visa capabilities relies on the participating merchant creating a QR code for payment use. The merchant uses the mobile app to create the code by entering the fee amount (and any additional payment information). The mobile app generates the QR code, which the merchant can display on the phone or save and print for display.

Consumer scans the QR code

The consumer opens the mobile app on his or her phone and scans the posted QR code. The QR code maps to the merchant and merchant card which is the recipient of the payment made.

Enter the amount and pay

The vendor tells the user the total amount and, in the app, the user enters that amount and clicks to begin the transaction. Using the Funds Transfer API, the payment is processed.

Receive payment confirmation

The customer sees a confirmation in the app, and the merchant receives payment confirmation or a decline message, if there’s a problem.

Similar Use Cases

Placeholder image for video play_circle_outline

Scan to pay with Visa: Fast payments on-the-go

It can be easy to pay on the go with this mobile app. Vendors or merchants can generate a QR code that consumers scan to help quickly pay the bill, and move on.

Software and APIs

mVisa SDK

Visa API that enables simple, secure, and fast payments using mobile devices.

Learn More

VDP api nodejs client

The Node.js client library simplifies calling Visa APIs. Currently, it supports Funds Transfer API and mVisa API.

Go To Source

VDP nodejs client

The Node.js client library simplifies calling Mutual Auth or X-Pay Token based requests to Visa APIs.

Go To Source

Coding the App

The scan to pay app with Visa capabilities is designed for smartphones and makes use of a number of platforms, APIs, and microservices*. To create the app, our team used some of the following prerequisites and steps.

Note: For the example that follows, our team used Visa Developer APIs,  and an Apple® developer account along with Apple development and open source software.

 

To get started you may need:

  • A developer account with a smartphone provider. 
  • A recent version of the development software for use with such provider’s devices. (In this case, we used the Apple IOS® mobile development platform. You may choose to do otherwise.)
  • A Visa Developer Platform account (register here).
  • A new project with Visa Direct as an API (create here).*
  • The mVisa and mVisa merchant SDKs (download from here).
  • A tool for managing library dependencies for the provider’s software, such as  Xcode®1 and Cocoa®1 pods.

As a reference, Visa has provided sample code for this app. Find the reference implementation for this application on Visa GitHub.

 

To create this app, our team:

  1. Obtained the application code.

    Cloned the scan to pay GitHub repository or downloaded the code.

  2. Dragged and dropped the mVisa and mVisa merchant SDKs to the project root folder.

  3. Using a Terminal application, navigated to the project folder and then installed the required dependency libraries by typing:

    $pod install

  4. Opened the workspace file .xcworkspace.

  5. Linked the payMerchant endpoint to the server endpoint. 

    In the Constants.swift file, replace YOUR_ENDPOINT with the server name in the payMerchant endpoint:
    static let payMerchantEndpoint: String = "YOUR_ENDPOINT".

  6. Entered sample card information.

    In the controller file, for exampleViewController.swift, entered some sample card information, including:

    • Last four digits of the card in lastFourDigits.
    • Card type in cardType.
    • Network type .visa in networkType.
    For example:
    let card1 = MVisaCardDetails(lastFourDigits: "5678", cardType: "FDNB Platinum", issuerLogo: nil, cardArtColor: nil, cardArtOverlay: nil, networkType: .visa)
    let card2 = MVisaCardDetails(lastFourDigits: "1357", cardType: "FDNB Credit", issuerLogo: nil, cardArtColor: UIColor.brown, cardArtOverlay: nil, networkType: .visa)

  7. Created the HTTP request with the parameters required for a web request to the middleware.

    For example:

    let merchant = [ "acquiringBin": payMerchantResponse?.bin, "city": payMerchantResponse?.cityName!, "countryCode": payMerchantResponse?.countryCode!, "pan": payMerchantResponse?.mVisaMerchantPan!, "name": payMerchantResponse?.merchantName! ] as! [String: String] let transaction = [ "amount": payMerchantResponse?.currencyCode, "currencyCode": payMerchantResponse?.currencyCode ] as! [String: String] let parameters = ["merchant": merchant, "transaction": transaction]

  8. Sent the requested parameters to the middleware endpoint via the HTTP library.

    Alamofire.request(Constants.payMerchantEndpoint, method: .post, parameters: parameters, encoding: JSONEncoding.default) .responseJSON { response in debugPrint(response) }

Running the App

  1. Connect your smart phone to your computer.

  2. Run the application with the device as the target.

  3. Click the Merchant QR button to view the sample QR code. Save and print it.

  4. Then, on the main page of the app, tap the Scan to Pay button and scan the QR code.

  5. Enter an amount and then tap Pay.

  6. The amount is transferred between cards and confirmations are sent.

1 Apple®, Xcode®, IOS®, and Cocoa® are registered trademarks of Apple Inc.

Mutual Authentication Request

keyboard_arrow_right
Copied to clipboard 
Any use of this code is subject to the Visa Developer Terms of Use (developer.visa.com/terms) and constitutes acceptance of these Terms. 

let contextPath = 'visadirect/'
let resourcePath = 'mvisa/v1/merchantpushpayments'

instance.doMutualAuthRequest(contextPath+resourcePath,{},'POST',mVisaTransactionRequest)
 .then(response => {
  // do something with the response
 })
 .catch(err => {
  // do something with the response
 })

* VISA CONFIDENTIAL
Legal Disclaimer
All brand names and logos are the property of their respective owners, used for identification purposes only, and do not imply product endorsement or affiliation with Visa. Any links to third party sites are for your information only and equally do not constitute a Visa endorsement. Visa has no insight into and control over third party content and code and disclaims all liability for any such components, including continued availability and functionality. Benefits depend on implementation details and business factors and coding steps shown are exemplary only and do not reflect all necessary elements for the described capabilities. Depictions are illustrative only and use of capabilities and features are subject to Visa’s terms and conditions and may require development, implementation and resources by you based on your business and operational details. Please refer to the specific API documentation for details on the requirements, eligibility and geographic availability.

This website includes programs, concepts and details under continuing development by Visa. Any Visa features, functionality, implementation, branding, and schedules may be amended, updated or canceled at Visa’s discretion. The timing of widespread availability of programs and functionality is also subject to a number of factors outside Visa’s control, including but not limited to deployment of necessary infrastructure by issuers, acquirers, merchants and mobile device manufacturers.

Use of Visa Direct APIs in production requires the originator to be a licensed Visa acquirer or to obtain sponsorship by a licensed Visa acquirer and is subject to Visa’s review and approval.

Want to see more inspiration?

Return to Innovation Home