Angularjs 如何在Ionic中使用Authorize.net Accept托管付款在lightbox中显示付款方式？

我在爱奥尼亚框架中使用authorize.net支付网关

我在用这个 我正在关注这一点 这是我的密码：

home.page.html

我想展示这样的近期卡片：

我想加载付款方式，如上图所示

我当前在我的应用程序中获得此视图：

如果有人有问题或想了解更多详情，请发表评论。

在文档的“”部分中，没有使用Accept.js将配置文件ID传递给托管表单的选项

为此，您可以按照添加此功能

从文件中：

调用以请求表单令牌。此请求包含事务信息和表单参数设置

通过向客户发送包含表单令牌的HTML帖子，嵌入支付表单或将客户重定向到支付表单

您的客户填写并提交付款表。API将事务发送到Authorize.net进行处理。客户是 返回到您的站点，该站点根据URL显示结果页 跟踪或发送响应详细信息

我相信您可以使用重定向选项将用户重定向到Authorize.net页面。您可以使用插件打开另一个webview并转到新网页

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Payment
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button
    class="AcceptUI payButton"
    id="AcceptUI"
    data-billingAddressOptions='{"show":true, "required":true}'
    [attr.data-apiLoginID]="apiLoginID" [attr.data-clientKey]="clientKey"
    data-acceptUIFormHeaderTxt="Card Information"
    data-acceptUIFormBtnTxt="Submit"
    data-paymentOptions='{"showCreditCard": true, "showBankAccount": true}'
    data-responseHandler="responseHandler"
    >
    Pay ${{ amount }}
  </ion-button>
  <ion-button (click)="loadIframe()">Load</ion-button>
</ion-content>

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { WebService } from './../web.service';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  public apiLoginID = 'xxxxx';
  public clientKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
  public transactionKey = 'xxxxxxxxxxxxxxxx';
  public amount = '5';

  constructor(
    private webService: WebService,
    private navCrtl: NavController
  ) { }

  ionViewWillEnter() {
    setTimeout(() => {
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.innerHTML = 'console.log(\'done\');'; // inline script
      s.src = 'https://jstest.authorize.net/v3/AcceptUI.js';
      s.charset = 'utf-8';
      document.querySelector('head').appendChild(s);
    }, 1000);
    document.removeEventListener('notification', () => { console.log('Removed!!'); });
    const buttonElement = document.getElementById('AcceptUI');
    buttonElement.addEventListener('notification', (response: any) => {
      event.stopPropagation();
      event.preventDefault();
      // Call your api here and pass the opaque data in backend
      this.paymentHandler(response.detail.opaqueData);
      document.removeEventListener('notification', () => { console.log('Removed!!'); });
    }, false);
  }


  paymentHandler(payData: any) {
    console.log(payData);
    // Put you api here to capture the payment data
    const data = {
      createTransactionRequest: {
        merchantAuthentication: {
          name: this.apiLoginID,
          transactionKey: this.transactionKey
        },
        transactionRequest: {
          transactionType: 'authCaptureTransaction',
          amount: this.amount,
          payment: {
            opaqueData: payData
          }
        }
      }
    };
    this.webService.paymentHandler(data).then((response) => {
      console.log('API', response);
      alert(JSON.stringify(response));
    }).catch((error) => {
      console.log(error);
    })
  }
}
// To handle response form authorize.net api
window['responseHandler'] = function responseHandler(response) {
  console.log('ok');
  console.log('responseHandler', response);
  if (response.messages.resultCode === 'Ok') {
    const event = new CustomEvent('notification', { detail: response });
    const buttonElement = document.getElementById('AcceptUI');
    buttonElement.dispatchEvent(event);
  }

  if (response.messages.resultCode === 'Error') {
    let i = 0;
    while (i < response.messages.message.length) {
      console.log(
        response.messages.message[i].code + ': ' +
        response.messages.message[i].text
      );
      i = i + 1;
    }
  };
};

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class WebService {

  constructor(private http: HttpClient) {
    console.log('Hello WebServiceProvider Provider');
  }

  paymentHandler(data) {
    return new Promise((resolve, reject) => {
      this.http.post('https://apitest.authorize.net/xml/v1/request.api', data)
        .subscribe(resp => {
          console.log(resp);
          resolve(resp);
        }, (err) => {
          reject(err);
        })
    });
  }
}