Integrate hyper SDK to your Swift App using hyperswitch-node
Use this guide to integrate Hyperswitch SDK to your iOS app. You can use the following app as a reference with your Hyperswitch credentials to test the setup. You can also checkout the app on Apple Testflight to test the payment flow.
Request your server to fetch a payment as soon as your view is loaded. Store the client_secret returned by your server. The PaymentSession will use this secret to complete the payment process.
var paymentSession: PaymentSession?
paymentSession?.initPaymentSession(paymentIntentClientSecret: paymentIntentClientSecret)
@ObservedObject var model = BackendModel()
@Published var paymentSheet: PaymentSession?
@Published var paymentResult: PaymentSheetResult?
// handle result
func onPaymentCompletion(result: PaymentSheetResult) {
DispatchQueue.main.async {
self.paymentResult = result
}
}
paymentSession?.initPaymentSession(paymentIntentClientSecret: paymentIntentClientSecret)
Handle Payment Result
Handle the payment result in the completion block and display appropriate messages to your customer based on whether the payment fails with an error or succeeds.
@objc
func openPaymentSheet(_ sender: Any) { //present payment sheet
var configuration = PaymentSheet.Configuration()
configuration.merchantDisplayName = "Example, Inc."
paymentSession?.presentPaymentSheet(viewController: self,
configuration: configuration,
completion: { result in
switch result {
case .completed:
print("Payment complete")
case .failed(let error):
print("Payment failed: \(error.localizedDescription)")
case .canceled:
print("Payment canceled.")
}
})
}
Please retrieve the payment status from the Hyperswitch backend to get the terminal status of the payment. Do not rely solely on the status returned by the SDK, as it may not always reflect the final state of the transaction.
VStack {
if let paymentSession = model.paymentSession {
PaymentSheet.PaymentButton(paymentSession: paymentSession,
configuration: configuration(),
onCompletion: model.onPaymentCompletion)
{
Text("Hyper Payment Sheet")
.padding()
.background(.blue)
.foregroundColor(.white)
.cornerRadius(10.0)
}
if let result = model.paymentResult {
switch result {
case .completed:
Text("Payment complete")
case .failed(let error):
Text("Payment failed: \(error.domain)")
case .canceled:
Text("Payment canceled.")
}
}
}
}.onAppear { model.preparePaymentSheet() }
// setup configuration for payment sheet
func configuration() -> PaymentSheet.Configuration {
var configuration = PaymentSheet.Configuration()
configuration.merchantDisplayName = "Example, Inc."
return configuration
}
3. Card Element (Beta)
Create a card element view and pay button and handle the payment result in the completion block and display appropriate messages to your customer based on whether the payment fails with an error or succeeds.
//Create a card element view and pay button.
lazy var hyperCardTextField: PaymentCardTextField = {
let cardTextField = PaymentCardTextField()
return cardTextField
}()
lazy var payButton: UIButton = {
let button = UIButton(type: .custom)
button.layer.cornerRadius = 5
button.backgroundColor = .systemBlue
button.setTitle("Pay", for: .normal)
button.addTarget(self, action: #selector(pay), for: .touchUpInside)
return button
}()
@objc
func pay() {
guard let paymentIntentClientSecret = model.paymentIntentClientSecret else {
return
}
let paymentIntentParams = PaymentIntentParams(clientSecret: paymentIntentClientSecret)
let paymentHandler = PaymentHandler.shared()
paymentHandler.confirmPayment(paymentIntentParams, with: self)
{ (status, paymentIntent, error) in
switch (status) {
case .failed:
break
case .canceled:
break
case .succeeded:
break
@unknown default:
fatalError()
break
}
}
}
@ObservedObject var model = BackendModel()
@State var paymentMethodParams: PaymentMethodParams?
VStack {
PaymentCardTextField.Representable(paymentMethodParams: $paymentMethodParams)
.padding()
//Create a card element view and pay button.
if let paymentIntent = model.paymentIntentParams {
Button("Buy")
{
paymentIntent.paymentMethodParams = paymentMethodParams
isConfirmingPayment = true
}
.disabled(isConfirmingPayment || paymentMethodParams == nil)
.paymentConfirmationSheet(
isConfirmingPayment: $isConfirmingPayment,
paymentIntentParams: paymentIntent,
onCompletion: model.onCompletion
)
}
else {
ProgressView()
}
if let paymentStatus = model.paymentStatus {
PaymentHandlerStatusView(actionStatus: paymentStatus,
lastPaymentError: model.lastPaymentError)
}
}.onAppear { model.preparePaymentIntent() }
Congratulations! Now that you have integrated the iOS SDK, you can customize the payment sheet to blend with the rest of your app.