You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何将card.io App扫描的信用卡号直接提交至网页并自动填充?

实现扫描信用卡号自动填充网页字段的方案

当然可以实现啦!你只需要结合card.io的扫描结果获取、以及WebView注入JS(或者网络请求)的方式就能完成需求,下面是具体的实现步骤:

一、先确保能获取到card.io扫描的卡号

首先你需要在card.io的扫描回调中拿到卡号,替换原来依赖EditText的逻辑。比如在你的扫描回调方法里(假设你用的是CardIOActivity的回调):

@Override
public void onCardScanned(CardIOActivityResult result) {
    // 提取扫描到的信用卡号
    String scannedCardNumber = result.getCardNumber();
    // 把卡号存到成员变量里,方便后续sendMessage方法调用
    this.mScannedCardNumber = scannedCardNumber;
}

二、修改sendMessage方法实现自动填充网页字段

这里有两种可靠的方案,你可以根据实际情况选择:

方案1:使用WebView加载网页并注入JS自动填充(推荐)

这种方式直接在App内加载目标网页,等网页加载完成后用JS代码定位到卡号输入框并填充内容,兼容性更好:

  1. 先在当前Activity的布局文件中添加WebView组件(如果还没有的话):
<WebView
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone"/> <!-- 默认隐藏,点击Send按钮后再显示 -->
  1. 替换原来的sendMessage方法代码:
public void sendMessage(View view) {
    // 先检查是否已经扫描到卡号
    if (mScannedCardNumber == null || mScannedCardNumber.isEmpty()) {
        Toast.makeText(this, "请先扫描信用卡哦", Toast.LENGTH_SHORT).show();
        return;
    }

    WebView webView = findViewById(R.id.web_view);
    webView.setVisibility(View.VISIBLE);

    // 启用WebView的JS支持
    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    // 设置网页加载完成后的回调,注入JS填充卡号
    webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            // 重点:这里需要替换成目标网页中卡号输入框的实际ID或选择器
            // 比如如果网页输入框的id是"card_number",就用下面的代码;如果是name属性,就改用getElementsByName
            String fillCardJs = "document.getElementById('card_number').value = '" + mScannedCardNumber + "';";
            view.evaluateJavascript(fillCardJs, null);
        }
    });

    // 加载目标网页
    webView.loadUrl("https://cdt-co.000webhostapp.com/customer/checkout_guest/ellington_checkout.php");
}

注意:你需要先打开目标网页,查看卡号输入框的实际HTML属性(比如id、name),把JS代码里的选择器改成对应的内容,否则无法定位到输入框完成填充。

方案2:通过POST请求提交卡号后跳转网页(需网页后端支持)

如果目标网页的后端支持通过POST参数接收卡号并预填充到页面,你可以先发送请求再跳转网页:

  1. 首先添加OkHttp依赖(在app/build.gradle的dependencies中):
implementation 'com.squareup.okhttp3:okhttp:4.12.0'
  1. 修改sendMessage方法:
public void sendMessage(View view) {
    if (mScannedCardNumber == null || mScannedCardNumber.isEmpty()) {
        Toast.makeText(this, "请先扫描信用卡哦", Toast.LENGTH_SHORT).show();
        return;
    }

    // 初始化OkHttp客户端
    OkHttpClient client = new OkHttpClient();
    // 构建POST参数,参数名要和网页后端接收的一致
    FormBody formBody = new FormBody.Builder()
            .add("card_number", mScannedCardNumber)
            .build();

    Request request = new Request.Builder()
            .url("https://cdt-co.000webhostapp.com/customer/checkout_guest/ellington_checkout.php")
            .post(formBody)
            .build();

    // 异步发送请求
    client.newCall(request).enqueue(new Callback() {
        @Override
        public void onFailure(Call call, IOException e) {
            e.printStackTrace();
            // 在UI线程提示错误
            runOnUiThread(() -> Toast.makeText(MainActivity.this, "请求失败,请重试", Toast.LENGTH_SHORT).show());
        }

        @Override
        public void onResponse(Call call, Response response) throws IOException {
            if (response.isSuccessful()) {
                // 请求成功后,跳转至目标网页
                runOnUiThread(() -> {
                    Intent intent = new Intent(Intent.ACTION_VIEW);
                    intent.setData(Uri.parse("https://cdt-co.000webhostapp.com/customer/checkout_guest/ellington_checkout.php"));
                    startActivity(intent);
                });
            } else {
                runOnUiThread(() -> Toast.makeText(MainActivity.this, "请求失败,请重试", Toast.LENGTH_SHORT).show());
            }
        }
    });
}

三、必要的权限配置

别忘了在AndroidManifest.xml中添加网络权限:

<uses-permission android:name="android.permission.INTERNET" />

内容的提问来源于stack exchange,提问作者yukimiya

火山引擎 最新活动