Step 2: Integration

a. Import the SDK Module

1. Copy the ${sdkFolder}/visa-sensory-branding-sdk module to your project, it's a pre-configured Gradle module for visa-sensory-branding-${sdkVersion}.aar.

2. Add the SDK module to your own modules' build.gradle(.kts) by the below code:

dependencies { 
... implementation(project(":visa-sensory-branding-sdk")) 
}

3. Click Gradle Sync button of Android Studio to load the SDK.

4. You can find the integration examples under folders inside the package.

b. Initialisation

Import the Visa Sensory Branding class reference into source files as necessary.

import com.visa.SensoryBrandingView

c. Animate

Activates the Visa Sensory Branding animation.

vsb.animate(error -> {
Log.d("SensoryBrandingView", error == null ? "OK" : error.getMessage());
return null;
});

There are 3 possible error messages (Error#getMessage()):

Error Message
NOTE

Previous animation still in progress, cannot start new animation

Please wait for a while till animation displays

Alpha channel is not supported for backdrop color

Please choose a different background color

Invalid background color selected, contrast levels are below 3:1 against #FFFFFF #1434CB

Please choose a different background color

d. Sizing & Layout

You can choose to have the Visa animation render in full screen on a device, or in a constrained view in context of other UI elements. To render in full screen, simply initialize the container to fit device height and width and set background color to same as backdropColor. For constrained view, specify the width of SensoryBrandingView during initialization.

  1. The width of the animation object will not be larger than 60% of the screen's width. If the width is set to be larger, it will be resized to be 60% of the screen's width.

  2. The width of the animation object will not be smaller than 20% of the screen's width. If the width is set to be smaller, it will be resized to be 20% of the screen's width.

e. Animation Configuration Parameters

Language Code

Define the language of the texts present below the checkmark

vsb.setLanguageCode("en");

Backdrop Color

The color behind the animation, used to determine the Visa logo colors. Specify Visa Blue(#1434CB) for a white Visa logo. Specify White(#FFFFFF) for a blue Visa logo. Any other color will result in either blue or white color applied to the Logo, depending on contrast.

Note: Do not set backdropColor with simi-transparent color or make it transparent.

vsb.setBackdropColor(Color.parseColor("#123333"));

Sound

Set to true to enable sound. (true by default)

vsb.setSoundEnabled(true);

Checkmark

This parameter enables/disables checkmark screen after visa logo animation:

Checkmark Mode includes:

  • CheckmarkMode.CHECKMARK: shows checkmark at the end of the animation without text

  • CheckmarkMode.CHECKMARK_WITH_TEXT: shows checkmark and checkmark text at the end of the animation (default)

  • CheckmarkMode.NONE: no checkmark at the end of the animation

Checkmark Text includes:

  • CheckmarkTextOption.APPROVE

  • CheckmarkTextOption.SUCCESS

  • CheckmarkTextOption.COMPLETE (default)

vsb.setCheckmarkMode(CheckmarkMode.CHECKMARK_WITH_TEXT);
vsb.setCheckmarkText(CheckmarkTextOption.APPROVE);

Last updated