如何使用 Authorize.net 在灯箱中显示付款方式 接受 Ionic 中的托管付款？

Question

我在 Ionic 框架中使用 authorize.net 支付网关。

我正在使用这个acceptjs-angular-wrapper 我正在关注这个Tutorial 这是我的代码：

home.page.html

<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>

home.page.ts

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;
    }
  };
};

web.service.ts

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);
        })
    });
  }
}

我想显示最近的卡片，如下所示：

我想像上图那样加载付款方式。

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

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

Answer 1

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

为此，您可以关注Accept Hosted documentation添加此功能。

来自文档：

1. 致电getHostedPaymentPageRequest 请求表单令牌。该请求包含交易信息和表单参数设置。

2. 通过发送包含表单令牌的 HTML POST 到 https://accept.authorize.net/payment/payment.

3. 您的客户填写并提交付款表格。 API 将交易发送到 Authorize.net 进行处理。客户是 返回到您的站点，该站点显示基于 URL 的结果页面 已关注或已发送响应详细信息。

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