WebView Integration Guide

Accrue wallet can be integrated into mobile applications using the WebView approach - a fast, simple way to embed web content in your native apps. This approach offers a lighter alternative to the native SDKs, while still providing full wallet functionality.

Overview​

Platform Options​

Accrue's WebView integration is available for all major mobile platforms:

Implementation Steps​

The process of embedding the Accrue wallet in a native app using WebView is straightforward:

1. Set up a WebView component in your mobile application
2. Load the Accrue wallet URL provided by your Accrue representative
3. Pass user data and parameters via URL parameters
4. Handle deep linking (optional) for specific navigation

Base URL​

https://embed[-sandbox].accruesavings.com/webview?merchantId={yourMerchantId}

• Use -sandbox suffix for testing environments
• Replace {yourMerchantId} with your unique merchant ID from Accrue

iOS Implementation​

iOS applications can use the WKWebView component from WebKit to embed the Accrue wallet.

import SwiftUI
import WebKit

struct ContentView: View {
    @State private var showWebView = false
    // Replace with your actual widget URL
    private let url: String = "https://embed.accruesavings.com/webview?merchantId=yourMerchantId"

    var body: some View {
        VStack(spacing: 40) {
            Spacer()
            // Button to open the WebView
            Button(action:{
                showWebView.toggle()
            }){
                Text("Open Accrue Wallet")
                .fontWeight(.bold)
                .foregroundColor(.white)
                .padding()
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.black)
                .cornerRadius(25)
            }.sheet(isPresented: $showWebView, content: {
                WebView(url: URL(string: url)!)
            })
        }
        .padding()
    }
}

struct WebView: UIViewRepresentable {
    var url: URL

    func makeUIView(context: Context) -> WKWebView {
      let webview = WKWebView()
      webview.navigationDelegate = context.coordinator
      webview.uiDelegate = context.coordinator
      return webview
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
      let request = URLRequest(url: url)
      uiView.load(request)
    }
    
    func makeCoordinator() -> Coordinator {
      Coordinator(self)
    }
    
    class Coordinator: NSObject, WKNavigationDelegate, WKUIDelegate {
        var parent: WebView

        init(_ parent: WebView) {
            self.parent = parent
        }
        
        // Open external links in the browser
        func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
              if navigationAction.targetFrame == nil || !navigationAction.targetFrame!.isMainFrame {
                  // Load the request in the web browser
                  UIApplication.shared.open(navigationAction.request.url!)
              }
              return nil
        }
    }
}

Android Implementation​

Android applications can use the standard WebView component:

// MainActivity.kt
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.javaScriptEnabled = true
        webView.webViewClient = WebViewClient()
        
        // Replace with your actual widget URL
        webView.loadUrl("https://embed.accruesavings.com/webview?merchantId=yourMerchantId")
    }
}

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Cross-Platform Implementation​

For Flutter applications, you can use the webview_flutter package:

// main.dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Accrue Wallet'),
        ),
        body: WebView(
          initialUrl: 'https://embed.accruesavings.com/webview?merchantId=yourMerchantId',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

Deep Linking Support​

The WebView integration supports deep linking to specific screens within the Accrue wallet. To implement deep linking:

1. Receive the deep link in your app
2. Extract the redirection token from the deep link URL
3. Forward the token to the Accrue wallet by adding it to the WebView URL

Deep Link URL Format​

https://embed[-sandbox].accruesavings.com/webview?merchantId={yourMerchantId}&to={redirectionToken}

The redirectionToken parameter tells the Accrue wallet which specific screen to display when loaded. This token is typically provided within deep links sent to your users (like in email campaigns).

URL Parameters​

You can customize the wallet experience by adding parameters to the WebView URL:

Example URL with parameters:

https://embed.accruesavings.com/webview?merchantId=yourMerchantId&referenceId=USER123&email=user@example.com&phoneNumber=+12125551234

Security Considerations​

When implementing the WebView integration:

• Ensure your WebView settings only allow necessary JavaScript features
• Implement proper URL validation before loading URLs in the WebView
• Consider implementing certificate pinning for added security
• Follow platform-specific security best practices for WebViews