)
```
{% endhint %}
### 2.3 Complete the payment on your app
#### **Fetch a Payment**
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.
{% tabs %}
{% tab title="Swift" %}
```swift
var paymentSession: PaymentSession?
paymentSession?.initPaymentSession(paymentIntentClientSecret: paymentIntentClientSecret)
```
{% endtab %}
{% tab title="SwiftUI" %}
```swift
@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)
```
{% endtab %}
{% endtabs %}
#### **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.
{% tabs %}
{% tab title="Swift" %}
```swift
@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.")
}
})
}
```
{% hint style="danger" %}
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.
{% endhint %}
{% endtab %}
{% tab title="SwiftUI" %}
```swift
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
}
```
{% endtab %}
{% endtabs %}
### 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.
{% tabs %}
{% tab title="Swift" %}
//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
}
}
}
{% endtab %}
{% tab title="SwiftUI" %}
```swift
@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() }
```
{% endtab %}
{% endtabs %}
Congratulations! Now that you have integrated the iOS SDK, you can customize the payment sheet to blend with the rest of your app.
## Next step:
{% content-ref url="../../../../payment-orchestration/quickstart/payment-methods-setup" %}
[payment-methods-setup](https://docs.hyperswitch.io/~/revisions/iPtyU5MKxmgIsGywgRhI/explore-hyperswitch/payment-orchestration/quickstart/payment-methods-setup)
{% endcontent-ref %}