> For the complete documentation index, see [llms.txt](https://docs.blockchain.com/pay/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.blockchain.com/pay/getting-started/integration-options/mobile-integration/android-integration-guide.md).

# Android Integration Guide

On Android, the best way to display the Blockchain.com Pay widget is using a [Chrome Custom Tab](https://developer.chrome.com/docs/android/custom-tabs/)

Here's some common ways to display a Chrome Custom Tab in your Android app:

* [Jetpack Compose](#jetpack-compose)
* [Android View System](#android-view-system)
* [React Native](#react-native)

**Benefits:**

* Customizable UI for a consistent experience.
* Speedy and secure with shared Chrome security settings.
* Access to stored Chrome data like cards and passwords.
* Google Pay integration for streamlined payments.

### Jetpack Compose

1. Add the [AndroidX Browser Library](https://developer.android.com/jetpack/androidx/releases/browser#declaring_dependencies) to your project

```gradle
implementation 'androidx.browser:browser:<version>'
```

2. Launch a Chrome Custom Tab

```kotlin
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BcPaySampleTheme {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    val context = LocalContext.current
                    Button(onClick = ::launchBcPay) {
                        Text("Launch Blockchain.com Pay")
                    }
                }
            }
        }
    }

    private fun launchBcPay() {
        val widgetUrl = "https://www.blockchain.com/pay/widget?apiKey=[your-api-key]"
        val intent = CustomTabsIntent.Builder().build()
        intent.launchUrl(
            this@MainActivity,
            Uri.parse(widgetUrl)
        )
    }
}
```

3. [Customize it!](#customizing-a-chrome-custom-tab-android-view-system-and-jetpack-compose)

### Android View System

1. Add the [AndroidX Browser Library](https://developer.android.com/jetpack/androidx/releases/browser#declaring_dependencies) to your project

```gradle
implementation 'androidx.browser:browser:<version>'
```

2. Launch a Chrome Custom Tab

```kotlin
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<Button>(R.id.btnLaunchBCPay)
            .setOnClickListener {
                launchBcPay()
            }
    }

    private fun launchBcPay() {
        val widgetUrl = "https://www.blockchain.com/pay/widget?apiKey=[your-api-key]"
        val intent = CustomTabsIntent.Builder().build()
        intent.launchUrl(
            this@MainActivity,
            Uri.parse(widgetUrl)
        )
    }
}
```

3. [Customize it!](#customizing-a-chrome-custom-tab-android-view-system-and-jetpack-compose)

### React Native

```javascript
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { CustomTabs } from 'react-native-custom-tabs';

const App = () => {

  const openCustomTab = async () => {
    try {
      await CustomTabs.openURL('https://www.blockchain.com/pay/widget?apiKey=[your-api-key]', {
        toolbarColor: '#FF5733', // Customize the toolbar color
        enableUrlBarHiding: true, // Enable hiding of URL bar on scroll
        showPageTitle: true, // Show the webpage title in the toolbar
        enableDefaultShare: true, // Enable the default share action
        animations: {
          startEnter: 'slide_up', // Set enter animation (slide_up, slide_down, slide_in_left, slide_in_right)
          startExit: 'slide_down', // Set exit animation (slide_up, slide_down, slide_out_left, slide_out_right)
          endEnter: 'slide_up', // Set enter animation for closing (slide_up, slide_down, slide_in_left, slide_in_right)
          endExit: 'slide_down', // Set exit animation for closing (slide_up, slide_down, slide_out_left, slide_out_right)
        },
      });
    } catch (error) {
      console.error('Error opening Custom Tab: ', error);
    }
  };

  return (
    <TouchableOpacity onPress={openCustomTab} style={{ alignItems: 'center', marginTop: 50 }}>
      <Text style={{ fontSize: 18 }}>Open Custom Tab</Text>
    </TouchableOpacity>
  );
};

export default App;
```

#### Customizing a Chrome Custom Tab (Android View System and Jetpack Compose)

Set the toolbar color for both light and dark modes:

```kotlin
val intent = CustomTabsIntent.Builder()
    .setDefaultColorSchemeParams(
        CustomTabColorSchemeParams.Builder()
            .setToolbarColor(colorPrimaryLight)
            .build()
    )
    .setColorSchemeParams(
        CustomTabsIntent.COLOR_SCHEME_DARK, CustomTabColorSchemeParams.Builder()
            .setToolbarColor(colorPrimaryDark)
            .build()
    )
    .build()
```

Set the enter and exit animations for the tab:

<pre class="language-kotlin"><code class="lang-kotlin">val intent = CustomTabsIntent.Builder()
<strong>...
</strong>.setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(this, R.anim.slide_in_left, R.anim.slide_out_right)            
.build()
</code></pre>

For additional integration and customization instructions please refer to *Google's* [*Integration Guide for Chrome Custom Tabs*](https://developer.chrome.com/docs/android/custom-tabs/guide-get-started/)*.*

Using these in-app chrome tabs can elevate your app's performance and user experience.