Quick Start
Let's get started with Volume in less than 5 minutes.
iOS xcframework for Volume is a library with custom view that allows you to display Volume checkout and start accepting payments from your customers in zero time into any iOS app.
Getting Started
Get started by installing VolumeComponent xcframework.
via Cocoapod
platform :ios, '14.0'
source 'https://github.com/CocoaPods/Specs.git'
source 'https://' + ENV['GIT_AUTHORIZATION'] + '@github.com/getvolume/VolumePods.git'
target 'SampleApp' do
use_frameworks!
pod 'Alamofire'
pod 'VolumePayComponent', '1.1.2'
end
Where GIT_AUTHORIZATION is environment variable made of github user and it's token volume-public:<token>
in that manner.
Token is provided by Volume.
e.g. volume-public:github_pat_72A4HWM8I0LwB3_T0kenProv1dedByV0lume__V3o9ZRvFBM5cmENW8vf8ES365KNJ7b6u7gY1
The best way to do this is to export shell variable as:
export GIT_AUTHORIZATION=volume-public:github_pat_72A4HWM8I0LwB3_T0kenProv1dedByV0lume__V3o9ZRvFBM5cmENW8vf8ES365KNJ7b6u7gY1
this will work only in your current terminal session if you prefer more permanent solution please consider adding this command to your .bashrc or .zshrc.
If you will encounter Cocoapod bug with runtime error:
RuntimeError - [Xcodeproj] Unknown object version (56).
the solution is described in stackoverflow (opens in a new tab)
Volume Provider & Volume Button
The volume provider should be placed at the root level of your application, this provides key global configuration for using volume in your application.
When VolumeProvider is initialized then you can add Volume button to your screen by adding VolumeButtonComponent
to ExampleAppView struct.
import VolumePayComponent
@main
struct ExampleApp: App {
init() {
do {
try volumeProvider.initialize(
volumeSetup: VolumeSetup(
applicationId: "", //provided by Volume
volumeEnvironment: "sandbox",
volumeEventListener: DefaultVolumeEventListener { message in
debugPrint(message)
},
showSandboxBanks: true,
maxPaymentAmount: 15000,
minPaymentAmount: 1,
volumeTranslations: [ // Optional parameter
"DE": VolumeTranslations(buttonText: "Bezahlen mit",
headingText: "Bezahlen Sie mit Ihrer Banking-App",
modalTitleText: "Bank-App auswählen",
modalSubtitleText: "Ihre Zahlung ist durch die Sicherheit Ihrer Bank geschützt",
moreBanksText: "+ mehr",
selectBankButtonText: "Wählen Sie zum Bezahlen die Bank-App aus",
payerDetailsText: "Bitte geben Sie Ihre Daten ein:",
accountHolderNameText: "Vorname und Nachname",
ibanText: "IBAN",
continueInBankText: "Weiter in der Bank-App")
]
)
)
} catch {
debugPrint(error)
}
}
class DefaultVolumeEventListener: VolumeEventListener {
let showEvent: (String) -> ()?
init(showToast: @escaping (String) -> ()?) {
showEvent = showToast
}
func onEvent(event: VolumeEvent) {
showEvent(event.description)
}
}
var body: some Scene {
WindowGroup {
ExampleAppView()
}
}
}
struct ExampleAppView: View {
@State private var currency: String = "EUR"
@State private var language: LanguageCode = "EN"
var body: some View {
VStack {
VolumeButtonComponent(
amount: 0.1,
reference: "iOS SDK",
currency: $currency,
merchantPaymentId: "iOS Payment 1",
isEnabled: true,
language: $language // Optional parameter
)
.padding(.horizontal, 15.0)
.padding(.vertical, 50)
}
}
}
Properties
Expand the section below for a quick glance at what you need to know.
VolumeProvider properties
Required Properties
key | type | example | description |
---|---|---|---|
applicationId | String | 123456789 | Your Application Id as provided in your Merchant Portal. (Provided by Volume) |
volumeEnvironment | String | sandbox | Environment to be used, this is either 'live' | 'sandbox' | A full URI if we have provided a specific environment for you. |
Optional Properties
key | type | example | description |
---|---|---|---|
onEvent | VolumeEventListener | Events | Event listener, object that reacts to Volume events, see Events for detailed instructions on how this works |
showSandboxBanks | Boolean | true | Flag to enable showing sandbox banks. Used for testing |
minPaymentAmount | Decimal | 0.01 (default: 0.01) | Minimum value for the amount field for each payment, when supplying a value smaller than this, a PAYMENT_AMOUNT_TOO_SMALL event will be emitted and the payment will not reach the volume api. |
maxPaymentAmount | Decimal | 15000 (default: 15000) | Maximum value for the amount field for each payment, when supplying a value greater than this, a PAYMENT_AMOUNT_TOO_LARGE event will be emitted and the payment will not reach the volume api. |
buttonCustomisation | ButtonCustomisation | Tweak the look and feel of the Volume button, properties to make changes to the colours, text, and border of the button. | |
volumeTranslations | [String: VolumeTranslations] | Map of VolumeTranslations per language like "EN" or "DE". Allows to translate Volume component. |
For more information on Events with onEvent
. Check out Events.
VolumePaymentView has following setters
key | type | constraints | example | description |
---|---|---|---|---|
amount | Decimal | Min 0.01 | 1 | Amount to be paid, ie £1.00. |
currency | String | ISO 4217 | GBP | Currency of payment |
reference | String | Max 18 chars, Alphanumeric | ABC-123 | Pass a bank transfer reference, it will be visible by both a client and merchant in bank transfer history. |
merchantPaymentId | String (Optional) | Max 50 chars, unique per payment | 123456 | Pass a merchantPaymentId to associate a unique identifier for the payment, this will be returned to you in any webhook or api responses for the given payment |
isEnabled | Boolean | true | Changes the Enabled/Disabled state of the Volume button | |
language | String | EN | Sets the language to be used on Volume component |
Implementing the after payment screen (Callback) in mobile app
Upon completion of the payment process, users are directed back from the banking app to your app using a callback via an app link or universal link.
Volume accepts only https
links, which means traditional deep links like myapp://callback are not supported.
Instead, we recommend using App Links and Universal Links, such as https://myDomain.com/callback (opens in a new tab), for their superior security, user experience, seamless integration, and web fallback capabilities.
Android:
About app links (opens in a new tab)
Create Deep Links to App Content (opens in a new tab)
iOS:
Supporting universal links in your iOS app (opens in a new tab)
Supporting associated domains on iOS (opens in a new tab)
Flutter:
Flutter app links library (opens in a new tab)
Universal links on Flutter (opens in a new tab)
React Native:
React Native linking documentation (opens in a new tab)
React Native app links tutorial (opens in a new tab)
Documentation for the Volume Callback parameters: Callback
iOS Banks detection required setup (Your project Info.plist
file needs to be updated)
To make bank detection work Apple require we add some values in your Info.plist to indicate intent to work with app schemes, we use this to detect which banking apps the end user has installed on their phone so that we can show them only banks they have installed.
To complete the setup there are some <string>
tags we need to add under the LSApplicationQueriesSchemes
key in Info.plist file.
<key>LSApplicationQueriesSchemes</key>
<array>
<string>BMBGB</string>
<string>revolut</string>
<string>natwestbank</string>
<string>monzo</string>
<string>santanderuk</string>
<string>rbs</string>
<string>lloyds-retail</string>
<string>ukcomhsbcmobilebanking</string>
<string>zappcfi437759</string>
<string>hsbc-pwnwguti5z</string>
<string>zapp</string>
<string>launchAIB</string>
<string>ie.aib.mobilebanking</string>
<string>BOIOneAPP</string>
<string>halifax-retail</string>
<string>starlingbank</string>
<string>tescobank</string>
<string>tsbmobile</string>
<string>sparda-app</string>
<string>bankingappspardaproduktion</string>
<string>secureappspardaproduktion</string>
<string>sapp-pushtan</string>
<string>sapp-invest</string>
<string>de.sparda.securego</string>
</array>
Testing
After you have completed the steps above, then you can start testing.
We strongly recommend to use sandbox environment before switching to live environment.
Please note that sandbox testing will not open the Banking app due to lack of testing environment offered by the different banks in the UK. However, a successful test will open the bank environment via the browser. The user experience will differ bank by bank. Ask us more information at support@getvolume.com or use the chat in this page to get immediate assistance.
Please check Sandbox Banks Credentials to be able to test with Natwest Sandbox and other sandbox banks.