Payment UI

Integrate the Payment UI wrapper to add a built-in interface for accepting card payments using the VP3300 reader.

Prerequisites

To integrate and launch the payment UI flow, ensure you have following:

✅ An API access key issued to you by Xplor Pay.

Visit Let's Get Started - Xplor Pay to get API access key.

✅ A public key issued to you by Xplor Pay.

Visit Let's Get Started - Xplor Pay to get API access key.

✅ A sandbox URL for testing the integration.

Contact Xplor Pay Getting Started to get Sandbox URL.

1

Add Podfile to the project

To add and configure a Podfile in your project:

1. Create or open your Xcode project.
2. Navigate to the project root directory.

Open Terminal and run:

cd <project-root-path>

1. Initialize CocoaPods.

Run:

pod init

If CocoaPods is not installed, install it by running:

sudo gem install cocoapods

1. Open and edit the Podfile.

Replace the contents with the following:

pod file

source 'https://github.com/xplor-pay/CocoaPods.git'
source 'https://github.com/CocoaPods/Specs.git'
# Uncomment the next line to define a global platform for your project
# platform :ios, '13.0'
target 'PROJECTNAME' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  pod 'ClearentIdtechIOSFrameworkPod', '4.0.158' 
  # Pods for ExampleSwift
end

1. Update the target name and pod version.

   • Replace PROJECTNAME with your Xcode target name.
   • Verify that you are using the latest pod version.
2. Install the dependencies.

Run:

pod install

1. Open the .xcworkspace file generated by CocoaPods.

The Podfile is added and configured. CocoaPods installs the dependencies and updates your project with the required settings and build configurations.

2

Import the framework

In the file where you trigger the payment flow, import the framework:

import ClearentIdtechIOSFramework

The framework is available in your code file, enabling you to access APIs required to initiate the payment flow.

3

Initialize the SDK

Before presenting the payment UI, initialize the SDK with your API credentials:

ClearentUIManager.shared.initialize(
    with: ClearentUIManagerConfiguration(
        baseURL: "<YOUR_BASE_URL>",
        apiKey: "<YOUR_API_KEY>",
        publicKey: "<YOUR_PUBLIC_KEY>",
        softwareType: "<YOUR_APP_NAME>",
        softwareTypeVersion: "<YOUR_APP_VERSION>"
    )
)

Configuration values

Use the following values when configuring the SDK:

Field name	Data type	Required?	Description
baseURL	String	Required	The API endpoint for the selected environment. Use the sandbox URL (https://gateway-int.clearent.net) for testing. Use the production URL (https://gateway.clearent.net) for live transactions.
apiKey	String	Required	The API key associated with your account and environment. Provided to you during onboarding with Xplor Pay.
publicKey	String	Required	The public key associated with your account and environment. Provided to you during onboarding with Xplor Pay.
softwareType	String	Required	The name of your application used for support purposes. Maximum length is 255 characters.
softwareTypeVersion	String	Required	The version of your application used for support purposes. Maximum length is 255 characters.

The SDK is initialized with your credentials and environment. Your app is ready to present the payment UI.

4

Launch the payment UI

From your view controller, create a PaymentInfo object and present the payment UI:

let paymentInfo = PaymentInfo(
    amount: 20.00,
    customerID: "<YOUR_CUSTOMER_ID>",
    invoice: "<YOUR_INVOICE_NUMBER>",
    orderID: "<YOUR_ORDER_ID>",
    billing: ClearentIdtechIOSFramework.ClientInformation,
    shipping: ClearentIdtechIOSFramework.ClientInformation,
    softwareType: "<YOUR_APP_NAME>"
)
ClearentUIManager.shared.paymentViewController(
    paymentInfo: paymentInfo,
    completion: completion
)

This call presents the full payment flow, including card reader pairing, transaction input, and receipt handling. No additional configuration is required for a basic integration.

5

Select the payment method

Call this method when the user switches between payment options.

1. Use the cardReaderPaymentIsPreferred property to control which payment method is shown:

   • true → Uses the card reader flow.
   • false → Displays the manual card entry form.
2. Set this property before presenting the payment UI. The PaymentViewController reads this value to determine which flow to display.

func updatePaymentMethod(useCardReader: Bool) {
    ClearentUIManager.shared.cardReaderPaymentIsPreferred = useCardReader
}

The payment UI is displayed, allowing users to complete transactions using either a card reader or manual entry.