APIs & Features

After successfully setting up the SDK, you can now create a new instance of the card service and handle real customer data.

Listening to events

For tracking purposes, you can use the following code snippet to configure an event listener on your project.

Sample Code

1
2
3
4
5


const nativeEventListener = DeviceEventEmitter.addListener("APOLLO_CARDS_SDK",
    (event) => {
        console.log(event);
    }
);

Code Copied

To check SDK setup success

Use the following code snippet to check if your SDK setup was successful or not.

Sample Code

1
2
3
4
5


try {
    var response = await cardsService.checkSetupSDKDone();
} catch(e) {
    console.log(e);
}

Code Copied

To log your users out

To logout your users from your application, use the following code snippet in your project:

Sample Code

1
2
3
4
5


try {
    var response = await cardsService.logout();
} catch(e) {
    console.log(e);
}

Code Copied

Features

This section covers the various functionalities of the react native card SDK.

Get card view UI

The default view of the card is the collapsed view which displays only the PAN upfront. On clicking the card, users can toggle between the default view and the sensitive data view which requires their authentication. You can also integrate the copy feature along with the card view which allows users to copy the card number to the clipboard.

Simple Method

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {ApolloCardView} from '@zeta-apollo/rn-cards-sdk';

export default function App() {
    return (
        <SafeAreaView style={styles.container}>

            <ApolloCardView
                style={styles.cardViewStyle}
                cardId={CARD_ID} />

        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
    },
    cardViewStyle: {
        height: 198,
        width: 312,
    },
});

Code Copied

Properties supported

cardId - (String) Compulsory property. This denotes the card ID for which the card view is required. For example: CARD_ID = “123456789”
templateId - (String) Optional property. This denotes the template ID you want to render. For example: TEMPLATE_ID = “card_EN_UIVIEW”.
jsonPayload - (Object) Optional property. This denotes the additional payload you want to send. For example: JSON_PAYLOAD = { name: ‘user_name’, company: ‘zeta’ }.

Sample Screens

Collapsed view

Sensitive data view

Copy Card number

Card SDK provides the functionality to copy the un-masked card number. On success, it shows a toast message with the card number. Post that, you can paste the card number where-ever required.

Here is the code snippet for the same.

Detailed Method

1
2
3
4
5


try {
    var response = await cardsService.copyCardNumber(CARD_ID);
} catch(e) {
    console.log(e);
}

Code Copied

Set Static PIN UI

The SDK provides a user interface for setting the static PIN. Users are asked to enter the static PIN twice while setting up and a set of validations such as PIN length are determined at this stage. After confirmation, this static PIN is stored in the encrypted vault.

The following code snippet will allow you to configure the UI for setting up the static PIN

Detailed Method

1
2
3
4
5


try {
    var response = await cardsService.setStaticPinWithUI(CARD_ID);
} catch(e) {
    console.log(e);
}

Code Copied

Sample response

Set Static PIN UI - Initial

Set Static PIN UI - Incorrect PIN

Set Static PIN UI - Correct PIN

Set Static PIN UI - Success

Change Static PIN UI

Modifying an already existing static PIN can also be configured via this SDK. The static PIN authentication is closely coupled with the user authentication and it’s necessary for the users to enter their PIN during every app launch activity. The UI comprises three input fields where we can enter:

Old Static PIN
New Static PIN
Re-enter New Static PIN

The user interface does the following validations:

PIN lengths
Correctness of Old Static PIN entered
Equality of the New Static PIN entered twice

The following code snippet will allow you to modify the static PIN on the app.

Detailed Method

1
2
3
4
5


try {
    var response = await cardsService.changeStaticPinWithUI(CARD_ID);
} catch(e) {
    console.log(e);
}

Code Copied

Sample response

Change Static PIN UI - Initial

Change Static PIN UI - New PIN Mismatch

Change Static PIN UI - Success

Super PIN

Super PIN is a time-synced dynamic pin that changes every 2 minutes (configurable via backend logic). The app can query for the Super PIN with respect to different resources associated. User’s authentication is required to fetch the Super PIN.

Super PIN for resource

The return value is a Super PIN along with its validity in milliseconds. The following code snippet will allow you to fetch the super PIN for a selected resource.

Get Super PIN UI

Note: Use this only when you are sure that users have a single resource associated with their accountHolderId’s

Cards SDK also provides a UI for fetching the Super PIN. The UI adds a translucent black background on the existing screen and shows a popup containing the Super PIN. The UI is in accordance with the theme with which the SDK has been configured.

Here is a code snippet on how you can fetch the Super PIN UI assuming a single resource

Java Code

1
2
3
4
5


try {
    var response = await cardsService.getSuperPinUI();
} catch(e) {
    console.log(e);
}

Code Copied

Sample response

Get Super PIN API

The return value is a super PIN along with its validity in milliseconds. You can use this API when you’re sure that users have a single resource associated with their account holder ID. The following code snippet will allow you to fetch the super PIN.

Java Code

1
2
3
4
5


try {
    var response = await cardsService.getSuperPin();
} catch(e) {
    console.log(e);
}

Code Copied

Super PIN UI for resource

Cards SDK also provides a UI for fetching the Super PIN for a selected resource. The UI adds a translucent black background on the existing screen and shows a popup containing the Super PIN. The UI theme and layout would act accordingly based on how the SDK has been configured.

The following code snippet will allow you to fetch the Super PIN UI for a resource.

Sample Code

1
2
3
4
5


try {
    var response = await cardsService.getSuperPinForResourceUI(RESOURCE_ID);
} catch(e) {
    console.log(e);
}

Code Copied

Sample response

Super PIN for resource API

The return value is a Super PIN along with its validity in milliseconds. The following code snippet will allow you to fetch the super PIN for a selected resource.

Sample Code

1
2
3
4
5


try {
    var response = await cardsService.getSuperPinForResource(RESOURCE_ID);
} catch(e) {
    console.log(e);
}

Code Copied

Block Card UI

A customized user interface can be created for the blocking card functionality. This UI adds a translucent black background on the existing screen and shows a snackbar containing the option to either Cancel or Block the card.

The following code snippet will allow you to integrate this blocking UI:

Java

1
2
3
4
5


try {
    var response = await cardsService.blockCardUI(CARD_ID);
} catch(e) {
    console.log(e);
}

Code Copied

Sample response

Block Card API

This API is used to block the card temporarily. The blocked cards via this API can be reactivated later.

Java

1
2
3
4
5


try {
    var response = await cardsService.blockCard(CARD_ID);
} catch(e) {
    console.log(e);
}

Code Copied

Unblock Card UI

The following code snippet will allow you to design a user interface for unblocking the card. The UI adds a translucent black background on the existing screen and shows a snackbar containing the option to either Cancel or Unblock the card.

The following code snippet will allow you to add the unblock card UI into your project:

Java

1
2
3
4
5


try {
    var response = await cardsService.unblockCardUI(CARD_ID);
} catch(e) {
    console.log(e);
}

Code Copied

Sample response

Unblock Card API

After a user has blocked a card, this API will allow them to unblock the selected card straight from the app.

Java

1
2
3
4
5


try {
    var response = await cardsService.unblockCard(CARD_ID);
} catch(e) {
    console.log(e);
}

Code Copied

Front Face Card View UI

The front-facing portion of the virtual card can be displayed as a user interface on your iOS app using the Cards SDK. This UI comes as a default with the Fusion SDK and you can do a lot of customizations depending upon your customer base.

The following code snippet lets you make customizations on the front-facing card UI:

Java

1
2
3
4
5


try {
    var response = await cardsService.triggerFrontFaceUI();
} catch(e) {
    console.log(e);
}

Code Copied

Here are some of the UI designs supported with Front Face Card UI:

Design 1

Design 2

Choose your product

Choose your product

APIs & Features

Listening to events

To check SDK setup success

To log your users out

Features

Get card view UI

Copy Card number

Set Static PIN UI

Change Static PIN UI

Super PIN

Get Super PIN UI

Get Super PIN API

Super PIN UI for resource

Super PIN for resource API

Block Card UI

Block Card API

Unblock Card UI

Unblock Card API

Front Face Card View UI

Was this article helpful?