Integrate Turbo UPI UI

Steps to integrate Razorpay Turbo UPI with your app.


Use Razorpay Turbo UPI to make UPI payments faster. Follow these steps to integrate with the Razorpay Turbo UPI UI SDK.

Prerequisites

  1. Contact our

    to get your mobile number, app, and GitHub account whitelisted to get access to the https://github.com/upi-turbo/ios-sample-app - sample app repository. In this repository, you will find the framework files (libraries for Turbo) and the sample app source code to help you with the integration. Use branch custom_ui/turbo_ui to access sample app and frameworks for Turbo UPI with UI.

  2. Integrate with the

    .

  3. Add the following lines to your Podfile for Turbo pod installation:

    pod 'razorpay-customui-pod'
    pod 'razorpay-turbo-ui-pod'
  4. Import the Turbo plugin as given below:

    import Razorpay
    import TurboUpiPlugin

Watch Out!

  • The minimum supported iOS version for using Turbo UPI is currently 11.0.
  • Use the rzp_test_0wFRWIZnH65uny API key id for testing on the UAT environment and the for prod testing.

Follow these steps:

  1. Initialise the SDK and set up the Checkout instance (Razorpay) to handle payment outcomes like success and errors by listening to delegate methods.

    var razorpay = RazorpayCheckout.initWithKey(
    "rzp_test_0wFRWIZnH65uny",
    andDelegate: self,
    withPaymentWebView: wkWebView,
    UIPlugin: RazorpayTurboUPI.UIPluginInstance
    )
  2. You need to link the customer's UPI account with your app. Use the below code samples to fetch the UPI account.

    Watch Out!

    If the device binding is not completed and getLinkedUpiAccounts is triggered, it will return an OnError with a DEVICE_BINDING_INCOMPLETE error message.

    • Get the customer's linked UpiAccount list using the below code. This function can be called from anywhere in the application, providing multiple entry points for customers to link their UPI account with your app.
    razorpay?.upiTurboUI?.getLinkedUpiAccounts("9000090000", resultDelegate: self)

    Request Parameters

    mobile_num

    string The customer's mobile number.

    Delegate

    object The Delegate to be sent is of type UpiTurboResultDelegate.

    • If your customer has already linked the UPI account, use the following code to fetch it. If there are no linked UPI accounts, an empty list is returned.

      extension ViewController: UPITurboResultDelegate {
      func onSuccessFetchingLinkedAcc(_ accList: [UpiAccount]) {
      if accList.count > 0 {
      print("Success Fetching Accounts")
      } else {
      // call linkNewUpiAccount()
      }
      }
      func onErrorFetchingLinkedAcc(_ error: TurboUpiPlugin.TurboError?) {
      print("Error: \(error?.errorDescription)")
      print("Error code: \(error?.errorCode)")
      }
      }
  3. If the customer has not linked any UPI account, there are two methods to link UPI accounts:

    • Link one UPI account at a time:
      Use the following code to link the newly created UPI account with your app. This function can be called from anywhere in the application, providing multiple entry points for customers to link their UPI account with your app.
    self.razorpay?.upiTurboUI?.linkNewUpiAccount(
    mobileNumber: "9000090000",
    color: "<accent-color>",
    completionHandler: { upiAccounts, error in
    print(upiAccounts)
    }
    )
    • Prefetch and Link multiple accounts together:
      Use the following code to prefetch and link multiple UPI accounts from popular banks. The list of prefetch banks can be configured from the Merchant admin dashboard. This function is versatile and can be called from anywhere in the application, offering customers multiple entry points to link their UPI accounts with your app.
    self.razorpay?
    .upiTurboUI?
    .setCustomerMobile(mobile: "<mobile_num>")
    .setColor(color: "<accent-color>")
    .prefetchAndLinkUpiAccountsWithUI(completionHandler: { accounts, error in
    if let allAccounts = accounts as? UpiAllAccounts {
    if let bankAccount = allAccounts.accountsWithPinSet?[0] as? UpiBankAccount {
    switch bankAccount.state {
    case .linkingInProgress:
    // Show account is linking
    break
    case .linkingFailed:
    // Show account linking failed
    break
    default:
    // Not possible in prefetch flow
    break
    }
    } else if let upiAccount = allAccounts.accountsWithPinSet?[0] as? UpiAccount {
    // Continue payment
    }
    // Display accountsWithPinNotSet in expandable section - with Set Pin button
    }
    })

    Request Parameters

    mobile_num

    mandatory

    string Customer's mobile number needed to initialise the SDKs.

    color

    string Colour in HEX format.

    • Use the following function to set the UPI PIN for accounts where the PIN has not been set.
    self.razorpay?
    .upiTurboUI?
    .setUPIPinWithUI(account, completionHandler: { upiAccount, error in
    print(upiAccount)
    })

    Request Parameter

    account

    mandatory

    UpiBankAccount This is the bank account the user wants to set UPI PIN.

  4. The Reward feature allows you to allocate rewards to users without specific criteria. To avail rewards, you need to configure them from the dashboard. You can seamlessly integrate this function into your application, providing multiple entry points for users to check their rewards eligibility before completing a payment.

    razorpay.upiTurboUI?.getRewardForCustomer(
    mobileNumber: "9000090000",
    action: RewardAction.payment,
    amount: "10000",
    rewardsDelegate: self
    )
    extension ViewController: UpiTurboCustomerRewardsDelegate {
    func onSuccess(_ reward: CustomerReward) {
    // Handle success
    }
    func onFailure(_ error: TurboError?) {
    // Handle failure
    }
    }

    Request Parameters

    mobileNumber

    mandatory

    string The customer's mobile number.

    action

    mandatory

    RewardAction This parameter specifies the action to check reward eligibility. Possible values:

    • onboarding: To check reward eligibility for Onboarding.
    • payment: To check reward eligibility for Payment.

    amount

    optional

    string The transaction amount expressed in the currency subunits.

    rewardsDelegate

    mandatory

    delegate This parameter allows you to receive callbacks regarding reward eligibility.

  5. To process the payments, call the authorize method of custom checkout with the provided payload. Upon receiving the PaymentData response, you will also receive rewardStatus along with the payment response. Please note that the rewardStatus key will be present in the response only if your eligible for a reward.

    let turboPayload: [AnyHashable: Any] = [
    "currency": "INR",
    "amount": "700",
    "email": "gaurav.kumar@example.com",
    "contact": "9000090000",
    "method": "upi",
    "upi": [
    "flow": "in_app"
    ],
    "order_id": "order_L2MUBUOeFItcpU", // Optional
    ]
    turboPayload["upiAccount"] = upiAccount
    razorpay?.authorize(turboPayload)
    extension ViewController: RazorpayPaymentCompletionProtocol {
    func onPaymentSuccess(_ payment_id: String, andData response: [AnyHashable: Any]) {
    let rewardStatus = response["rewardStatus"]
    // Show payment success screen with reward if rewarded
    }
    func onPaymentError(_ code: Int32, description str: String, andData response: [AnyHashable: Any])
    {
    // Handle payment error
    }
    }

    Request Parameters

    customer_id

    optional

    string Unique identifier of the customer to whom the Customer Identifier must be tagged. Create a customer using the

    amount

    mandatory

    integer The transaction amount expressed in the currency subunit. For example, for an actual amount of ₹299.35, the value of this field should be 29935.

    currency

    mandatory

    string The currency in which the transaction should be made.

    email

    mandatory

    string Email address of the customer.

    contact

    mandatory

    string Customer's phone number.

    order_id

    optional

    string Order id generated via the

    .

    method

    mandatory

    string The payment method used by the customer on Checkout. In this case, it is upi (default).

    upi

    mandatory

    Details of the UPI payment.

    flow

    string Type of the UPI method. In this case, it is in_app.

You can directly interact with the exposed methods of the Turbo Framework to perform the non-transactional flows listed below.

Manage UPI Accounts

Let Razorpay SDK manage the linked UpiAccounts on the applications by triggering manageUpiAccounts().

self.razorpay?.upiTurboUI?.manageUpiAccount(
mobileNumber: "<mobile_num>",
color: "<accent-color>"
)

To get the device binding status, please use the variable razorpay.upiTurbo.deviceBindingDone of type boolean. It indicates whether the device binding, which is a prerequisite for adding UPI accounts, is done with the user's mobile number.

if self.razorpay?.upiTurboUI?.deviceBindingDone {
// Device Binded
} else {
// Call Link New Account for Device Binding
}

The SDKs given below provide access to exposed models for seamless integration.

UpiAccount

UpiBankAccount

UpiBankAccountState

UpiBank

TurboError

[This is the latest version of the list and was last updated on February 27th, 2024]

CustomerReward

Reward

PaymentData

RewardAction

We recommend the following:

  • Complete the integration on UAT before using the prod builds.
  • Perform the UAT using the Razorpay-provided API keys.

Complete these steps to take your integration live:

  • You should get your app id whitelisted by Razorpay to test on prod.

    Handy Tips

    Contact our

    to get your mobile number and app whitelisted.

  • Import the prod library from the Github repository → https://github.com/upi-turbo/ios-sample-app custom_ui/turbo_ui branch.

  • Switch to Prod environment and podfile.

  • Replace the UAT credential with the

    for prod testing.


Is this integration guide useful?