Skip to main content

Comcarde iOS Client SDK

Introduction#

The comcarde-ios Client SDK helps you gather payment data from your customer's iOS device for use in payments on your server.

overview diagram

  1. comcarde-ios helps you gather payment data from your customer's device. The SDK will handle any necessary communication with the Comcarde REST API (using your Client API Key).
  2. Your iOS client passes the payment information to your server.
  3. Your server creates payments via the Comcarde REST API (using your Server API Key).

Client SDKs can help you gather information required for payments, but only a server with a Server API Key can create payment transactions. This ensures that it is not possible to create unauthorized payment transactions using keys visible to client devices.

Requirements#

  • iOS 11.0 or higher
  • Swift 5.1 or higher

Installation#

CocoaPods setup#

If you haven't already done so install CocoaPods by following the setup steps.

Installing the SDK is done via a private CocoaPod. Please follow the checklist below:

  1. Ensure you have access to the following repo:

    git@bitbucket.org:comcarde/comcarde-ios-spec.git

    Email support@comcarde.com to request access.

  2. Open Terminal and navigate to your CocoaPods repos:

    cd ~/.cocoapods/repos/
  3. Add the Comcarde private CocoaPod to your CocoaPods installation:

    pod repo add comcarde-ios-spec git@bitbucket.org:comcarde/comcarde-ios-spec.git
  4. Navigate to the newly installed repo:

    cd comcarde-ios-spec
  5. And run validation to check there are no errors:

    pod repo lint .
  6. CocoaPods has now successfully registered the comcarde-ios pod and it is ready to be used in a Podfile.

Xcode setup#

  1. If your existing project isn't setup to use CocoaPods, or if you are starting a new project, please initialize CocoaPods by navigating to your top level Xcode project directory (where your .xcodeproj file is) and create a Podfile by running pod init.

  2. Open the Podfile for your project and ensure to add the following in the header:

    #  this is required for comcarde-ios dependanciessource 'https://github.com/CocoaPods/Specs.git'
    # this is required for the private Comcarde CocoaPod podspec reposource 'git@bitbucket.org:comcarde/comcarde-ios-spec.git'
  3. In the Podfile, add the comcarde-ios Pod to your Targets:

    pod 'comcarde-ios'
  4. Now install the pod via Terminal from the top level of your Xcode project directory:

    pod install
  5. You should now have a .xcworkspace file - from now on use this to launch your Xcode project.

Xcode project validation#

To validate that you have the Comcarde iOS SDK correctly installed please do the following:

  1. Open your Xcode project by launching the .xcworkspace file.

  2. Create a new UIViewController file - e.g. MyViewController.

  3. At the top of the UIViewController import the Comcarde iOS SDK with:

    import comcarde_ios
  4. Ensure you have access to the Comcarde iOS SDK API, e.g.:

    override func viewDidLoad() {    super.viewDidLoad()    print("Comcarde iOS SDK Version=\(API.version)")}
  5. Ensure your newly created UIViewController is wired up to display either via your Storyboard or by pushing it into view.

  6. Run your app and navigate to the UIViewController - if you don't see an Xcode console log with the SDK version then something is wrong.

  7. Test that you can extend your UIViewController to inherit the ComcardeViewController, e.g.:

    class MyViewController: ComcardeViewController {    override func viewDidLoad() {        super.viewDidLoad()        print("Comcarde iOS SDK Version=\(API.version)")    }}
  8. Register your newly created UIViewController with the Comcarde iOS SDK via an API call, this ensures that Comcarde Drop-In UIViews will display correctly:

    ```swiftoverride func viewDidLoad() {    super.viewDidLoad()    API.register(viewController: self)}```
  9. As a minimum add the required override function stubs to your ViewController as follows:

    override func cardTokenizationComplete(card: ComcardeObfuscatedCardEntity? = nil,                                       cardSaveRequested: Bool? = nil,                                       errors: [String: Any?]? = nil) {    /// Application developer should decide what to do with the tokenized card}
    override func invokeCardPayment(card: ComcardeObfuscatedCardEntity?) {    // startCardPayment(card: card, orderDetails: <ComcardeOrderDetails>)}
    override func invokeApplePayPayment() {    // startApplePayPayment(orderDetails: <ComcardeOrderDetails>, closure: <ApplePayClosure>)}
    override func invokePayPalPayment() {    // startPayPalPayment(orderDetails:<ComcardeOrderDetails>)}
    override func sendTokenizedCardPayment(nonce: String, orderDetails: ComcardeOrderDetails) {    /// send nonce to your server for use as a Tokenized Payment Instrument}
    override func sendPaymentWithThreeDSecure(nonce: String,                                      paymentID: String,                               threeDSecureInfo: [String:Any?]? = nil,                                   orderDetails: ComcardeOrderDetails) {    /// send nonce to your server for use as a ProviderThreeDSecureNonce Payment Instrument}
    override func sendPaymentWithApplePay(nonce: String, completion: @escaping (PKPaymentAuthorizationResult) -> Void) {    /// send nonce to your server for use as a Apple Pay Payment Instrument}
    override func sendPaymentWithPayPal(nonce: String, orderDetails: ComcardeOrderDetails) {    /// send nonce to your server for use as a PayPal Payment Instrument}
    override func paymentComplete(_ result: (status: ResponseCode?, messaging: ComcardeReceipt?),                              paymentMethod: PaymentMethod,                              threeDSecured: Bool = false) {    /// To be triggered at the end of a payment journey    /// Note: this method is also called in the event of an    /// error (or user cancellation) with a 3D Secure journey}
```
  1. You are now setup with a "Comcarde ready UIViewController" which can handle drop in UI and payment requests. However to continue you need to provide a Client API Key.

SDK Initialization#

The SDK needs to be initialized with an environment, and a Client API Key before it can be used.

let server = "https://sandbox.comcarde.com"let apiKey = [SANDBOX_CLIENT_API_KEY]ClientConfigurationService.initialize(server: server, apiKey: apiKey) { result in    do {        let success = try result.get()        // Configuration fetched successfully.    } catch {        // Configuration fetched failed - handle error.    }}
[ClientConfigurationService.initialize()]

System Flow#

Fully outsource all your cardholder data functions to Comcarde by using the iOS Client SDK as part of a Tokenized Payment Flow.

Features:

  • Enables you to qualify for the simplest SAQ-A PCI Compliance Form level. The SDK will output a token that can be used by your server to generate a payment.
  • Support for digital wallet payments using Apple Pay, and PayPal.
  • Your customers can opt to save cards for later use.

The iOS system flow describes the frontend ( UI ) and backend flows alongside system events and expected closures to your dedicated ComcardeViewController instance.

Drop-In UI#

Comcarde Drop-In UI are a collection of visual user interface ( UI ) views invoked by SDK API calls and are used in the following scenarios:

  • Adding a credit/debit card
  • Removing a credit/debit card (optional)
  • Initiating payment flows (The UI to allow for for choosing payment by Card, Apple Pay or PayPal)
  • CVV validation
  • 3D Secure additional actions

For the most part your Comcarde enabled UIViewController ( your instantiated view controller which extends ComcardeViewController ) in tandem with the Comcarde iOS SDK will handle UI inputs and outputs and return closure events for your app to interpret as required. When a user successfully completes the Drop-In UI, your client code obtains a payment instrument nonce for use on your server.

Adding Cards and Tokenization#

The ComcardeViewController method prepareAddCardDropIn prepares the Drop-In UI prior to presenting the "Add Card View". This allows the application developer to optionally include a customer identifier against which the card will be tokenized. If the customer identifier is supplied then successfully tokenized cards will be registered against a customerId on Comcarde's platform.

Essentially "Adding a Card" tokenizes card details via the Comcarde REST API and then returns obfuscated card details to your client app via the operations completion property.

Example code which opens the "Add Card View" Drop-In UI against a specific customerId:


override func prepareAddCardDropIn(_ operation: AddCardOperation? = nil) {    let customerId = "john.appleseed@example.com"    API.presentAddCardDropIn(self, customerId: customerId, options: nil, operation: operation)}
The Add Card Drop-In UI

[ComcardeViewController.prepareAddCardDropIn()] [API.presentAddCardDropIn()]

Storing and Retrieving Cards#

Once the iOS SDK has successfully tokenized a card then the cardTokenizationComplete method can be used to see the result. If a customerId was passed through to the Drop-In UI when adding a card then the resulting tokenized card (ComcardeObfuscatedCardEntity) will have been registered against that in Comcarde's backend system.


override func cardTokenizationComplete(card:ComcardeObfuscatedCardEntity? = nil,                                       cardSaveRequested:Bool? = nil,                                       errors:[String : Any?]? = nil) {    /// Decide what to do with the ComcardeObfuscatedCardEntity}

Deleting Cards#

The Comcarde iOS SDK will optionally present a simple confirmation dialog as part of it's Drop-In UI which the user should accept or decline.

Deleting a card will send the tokenized card details to the system for card deletion and then return the result to the application developer.

Optional remove card dialog UI
[API.deleteCard()]

Payment requests#

The Comcarde iOS SDK presents a Drop-In UI selector for the user to choose the sort of payment they want to make as follows:

  1. Credit / Debit Card (allowing for using a previously tokenized card or adding a new card)
  2. Apple Pay
  3. PayPal
The payment chooser Drop-In UI

Once the user has made their choice, the payment process begins for the given payment method (Card, Apple Pay or PayPal) is invoked with the payment request.

The payment journey for each type of payment instrument involves the following flow:

  • Invoke ( where your application defines the customer order as a ComcardeOrderDetails object and then proceeds to Start )
  • Start ( where your application starts the tokenization process via the Comcarde iOS SDK )
  • Parse ( where the Comcarde iOS SDK parses any response and returns a payment instrument nonce to your application )
  • Send ( where your application requires to utilize your server to handle the nonce and process the payment )
  • Complete ( where you should inform the user of the result )
[API.presentPaymentMethodChooser()]

Invoking Card Payments#

There are three fundamental parts to making a payment:

  1. The payment request (initialization)
  2. The payment process
  3. The payment "receipt"

As an application developer it is your responsibility to invoke a card payment with a customer order, for example:

override func invokeCardPayment(card: ComcardeObfuscatedCardEntity?) {    startCardPayment(card:card, orderDetails: <ComcardeOrderDetails>)}

Note: If no card is supplied to start the payment then the SDK will present the Drop-In UI to add a card and then continue with the card tokenization and payment flow.

[ComcardeViewController.invokeCardPayment()] [ComcardeViewController.startCardPayment()] [ComcardeViewController.sendTokenizedCardPayment()] [ComcardeViewController.parseCardResponse()] [ComcardeViewController.paymentComplete()]

CVV Validation#

You can define the need for CVV request or not when making a card payment by including a Boolean value for the key "cvv_ui_input_required" in the options when you call API.register. If not explicitly set, it is true by default.

func registerCVVOptions(mandatory: Bool) {    let options = [("cvv_ui_input_required", mandatory)]    API.register(viewController: self, options: options)}

If CVV is required then the Comcarde iOS SDK will present a Drop-In UI for user input prior to sending the payment request.

The inputted CVV is not stored in the SDK at any stage - it is securely transmitted alongside a previoulsy tokenized card to the Comcarde Token Gateway and returns a valid payment token, after this it is discarded.

CVV request Drop-In UI

3D Secure Payments#

In the event of 3D Secure additional action from your server the following steps should be considered:

  1. The payment request (initialization)
  2. The payment process
  3. The system responds with a 3D Secure additional action code ( 2001 )
  4. The Drop-In UI to handle additional action
  5. The 3D Secure payment result
  6. The payment "receipt" (the payment result)
An example 3D Secure action

Handling 3D Secure Additional Actions#

3D Secure Overview Diagram

The SDK automates handling of 3D Secure additional action required responses to Payment Requests made by your server.

Your application's ComcardeViewController will have a overridable method which you should use to capture 3D Secure action results. Note: within the threeDSecureInfo method parameter you will have values for 'liabilityShifted' and 'liabilityShiftPossible' which your payment service can utilize accordingly.

/**    Depending on the payload inside threeDSecureInfo decide what to do*/override func sendPaymentWith3DSecureAdditionalAction(nonce:String,                                                  paymentID:String,                                           threeDSecureInfo:[String:Any?]? = nil,                                               orderDetails:ComcardeOrderDetails) {
    if threeDSecureInfo != nil {        let liabilityShiftPossible:Bool? = threeDSecureInfo?["liabilityShiftPossible"] as? Bool
        /// Depending on the result decide how to process the result        if (liabilityShiftPossible == true) {
            let liabilityShifted:Bool? = threeDSecureInfo?["liabilityShifted"] as? Bool
            if (liabilityShifted == true) {                /// 3D Secure authentication success                print("3D Secure authentication success")            } else {                /// 3D Secure authentication failed                print("3D Secure authentication failed")            }        } else {            /// 3D Secure authentication was not possible            print("3D Secure authentication was not possible")        }
    }
    /// process payment as you see fit    ....
}
[ComcardeViewController.sendPaymentWith3DSecureAdditionalAction()]

Invoking PayPal Payments#

PayPal payments are similar to card payments, with the following flow:

  1. The payment request (initialization)
  2. The PayPal confirmation Drop-In UI
  3. The PayPal system response
  4. The payment "receipt" (the payment result)

As an application developer it is your responsibility to invoke a PayPal payment with a customer order, for example:

override func invokePayPalPayment() {    let orderDetails = ...    startPayPalPayment(orderDetails: orderDetails)}

After this, with the startPayPalPayment method, the SDK authenticates the payment following the user's PayPal login and payment confirmation ( or cancellation ). Once the checkout flow is completed with PayPal the result is passed to the system and then back to the your instance of ComcardeViewController with the regular paymentComplete method.

[ComcardeViewController.invokePayPalPayment()] [ComcardeViewController.startPayPalPayment()] [ComcardeViewController.sendPaymentWithPayPal()] [ComcardeViewController.paymentComplete()]

Invoking Apple Pay Payments#

Consider the following flow for Apple Pay:

  1. The payment request (initialization)
  2. The Apple Pay confirmation Drop-In UI
  3. The Apple Pay response
  4. The payment "receipt" (the payment result)

Apple Pay payments require a slightly different initialization and you must define your PassKit Apple Pay PKPaymentRequest object and send this to the Comcarde iOS SDK when starting the Apple Pay payment.

An example of what you might do in your ComcardeViewController might be:

override func invokeApplePayPayment() {
    let orderDetails = ...    startApplePayPayment(orderDetails: orderDetails) { result in        do {            let request = try result.get() // PKPaymentRequest
            // Additional request configuration            request.merchantCapabilities = .capability3DS            request.paymentSummaryItems = [PKPaymentSummaryItem(label: "PRICE", amount: 100.00),                                           PKPaymentSummaryItem(label: "VAT", amount: 20.00),                                           PKPaymentSummaryItem(label: "TOTAL", amount: 120.00)]
            // Present to user.            let paymentAuthorizationController = PKPaymentAuthorizationController(paymentRequest: request)            paymentAuthorizationController.delegate = self            paymentAuthorizationController.present()        } catch {            // Handle error.        }    }}

ComcardeViewController implementes the PKPaymentAuthorizationControllerDelegate. Upon authorization from the user, the PKPayment will be parsed, and a nonce will be created which includes the payment token. This will result in a call to sendPaymentWithApplePay(nonce:, completion:). If parsing fails, paymentComplete(_ result:, paymentMethod:, threeDSecured:) will be called instead, with a message describing the error.

[ComcardeViewController.invokeApplePayPayment()] [ComcardeViewController.startApplePayPayment()] [ComcardeViewController.sendPaymentWithApplePay()] [ComcardeViewController.paymentComplete()]

UI/UX Customization#

The Comcarde iOS SDK allows for a degree of customization as to how the Drop-In UI view's display their content.

Add Card View#

The Drop-In UI "Add Card View" presents a guided, user-friendly form to input your card details.

On iOS 13 and above the SDK will detect if Dark or Light Mode is enabled and display appropriately for the user's theme. These default styles look as follows:


The default Add Card Drop-In UI presents fields to the user as they input information
The default Add Card Drop-In UI in Dark Mode

Requested fields for the Add Card View#

In order for the Comcarde iOS SDK to successfully tokenize a card the Drop-In Add Card View will ask for the following as a minimum set:

  • Card number
  • Expiry Date

However additional fields can be requested and be presented to the user if they are passed into the Add Card View presenter.

For example the following code will display CVV, card holder name, issue number and start date as fields to the user as part of the Add Card View:

// ui type, extra fields and styling optionslet options:[(key:String, value:Any, mandatoryForPayment:Bool)] = [    ("field", ComcardeUIComponent.CVV_TEXT_INPUT, true),    ("field", ComcardeUIComponent.CARD_HOLDER_NAME_TEXT_INPUT, false),    ("field", ComcardeUIComponent.ISSUE_NUMBER_TEXT_INPUT, false),    ("field", ComcardeUIComponent.START_DATE_ENTRY_UI, false)]
API.presentAddCardView(self, options: options, closure: closure)

Additionally the flag for mandatoryForPayment allows the application developer to define whether or not the field is required for a payment to proceed. In a card payment flow the Add Card View will not allow for form data to be sent for card tokenization if these mandatory fields have not been completed by the user.

Card graphics for the Add Card View#

Additionally an application developer can also set which card graphics they wish to display in the Add Card View with the following options definition:

let cards = [PaymentCard.visa, .mastercard, ...]let graphics: (key: String, value: Any, mandatoryForPayment: Bool) = ("card-graphics", cards, false)options?.append(cardGraphics)API.presentAddCardView(self, options: options, operation: operation)

The full set of enums for available card graphics can be found in:

[PaymentCard]

Drop-In UI Styling#

In order to define the look of the Drop-In UI the Comcarde iOS SDK exposes a set of styleable elements as ComcardeStyleSheetItem objects for an application developer to use as follows:

/// Background colour of drop in pagecase BACKGROUND_COLOR/// Background colour of the form elementscase FORM_BACKGROUND_COLOR/// Title fontcase TITLE_FONT_NAME/// Main body font ( note does not affect system buttons )case BODY_FONT_NAME/// The colour of the header textcase HEADER_TEXT_COLOR/// The colour of enabled textcase TEXT_ENABLED/// The colour of disabled textcase TEXT_DISABLED/// The colour of normal textcase NORMAL_TEXT_COLOR/// The colour of error textcase ERROR_TEXT_COLOR/// The colour of "cancellation" style textcase CANCEL_TEXT_COLOR/// The colour of "confirmation" style  textcase CONFIRM_TEXT_COLOR/// Line colourcase LINE_COLOR/// The colour of text when focusedcase INPUT_FIELD_TEXT_COLOR_FOCUSED/// The colour of text when unfocusedcase INPUT_FIELD_TEXT_COLOR_UNFOCUSED/// The colour of form placholder textcase INPUT_FIELD_PLACEHOLDER_TEXT_COLOR/// The highlight colour is used for highlighting selected items in the date pickercase HIGHLIGHT_COLOR/// The colour of a UI switch when it is offcase SWITCH_OFF_COLOR/// The colour of a UI switch when it is oncase SWITCH_ON_COLOR/// The colour of a UI switch buttoncase SWITCH_BUTTON_COLOR/// The background colour of a pop up panelcase POPUP_PANEL_BG_COLOR/// The line colour of a pop up panelcase POPUP_PANEL_LINE_COLOR/// The title colour of a pop  up panelcase POPUP_PANEL_TITLE_COLOR/// The text colour of a pop up panelcase POPUP_PANEL_TEXT_COLOR/// The border colour of a focused text fieldcase INPUT_FIELD_BORDER_COLOR_FOCUSED/// The border colour of an unfocused text fieldcase INPUT_FIELD_BORDER_COLOR_UNFOCUSED/// The width of a focused bordercase INPUT_FIELD_BORDER_WIDTH_FOCUSED/// The width of an unfocused bordercase INPUT_FIELD_BORDER_WIDTH_UNFOCUSED
[ComcardeStyleSheetItem]

You are able to set your own themes for dark or light mode ( or both ) by sending key/value objects into the SDK options via the API.register() method as follows:

let backgroundColor = UIColor(rgb: "#660066")let options: [(key: String, value: Any)] = [("style", (ComcardeStyleSheetItem.BACKGROUND_COLOR, (dark: backgroundColor, light:"")))]API.register(viewController: self, options: options)
Modified background colour

Note: if you want to use the default scheme for any ComcardeStyleSheetItem object then you should pass an empty string for its dark/light value counterpart.

With this in mind consider how a custom variant of the Drop-In UI for a Dark Mode theme could be defined as follows:

// display optionslet options:[(key:String, value:Any)] = [    ("style", (comcarde_ios.ComcardeStyleSheetItem.TITLE_FONT_NAME,    "AvenirNextCondensed-Bold")),    ("style", (comcarde_ios.ComcardeStyleSheetItem.BODY_FONT_NAME,    "Baskerville")),
    /// these vars target the Drop In UI for Adding Card Details    ("style", (comcarde_ios.ComcardeStyleSheetItem.BACKGROUND_COLOR,               (dark:UIColor.init(rgb: "#8000ff", comcardeLocalized:.YES),               light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.HEADER_TEXT_COLOR,                (dark:UIColor.init(rgb: "#00ffff", comcardeLocalized:.YES),                    light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.FORM_BACKGROUND_COLOR,                (dark:UIColor.init(rgb: "#222222", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.INPUT_FIELD_PLACEHOLDER_TEXT_COLOR,                (dark:UIColor.init(rgb: "#999999", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.LINE_COLOR,                (dark:UIColor.init(rgb: "#ffffff", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.TEXT_DISABLED,               (dark:UIColor.init(rgb: "#c0c0c0", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.TEXT_ENABLED,               (dark:UIColor.init(rgb: "#ffffff", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.INPUT_FIELD_TEXT_COLOR_FOCUSED,               (dark:UIColor.init(rgb: "#ffffff", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.INPUT_FIELD_TEXT_COLOR_UNFOCUSED,               (dark:UIColor.init(rgb: "#ee00ee", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.INPUT_FIELD_BORDER_COLOR_FOCUSED,                (dark:UIColor.init(rgb: "#dd00dd", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.INPUT_FIELD_BORDER_COLOR_UNFOCUSED,                (dark:UIColor.init(rgb: "#ffffff", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.NORMAL_TEXT_COLOR,               (dark:UIColor.init(rgb: "#eeeeee", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.CANCEL_TEXT_COLOR,               (dark:UIColor.init(rgb: "#ffffff", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.CONFIRM_TEXT_COLOR,               (dark:UIColor.init(rgb: "#ffffff", comcardeLocalized:.YES),                light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.SWITCH_BUTTON_COLOR,                (dark:UIColor.init(rgb: "#000000", comcardeLocalized:.YES),                 light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.SWITCH_OFF_COLOR,                (dark:UIColor.init(rgb: "#999999", comcardeLocalized:.YES),                 light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.SWITCH_ON_COLOR,                (dark:UIColor.init(rgb: "#dd00dd", comcardeLocalized:.YES),                 light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.HIGHLIGHT_COLOR,               (dark:UIColor.init(rgb: "#8000ff", comcardeLocalized:.YES, alpha:0.5),                 light:""))),
    /// these vars target the standard dialog panels in the UI    ("style", (comcarde_ios.ComcardeStyleSheetItem.POPUP_PANEL_BG_COLOR,                (dark:UIColor.init(rgb: "#8000ff", comcardeLocalized:.YES),                 light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.POPUP_PANEL_LINE_COLOR,                (dark:UIColor.init(rgb: "#cccccc", comcardeLocalized:.YES),                 light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.POPUP_PANEL_TITLE_COLOR,                (dark:UIColor.init(rgb: "#00ffff", comcardeLocalized:.YES),                    light:""))),    ("style", (comcarde_ios.ComcardeStyleSheetItem.POPUP_PANEL_TEXT_COLOR,                (dark:UIColor.init(rgb: "#ffffff", comcardeLocalized:.YES),                 light:"")))]
API.register(viewController: self, options: options)
let addCardOptions:[(key:String, value:Any, mandatoryForPayment:Bool)]? = [    ("field", ComcardeUIComponent.CVV_TEXT_INPUT, true),    ("field", ComcardeUIComponent.CARD_HOLDER_NAME_TEXT_INPUT, false),    ("field", ComcardeUIComponent.ISSUE_NUMBER_TEXT_INPUT, false),    ("field", ComcardeUIComponent.START_DATE_ENTRY_UI, false),    ("card-graphics", [PaymentCard.mastercard, .discover, .americanExpress, .dinersClubInternational], false)]
API.presentAddCardView(self, options: addCardOptions, closure: closure)
Custom styling with UI options

With this new bespoke theme other Drop-In UI components will be displayed as follows:

Payment chooser
Card chooser
CVV request

Localization#

The Comcarde iOS SDK Drop-In UI supports 23 languages as follows:

  • Ar ( Arabic )
  • Da ( Danish )
  • De ( German )
  • En ( English )
  • Es ( Spanish )
  • Fr ( French )
  • Fr-CA ( French Canadian )
  • He ( Modeern hebrew )
  • Id ( Indonesian )
  • It ( Italian )
  • Ja ( Japanese )
  • Ko ( Korean )
  • Nb ( Norwegian )
  • Nl ( Dutch )
  • Pl ( Polish )
  • Pt ( Portegeuse )
  • Ru ( Russian )
  • Sv ( Swedish )
  • Th ( Thai )
  • Tr ( Turkish )
  • Zh-hans ( Chinese simple )
  • Zh-hant ( Chinese traditional )
  • Zh-hant-HK ( Chinese hong-kong )

The user's device language will be automatically detected and used in the Drop-In UI dialogs.

API Reference Documentation#

API Reference Documentation