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:

  1. 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.
  2. Better UX: The SDK provides UI components with a cleaner look and intuitive experience for users when making payment.
  3. Security: Transactions are now initiated from the backend and completed on the mobile app, giving full control to the developer.
  4. 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:

  1. Select File > Add Package Dependencies…
  2. Copy the repo URL and paste it in the search box of the package dependency
Package dependency popup showing how to add paystack-sdk-ios

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:

1import PaystackCore
2import PaystackUI

Updating the interfaces

The SDK needs to be initialized to be used, so this is the first code change we’ll be making:

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.

1PSTCKAPIClient.shared().chargeCard(cardParams, forTransaction: transactionParams, on: self,
2 didEndWithError: { (error, reference) -> Void in
3 print(error)
4 }, didRequestValidation: { (reference) -> Void in
5 // an OTP was requested, transaction has not yet succeeded
6 print("Validation: (reference)")
7 }, didTransactionSuccess: { (reference) -> Void in
8 // transaction may have succeeded, please verify on backend
9 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:

1let cardParams = PSTCKCardParams.init();
2let transactionParams = PSTCKTransactionParams.init();
3
4// then set parameters thus from card
5cardParams.number = "4084084084084081"
6cardParams.cvc = "408"
7cardParams.expMonth = 06
8cardParams.expYear = 2024
9
10transactionParams.amount = 12390;
11transactionParams.email = "[email protected]";

Paystack UI

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.