@globy-app/zettle

Adds capabilities to use Zettle card readers and process payments with them.

Inspiration attribution

This plugin took great inspiration from orestis-z/capacitor-zettle.

Install

npm install @globy-app/zettle
npx cap sync

Setup the SDK

IOS

Install the ZettleSDK pod by following the official Zettle guide.

Also make sure the you follow the steps on configuring permissions and plist.

Android

To install the Zettle SDK for android in the project, one must provide a github token so the SDK can be downloaded. How you do that is up to you. As this is a secret token, a secret manager is recommended to prevent the need of comitting a Github token to your repository.

For this to work, you need to paste the following snippet in the build.gradle file (located at android/app/build.gradle, so in your capacitor android app source files):

repositories {
    ...
    maven {
        url = uri("https://maven.pkg.github.com/iZettle/sdk-android")
        credentials(HttpHeaderCredentials) {
            name "Authorization"
            value "Bearer xxx" // More about auth tokens https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line
        }
        authentication {
            header(HttpHeaderAuthentication)
        }
    }
    ...
}

allprojects {
    repositories {
        ...
        maven {
            url = uri("https://maven.pkg.github.com/iZettle/sdk-android")
            credentials(HttpHeaderCredentials) {
                name "Authorization"
                value "Bearer xxx" // More about auth tokens https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line
            }
            authentication {
                header(HttpHeaderAuthentication)
            }
        }
        ...
    }
}

You also need to add the OAuthActivity to your app's manifest. See the Zettle SDK documentation for the exact steps. Make sure the redirect url is correct and matches your configuration.

Configuring the plugin

Zettle needs to know a few things about your application to work properly. If you have received a Zettle developer account, you can also add a client. This should provide you with all the credentials for a SDK application.

In your capacitor capacitor make sure to add the following configuration:

{
  "plugins": {
    "Zettle": {
      "clientID": "your-client-id",
      "scheme": "your-scheme",
      "host": "your-host"
    }
  }
}

API

• initialize(...)
• logout()
• openSettings()
• chargeAmount(...)
• Interfaces

initialize(...)

initialize({ developermode, }: { developermode: boolean | undefined; }) => Promise<void>

Initializes the Zettle SDK. Make sure to call this method before calling any other methods. Calling this method a second time has no effect.

| Param | Type | Description | | --------- | ---------------------------------------- | ---------------------- | | __0 | { developermode: boolean; } | Enables developer mode |

logout()

logout() => Promise<void>

Logs out the current user. The next time the user tries to make a payment they will have to login again.

openSettings()

openSettings() => Promise<void>

Opens the Zettle settings screen. Allowing the user to login and use in app pairing to connect to a card reader.

chargeAmount(...)

chargeAmount({ amount, reference, }: { amount: number; reference: string; }) => Promise<ZettlePaymentInfo | { success: false; }>

Starts a payment. This will open the Zettle payment screen. It will start a payment for the specified amount.

| Param | Type | Description | | --------- | --------------------------------------------------- | --------------------------------- | | __0 | { amount: number; reference: string; } | The amount to charge the customer |

Returns: Promise<ZettlePaymentInfo | { success: false; }>

Interfaces

ZettlePaymentInfo

| Prop | Type | | -------------------------- | ------------------- | | success | true | | amount | number | | gratuityAmount | number | | referenceNumber | string | | entryMode | string | | obfuscatedPan | string | | panHash | string | | transactionId | string | | cardBrand | string | | authorizationCode | string | | AID | string | | TSI | string | | TVR | string | | applicationName | string | | numberOfInstallments | number | | installmentAmount | number |