The VolumeSelector allows you to indicate to your customers which banks are available to them.
This is suitable to be placed in the checkout flow of your application if you for example have multiple payment options available to your customers with radio buttons.
Usage
Initialize the VolumeProvider class in exactly the same way as with the regular Volume Button
Add a widget to your application where you wish to render the Volume as a payment option.
ZStack {
Rectangle()
.foregroundColor(Color(hex: "#DCDDE8"))
.cornerRadius(5)
.frame(maxWidth: .infinity, maxHeight: 54)
HStack(alignment: .center) {
VolumeSelector(
country: country,
currency: currency,
size: 35.0
).padding()
Text("Pay With Bank App")
.fontWeight(.semibold)
.font(.custom("NotoSans-Regular", size: 18))
.frame(maxWidth: .infinity)
VolumeInfo(size: 20.0)
Image(systemName: "largecircle.fill.circle")
.padding()
}
.frame(maxWidth: .infinity, idealHeight: 54, alignment: .leading)
}
.padding(.horizontal, 12.0)Properties
VolumeSelector properties
Required Properties
| key | type | example | description |
|---|---|---|---|
| country | String | "GB" | The country - used to show the banks only from given country |
| currency | String | "GBP" | The currency - used to show the banks only supporting given currency |
| size | Double | 35.0 | Size of the component |