Pay In Payment Flow is Payabli’s native mobile UI for card and ACH payments in your app. It owns sensitive field state and renders a hosted form, so your app never touches raw card or bank data. See Tap to Pay if you’re looking for Payabli’s contactless payment component instead.

Prerequisites

Before you start, confirm you have:

• Xcode 15 or later and Swift 5.9 or later
• iOS 16.7 or later as your deployment target
• A Payabli sandbox entryPoint with card and ACH enabled
• A Payabli clientId and clientSecret. See OAuth authentication to provision them.

Installation

Install PayabliSDKPayInPaymentFlow from the sdk-ios Swift package:

 https://github.com/payabli/sdk-ios.git

1
.package(url: "https://github.com/payabli/sdk-ios.git", branch: "main")

1
.product(name: "PayabliSDKPayInPaymentFlow", package: "sdk-ios")

1
import PayabliSDKPayInPaymentFlow

Backend token endpoint

The Pay In Payment Flow component authenticates every request with a short-lived Payabli access token, obtained through an accessTokenProvider closure you implement. Your backend holds the Payabli clientId and clientSecret, exchanges them for the access token, and never exposes them to your mobile app.

$
mkdir payabli-token-proxy
$
cd payabli-token-proxy
$
npm init -y
$
npm pkg set type=module

$
npm install express cors dotenv

1
// server.js
2
import "dotenv/config";
3
import express from "express";
4
import cors from "cors";
5
6
const app = express();
7
app.use(cors(), express.json());
8
9
const PAYABLI_URL = process.env.PAYABLI_URL || "https://api-sandbox.payabli.com/api";
10
const { PAYABLI_CLIENT_ID, PAYABLI_CLIENT_SECRET } = process.env;
11
12
app.post("/payabli/token", async (req, res) => {
13
  const upstream = await fetch(`${PAYABLI_URL}/v2/Token/serverside`, {
14
    method: "POST",
15
    headers: { "Content-Type": "application/json" },
16
    body: JSON.stringify({
17
      clientId: PAYABLI_CLIENT_ID,
18
      clientSecret: PAYABLI_CLIENT_SECRET,
19
    }),
20
  });
21
22
  res.status(upstream.status).json(await upstream.json());
23
});
24
25
app.listen(process.env.PORT || 3000, () =>
26
  console.log("Token server ready"));

$
node server.js

1
let accessTokenProvider: PayabliPayInPaymentFlowAccessTokenProvider = {
2
    try await backend.fetchPayInAccessToken()
3
}

Operations

PayabliPayInPaymentFlow’s operation parameter selects the hosted form’s behavior:

• .storePaymentMethod — Tokenizes a card or ACH account for later use, without charging it.
• .capture — Authorizes and captures a card or ACH payment in one step.
• .authorize — Authorizes a card payment without capturing it. Card only. ACH and stored payment methods are rejected before the request is sent.

Implementation walkthrough

This walkthrough builds a minimal card or ACH capture, from constructing PayabliPayInPaymentFlow through rendering the hosted form:

1
import SwiftUI
2
import PayabliSDKPayInPaymentFlow
3
4
func fetchPayInAccessToken() async throws -> String {
5
    var request = URLRequest(url: URL(string: "https://your-backend.example.com/payabli/token")!)
6
    request.httpMethod = "POST"
7
    request.addValue("application/json", forHTTPHeaderField: "Content-Type")
8
9
    struct Response: Decodable { let access_token: String }
10
    let (data, _) = try await URLSession.shared.data(for: request)
11
    return try JSONDecoder().decode(Response.self, from: data).access_token
12
}
13
14
@MainActor
15
final class CheckoutViewModel: ObservableObject {
16
    let paymentFlow: PayabliPayInPaymentFlow
17
18
    init(entryPoint: String) {
19
        paymentFlow = PayabliPayInPaymentFlow(
20
            entryPoint: entryPoint,
21
            environment: .sandbox,
22
            accessTokenProvider: {
23
                try await fetchPayInAccessToken()
24
            },
25
            operation: .capture,
26
            requestConfiguration: PayabliPayInPaymentFlowRequestConfiguration(
27
                paymentDetails: PayabliPayInPaymentFlowPaymentDetails(
28
                    totalAmount: 1.00,
29
                    currency: "USD"
30
                ),
31
                orderDescription: "iOS checkout",
32
                source: "ios-sdk"
33
            )
34
        )
35
    }
36
}
37
38
struct CheckoutView: View {
39
    @StateObject var viewModel: CheckoutViewModel
40
41
    var body: some View {
42
        PayabliPayInPaymentFlowView(
43
            component: viewModel.paymentFlow,
44
            configuration: PayabliPayInPaymentFlowFormConfiguration(),
45
            onCompleted: { result in
46
                guard let transaction = result.transaction else { return }
47
                print("Payment captured:", transaction.paymentTransId ?? "")
48
            },
49
            onError: { error in
50
                print("Payment failed:", error.localizedDescription)
51
            }
52
        )
53
    }
54
}

Implementation reference

PayabliPayInPaymentFlowFormConfiguration and PayabliPayInPaymentFlowRequestConfiguration control field layout, labels, and request data for every operation. PayabliPayInPaymentFlowSheetConfiguration controls the sheet presentation.

PayabliPayInPaymentFlowFormConfiguration fields

This hosted form is shared by all three operations. See Operations for what each one does.

PayabliPayInPaymentFlowRequestConfiguration fields

Used by hosted capture and authorize forms, and by the direct capture/authorize/authorized-capture APIs. Not used for .storePaymentMethod.

PayabliPayInPaymentFlowSheetConfiguration fields

Controls the sheet presentation for .payabliPayInPaymentFlowSheet(...). The sheet wraps the same hosted form as PayabliPayInPaymentFlowView, so configuration, requestConfiguration, and style still apply:

1
Button("Add Payment Method") {
2
    isPresented = true
3
}
4
.payabliPayInPaymentFlowSheet(
5
    isPresented: $isPresented,
6
    component: paymentFlow,
7
    configuration: configuration,
8
    sheetConfiguration: PayabliPayInPaymentFlowSheetConfiguration(
9
        title: "Add Payment Method",
10
        dismissButton: .close
11
    ),
12
    onCompleted: { result in
13
        print(result.storedPaymentMethod?.storedMethodId ?? "")
14
    }
15
)

Response reference

PayabliPayInPaymentFlowResult is a unified wrapper for both token-storage and transaction operations.

Theming & diagnostics

Style the hosted form to match your app and inspect network activity for debugging:

1
let diagnostics = PayabliPayInPaymentFlowDiagnostics.enabled { entry in
2
    print(entry.phase, entry.method, entry.statusCode ?? 0)
3
}

Example app

The sdk-ios repository includes PayabliDemo, a SwiftUI example app that exercises PayabliPayInPaymentFlow and PayabliTTP (card/ACH capture and Tap to Pay), alongside a bundled local Node.js token server for testing.

$
git clone https://github.com/payabli/sdk-ios.git
$
cd sdk-ios/Example/PayabliDemo

1
enum Secrets {
2
    static let entryPoint = "your-sandbox-entry-point"
3
    static let appId = "ABCDE12345.com.yourcompany.app"
4
    static let placeholderAccessToken = "placeholder-token"
5
    static let partnerTokenEndpoint = URL(string: "https://your-backend.example.com/payabli/token")!
6
    static let partnerPaymentMethodAccessTokenEndpoint = URL(string: "http://127.0.0.1:8787/payabli/access-token")!
7
    static let paymentMethodDiagnosticsEnabled = false
8
    static let paymentCaptureDiagnosticsEnabled = paymentMethodDiagnosticsEnabled
9
10
    static func fetchAccessToken() async throws -> String {
11
        var request = URLRequest(url: partnerTokenEndpoint)
12
        request.httpMethod = "POST"
13
        let (data, _) = try await URLSession.shared.data(for: request)
14
        struct TokenResponse: Decodable { let accessToken: String?; let access_token: String? }
15
        let response = try JSONDecoder().decode(TokenResponse.self, from: data)
16
        if let token = response.accessToken ?? response.access_token { return token }
17
        throw URLError(.userAuthenticationRequired)
18
    }
19
20
    static func fetchPaymentMethodAccessToken() async throws -> String {
21
        var request = URLRequest(url: partnerPaymentMethodAccessTokenEndpoint)
22
        request.httpMethod = "POST"
23
        let (data, _) = try await URLSession.shared.data(for: request)
24
        struct PaymentMethodTokenResponse: Decodable { let accessToken: String?; let access_token: String? }
25
        let response = try JSONDecoder().decode(PaymentMethodTokenResponse.self, from: data)
26
        if let token = response.accessToken ?? response.access_token { return token }
27
        throw URLError(.userAuthenticationRequired)
28
    }
29
30
    static func fetchPaymentCaptureAccessToken() async throws -> String {
31
        try await fetchPaymentMethodAccessToken()
32
    }
33
}

$
cd LocalTokenServer
$
cp .env.example .env

$
node server.mjs

Related resources

See these related resources to help you get the most out of Payabli.