如何将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代码定位到卡号输入框并填充内容,兼容性更好:
- 先在当前Activity的布局文件中添加WebView组件(如果还没有的话):
<WebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone"/> <!-- 默认隐藏,点击Send按钮后再显示 -->
- 替换原来的
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参数接收卡号并预填充到页面,你可以先发送请求再跳转网页:
- 首先添加OkHttp依赖(在app/build.gradle的dependencies中):
implementation 'com.squareup.okhttp3:okhttp:4.12.0'
- 修改
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




