No desenvolvimento de aplicações móveis, muitas vezes surge a necessidade de exibir conteúdo da web dentro da aplicação. Para isso, existem diversas opções, entre as quais se destacam a utilização de Custom Tabs (para Android) e Safari View Controller (para iOS). Essas tecnologias permitem que páginas da web sejam abertas em um navegador nativo incorporado à aplicação, proporcionando uma experiência de navegação mais fluida e consistente aos usuários.

Nesta etapa iremos instalar e configurar as dependências necessárias para implementar Custom Tabs em seu projeto desenvolvido em Java ou Kotlin.

Se você usa Android Native para desenvolver sua aplicação, a primeira coisa que você precisa é instalar essa dependência no arquivo build.gradle.

dependencies {
    ...
    implementation "androidx.browser:browser:1.4.0"
}

O próximo passo é implementar as Custom Tabs. Para fazer isso, você só precisa instanciá-las. A seguir, compartilhamos um exemplo de uma Custom Tab simples.

O código a seguir pode ser colocado ao abrir uma atividade ou ao executar uma ação nela, onde o valor url é igual ao init url do nosso checkout.

          
String url = "URL-PREFERENCE";
CustomTabsIntent intent = new CustomTabsIntent.Builder()
       .build();
intent.launchUrl(MainActivity.this, Uri.parse(url));

        

          
val url = "URL-PREFERENCE"
    val intent = CustomTabsIntent.Builder()
        .build()
    intent.launchUrl(this@MainActivity, Uri.parse(url))

        

Deep Links, também conhecidos como links diretos, são uma forma poderosa de permitir a navegação direta para telas ou seções específicas de uma aplicação móvel.

A partir do nosso checkout, é possível configurar Deep Links para retornar ao sua aplicação, seja clicando em um link "Voltar" ou automaticamente após concluir um fluxo de pagamento bem-sucedido, redirecionando-o de volta ao sua aplicação.

Para isso, devemos adicionar as propriedades back_urls e auto_return ao criar a preferência de pagamento, conforme necessário.

Para saber mais, você pode acessar a documentação sobre URLs de retorno.

Para configurar um Deep Link nativo no Android, vá para o arquivo Android /app/src/main/AndroidManifest.xml e declare qual atividade estará disponível como Deep Link. Abaixo, compartilhamos um exemplo de como é uma atividade com Deep Link.

<activity
   android:name=".Congrats"
   android:exported="true"
   android:label="@string/deeplink"
   android:theme="@style/Theme.MyApplication.NoActionBar" >

   <intent-filter>
       <action android:name="android.intent.action.VIEW" />
       <category android:name="android.intent.category.DEFAULT" />
       <category android:name="android.intent.category.BROWSABLE" />
       <!-- Accepts URIs that begin with "yourapp://congrats" -->
       <data android:scheme="yourapp"
           android:host="congrats" />

   </intent-filter>
</activity>

Nos valores intent, você deverá definir a atividade como navegável por outras aplicações. Com os valores scheme e host, você pode definir o Deep Link da aplicacão para uma atividade específica.

Lembre-se de que este Deep Link será usado em todos os back_urls da sua preferência. Nos ciclos da atividade que foi exposta (por exemplo, onCreate, onResume), você poderá inserir sua lógica de negócios após o pagamento.