Install the SDK

With CocoaPods

Add the following in your Podfile:

12345678910

use_frameworks!
target 'MyApp' do
  # 👇 Add this line  pod 'PrimerSDK'
  # ...
end

Then run pod install to install PrimerSDK on your workspace.

123456789

post_install do |installer|  installer.pods_project.targets.each do |target|    if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"      target.build_configurations.each do |config|          config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'      end    end  endend

Step 1: Prepare Headless Universal Checkout

First, import the PrimerSDK. Then call PrimerHeadlessUniversalCheckout.current.start to start the checkout session with your client token and a delegate to receive important events.

The completion handler will return the available payment methods for the current session. We will use them later to present a list of payment methods.

Each available payment method contains the following:

• paymentMethodType
  a unique string identifier for the payment method (e.g. ADYEN_IDEAL)
• supportedPrimerSessionIntents
  an array of PrimerSessionIntent which defines what intents can be used with this payment method (i.e. .checkout or .vault).
• paymentMethodManagerCategories
  an array which defines the payment method managers that can be used with this payment method (i.e. .nativeUI or .rawData).
• [Optional] requiredInputDataClass
  the class type that should be used with the raw data manager.

Implement the primerHeadlessUniversalCheckoutDidCompleteCheckoutWithData(_:) which will notify you when the checkout is complete with a payment.

12345678910111213141516171819202122232425262728293031323334

import UIKit// 👇 Import the SDKimport PrimerSDK
class ViewController: UIViewController {
    // ...
    var availablePaymentMethods: [PrimerHeadlessUniversalCheckout.PaymentMethod]?
    override func viewDidLoad() {        super.viewDidLoad()
        // ...
        // 👇 Start Headless Universal Checkout with your session's client token        PrimerHeadlessUniversalCheckout.current.start(withClientToken: clientToken, delegate: self) { availablePaymentMethods, err in            if let err = err {                // Handle error            } else if let availablePaymentMethods = availablePaymentMethods {                // Payment methods that are available for this session                self.availablePaymentMethods = availablePaymentMethods            }        }    }}
extension ViewController: PrimerHeadlessUniversalCheckoutDelegate {
    // 👇 [Required] This function will return the checkout data once the payment is finished    func primerHeadlessUniversalCheckoutDidCompleteCheckoutWithData(_ data: PrimerCheckoutData) {        // ...    }}

Step 2: Render available payment methods UI

You should now have the available payment methods for the client session.

You can render your own UI for each payment method, or take advantage of the PrimerHeadlessUniversalCheckout.AssetsManager helper to get access to payment methods' assets.

12345

do {    let paymentMethodAsset = try PrimerHeadlessUniversalCheckout.AssetsManager.getPaymentMethodAsset(for: paymentMethod.paymentMethodType)} catch {    // Handle error}

The payment method asset contains the following:

• paymentMethodType
  a unique string identifier for the payment method
• paymentMethodLogo
  an instance of the PrimerPaymentMethodLogo
• paymentMethodBackgroundColor
  an instance of the PrimerPaymentMethodBackgroundColor

The PrimerPaymentMethodLogo holds UIImage objects for different scenarios

• [Optional] colored
  a UIImage to be used anywhere
• [Optional] dark
  a UIImage to be used in dark mode
• [Optional] light
  a UIImage to be used in light mode

The PrimerPaymentMethodBackgroundColor holds UIColor objects for different scenarios

• [Optional] colored
  a UIColor to be used anywhere
• [Optional] dark
  a UIColor to be used in dark mode
• [Optional] light
  a UIColor to be used in light mode

With the above images and colors you can build your own payment methods UI 💪

Step 3: Implement a payment method manager

Now that your UI presents the available payment methods, let's use the payment method managers to allow users to go through the payment method flow.

A payment method manager is a class abstracting the state and UI of a given payment method. Currently, 3 payment methods managers are supported, each of them responsible for a different payment method category.

• PrimerHeadlessUniversalCheckout.NativeUIManager
  The native UI manager is responsible for payment methods that need to present their own UI (e.g. Apple Pay).
• PrimerHeadlessUniversalCheckout.RawDataManager
  The raw data manager is responsible for payment methods that need to receive data from the user (e.g. card form).

Native UI manager

This manager can be used for the payment methods that contain .nativeUI in the paymentMethodManagerCategories array.

The native UI manager is typically used for the payment methods that to present their own UI, such as Apple Pay.

1234567891011121314151617181920

import UIKitimport PrimerSDK
class ViewController: UIViewController {
    // ...
    @IBAction func paymentMethodButtonTapped(_ sender: UIButton) {        do {            // 👇 Create the payment method manager            let nativeUIPaymentMethodManager = try PrimerHeadlessUniversalCheckout.NativeUIManager(paymentMethodType: paymentMethod.paymentMethodType)
            // 👇 Show the payment method            try nativeUIPaymentMethodManager.showPaymentMethod(intent: .checkout)
        } catch {            // Handle error        }    }}

That's it! The SDK will present the native UI to the user, and then attempt to create a payment.

The payment's data will be returned on primerHeadlessUniversalCheckoutDidCompleteCheckoutWithData configured in Step 1.

Raw data manager

This manager can be used for any payment method that contains .rawData in the paymentMethodManagerCategories array.

The raw data manager can be used for payment methods that allow you to capture customer data yourself. This gives you full control over the UI while still taking advantage of all the features that make Primer great.

At any point, you can validate your data by calling setRawData() and by listening to primerRawDataManager(_: dataIsValid: errors:) - the SDK will return errors specific to each required input.

Once the data is valid, send it to Headless Checkout for further processing by calling submit().

Configure the PrimerHeadlessUniversalCheckout.RawDataManager and conform to its delegate

Assuming that the payment method contains .rawData in the paymentMethodManagerCategories, create your raw data manager, and set its delegate.

1234567891011121314151617181920212223

import UIKitimport PrimerSDK
class ViewController: UIViewController {
    // ...
    var rawDataManager: PrimerHeadlessUniversalCheckout.RawDataManager!
    override func viewDidLoad() {        super.viewDidLoad()
        // ...
        do {            // 👇 Initialize the raw data manager            self.rawDataManager = try PrimerHeadlessUniversalCheckout.RawDataManager(paymentMethodType: paymentMethod.paymentMethodType, delete: self)
        } catch {            // Handle error        }    }}

Build a form

Build your own form to let the users enter their data. You can use the requiredInputElementTypes of the PrimerHeadlessUniversalCheckout.RawDataManager object to get informed about what input fields you have to render.

The requiredInputElementTypes is an array that can contain any of the following:

• .cardNumber
• .expiryDate
• .cvv
• .cardholderName
• .phoneNumber
• .retailer

1234567891011121314151617181920212223242526272829303132

func renderForm() {    let inputElementTypes = primerRawDataManager.requiredInputElementTypes
    for inputElementType in inputElementTypes {        switch inputElementType {            case .cardNumber:                // Create a card number input element and add it to your view                break
            case .expiryDate:                // Create a expiry date input element and add it to your view                break
            case .cvv:                // Create a CVV input element and add it to your view                break
            case .cardholderName:                // Create a cardholder name input element and add it to your view                break
            case .phoneNumber:                // Create a phone number input element and add it to your view                break
            case .retailer:                // Create a retailer input element and add it to your view                break            }        }    }}

Build and validate your raw data

Use the class type that has been provided in the requiredInputDataClass of the payment method to build the captured data, and pass it to the manager. Here is an example for card payments:

1234567891011121314151617181920

import UIKitimport PrimerSDK
class ViewController: UIViewController {
    // ...
    func dataDidChange() {        // 👇 Create your raw data        let rawCardData = PrimerCardData(            cardNumber: cardnumberTextField.text,            expiryDate: expiryDateTextField.text,            cvv: cvvTextField.text,            cardholderName: cardholderNameTextField.text,        )
        // 👇 Set your raw data on the manager        self.rawDataManager.rawData = rawCardData    }}

When you set set the data on the raw data manager, the manager validates it and notifies you via the delegate functions. You can then change the state of your submit button based on the validation changes.

1234567

extension ViewController: PrimerHeadlessUniversalCheckoutRawDataManagerDelegate {
    // 👇 Implement the validation function to receive updates on the raw data validation changes    func primerRawDataManager(_ rawDataManager: PrimerHeadlessUniversalCheckout.RawDataManager, dataIsValid isValid: Bool, errors: [Error]?) {        // Enable your submit button when `isValid == true`    }}

Submit the form's data

Once the data has been validated, call the manager's submit() function.

123456789101112

import UIKitimport PrimerSDK
class ViewController: UIViewController {
        // ...
        @IBAction func payButtonTapped(_ sender: UIButton) {            // 👇 Submit the data that have been set in prior steps            self.rawDataManager.submit()        }}

When the function submit() is called, the SDK will attempt to create a payment. The payment's data will be returned on primerHeadlessUniversalCheckoutDidCompleteCheckoutWithData configured in Step 1.

Step 4: Handle errors

Some functions can throw and they will fail immediately. All other errors will end up in the SDK’s optional delegate function func primerHeadlessUniversalCheckoutDidFail(withError:), where you can handle them accordingly.

123456

extension ViewController: PrimerHeadlessUniversalCheckoutDelegate {
    func primerHeadlessUniversalCheckoutDidFail(withError err: Error) {        // Handle the error    }}

Advanced Configuration

For more customization on your needs, you can listen to all events posted by Headless Universal Checkout and react to them. Visit the API reference for a full list of the delegate functions.

Prepare 3DS

• In order to make the SDK lightweight, 3DS requires the addition of the Primer 3DS library. Check out our guide on how to add the Primer 3DS library to your iOS app.
• When the user pays by card, the Workflow will decide whether or not a 3DS challenge is required. If so, Headless Universal Checkout will automatically render the 3DS challenge.
• To improve 3DS success rates, it is recommended to pass the following elements in the Client Session:

Learn more about how to configure 3DS!

Did It Work?

If everything went well, you should be able to see the payment you just created on your Dashboard under the Payments menu.