Jetpack Compose

VGS Collect Android SDK provide support for integration with apps that use Jetpack Compose UI building toolkit by providing composable wrappers for all VGS custom view. VGS Collect composable wrappers are designed to make integration easier and more straight forward by taking care of all needed state and lifecycle events.

Integration

Update VGS Collect Android SDK version to >1.9.

dependencies {
    implementation 'com.verygoodsecurity:vgscollect:1.9.+'
}

Select composable wrapper which meet your needs:

• VGSEditTextWrapper

• PersonNameEditTextWrapper

• VGSCardNumberEditTextWrapper

• CardVerificationCodeEditTextWrapper

• SSNEditTextWrapper

• ExpirationDateEditTextWrapper

• RangeDateEditTextWrapper

Add composable wrapper:

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.verygoodsecurity.vgscollect.core.VGSCollect
import com.verygoodsecurity.vgscollect.core.VgsCollectResponseListener
import com.verygoodsecurity.vgscollect.core.model.network.VGSResponse
import com.verygoodsecurity.vgscollect.widget.compose.VGSCardNumberEditTextWrapper

class ComposeActivity : AppCompatActivity(), VgsCollectResponseListener {

    private val collect: VGSCollect by lazy {
        VGSCollect(
            this,
            "<VAULT_ID>"",
            "<ENVIRONMENT>"
        ).also {
            it.addOnResponseListeners(this)
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Content(collect = collect)
            }
        }
    }

    override fun onResponse(response: VGSResponse?) {
        // Handle response
    }

    @Composable
    private fun Content(collect: VGSCollect?) {
        Column {
            VGSCardNumberEditTextWrapper(
                collect = collect,
                fieldName = "<FIELD_NAME>",
                modifier = Modifier.fillMaxWidth(),
                onViewCreate = { layout, input -> },
                onViewUpdate = { layout, input -> }
            )
        }
    }
}

All composable wrappers share same public interface:

• collect - VGSCollect instance.

• fieldName - field-name in JSON path in inbound route filters.

• modifier - modifier which applied to AndroidView wrapper.

• onViewCreate - a callback to be invoked when VGSTextInputLayout and VGS custom edit text view is created.

• onViewUpdate - a callback to be invoked after the view is inflated and upon recomposition to update the information and state of the view.

Best place to customize composable wrapper is onViewCreate:

@Composable
private fun Content(collect: VGSCollect?) {
    Column {
        VGSCardNumberEditTextWrapper(
            collect = collect,
            fieldName = "<FIELD_NAME>",
            modifier = Modifier.fillMaxWidth(),
            onViewCreate = { layout, input ->
                // Customise layout
                layout.setHint(hint)

                // Customise input
                input.setDivider(' ')
                input.setCardBrandIconGravity(Gravity.END)
            },
            onViewUpdate = { layout, input -> }
        )
    }
}