Android Integration Guide

📱 Installation guide for Android

On Android, the best way to display the Blockchain.com Pay widget is using a Chrome Custom Tab

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

• Jetpack Compose

• Android View System

• 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 to your project

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

1. Launch a Chrome Custom Tab

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)
        )
    }
}

1. Customize it!

Android View System

1. Add the AndroidX Browser Library to your project

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

1. Launch a Chrome Custom Tab

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)
        )
    }
}

1. Customize it!

React Native

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:

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:

val intent = CustomTabsIntent.Builder()
...
.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()

For additional integration and customization instructions please refer to Google's Integration Guide for Chrome Custom Tabs.

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