Migrating to Paystack UI - iOS
In this guide, we'll show you how to migrate to Paystack UI, our iOS SDK which is a collection of UI components and methods that allow you accept payment in your iOS app.
What's new
Paystack UI was built from the ground-up in order to address the pain points of the former SDK:
- Extensibility: Previously, our SDK only supported card as a payment channel. We built the new SDK with a modular architecture that allows us add our available payment channels.
- Better UX: The SDK provides UI components with a cleaner look and intuitive experience for users when making payment.
- Security: Transactions are now initiated from the backend and completed on the mobile app, giving full control to the developer.
- Improved DX: We expose intuitive APIs that allow you to write fewer lines to code to achieve faster results
Integration flow
The former SDK required a good amount of effort to get the up and running. The developer needed to:
- Initialize the SDK
- Build an interface to collect the card details
- Accept payment
- Handle the different processing states
- Handle callback
These steps, while seemingly easy, tend to require a lot of engineering effort with implementation and maintenance. With the Paystack UI, we took up the interface design and managing the processing states, giving developers the ability to focus on building their products. With Paystack UI, the developer would:
- Initialize the SDK
- Accept payment
- Handle callback
Developers are simply interacting with ready-made interfaces as opposed to crafting theirs.
Updating dependencies
The first step to using the Paystack UI is getting it via the Swift Package Manager. You need to ensure that you have the latest version of XCode installed and follow these steps:
- Select File > Add Package Dependencies…
- Copy the repo URL and paste it in the search box of the package dependency
You can read the Swift Package Manager documentation to learn more about adding packages to your project.
With the package added, you can now import them in your project as shown below:
- Dependencies
1import PaystackCore2import PaystackUI
Updating the interfaces
The SDK needs to be initialized to be used, so this is the first code change we’ll be making:
- From
- To
1Paystack.setDefaultPublicKey("pk_test_xxxxx")
Unlike the previous SDK, Paystack UI makes use of the builder pattern for the construction of object.
Callbacks
Callbacks are used to manage post-payment processes on the SDK side. This is how you manage the final state of the transaction.
- From
- To
1PSTCKAPIClient.shared().chargeCard(cardParams, forTransaction: transactionParams, on: self,2 didEndWithError: { (error, reference) -> Void in3 print(error)4 }, didRequestValidation: { (reference) -> Void in5 // an OTP was requested, transaction has not yet succeeded6 print("Validation: (reference)")7 }, didTransactionSuccess: { (reference) -> Void in8 // transaction may have succeeded, please verify on backend9 print("Success: (reference)")10 })
We now provide a TransactionResult
which exposes three states: completed
, cancelled
and error
that can be used to manage post-payment processes.
Accept payment
Sample backend code
We have a sample backend app that you can reference as you build your backend.
Previously, accepting payment requires you to create an instance of a Card
and Transaction
object. With Paystack UI, you initialize the transaction from your server using the Initialize TransactionAPI endpoint and use the access_code
returned to trigger a PaymentSheet
as shown below:
- Previous SDK
1let cardParams = PSTCKCardParams.init();2let transactionParams = PSTCKTransactionParams.init();34// then set parameters thus from card5cardParams.number = "4084084084084081"6cardParams.cvc = "408"7cardParams.expMonth = 068cardParams.expYear = 2024910transactionParams.amount = 12390;
Paystack UI
- SwiftUI
- UIKit
1paystack?.chargeUIButton(accessCode: "0peioxfhpn", onComplete: paymentDone) {2 Text("Initiate Payment")3}
You can now test your integration to confirm that everything is working fine.
Conclusion
Finally, you can remove the card activity or fragment and any other code that complements the UI you previously created. You can check out the reference page for more information on the methods and UI components available on Paystack UI.