如何在角度4中集成paytm

Question

我在角度4中集成了paytm。在项目中成功添加了paytm插件，但我不知道如何在ts文件中导入paytm插件。并调用java文件文件函数。

请帮帮我... 这是我的代码

import { Nav, Platform } from 'ionic-angular';
import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import {} from 'jasmine';
import {LoginPage} from "../login/login";
import {SignUpPage} from "../signup/signup";
import {HomePage} from "../home/home";
import { Paytm } from '@ionic-paytm/paytm';

@Component({
    selector: 'page-apphome',
    templateUrl: 'apphome.html'
})
export class AppHomePage implements OnInit {

    constructor(public navCtrl: NavController ,public paytm:Paytm) {}

    ngOnInit(){
        window.plugins.paytm.startPayment("526", "25862", "abc@gmail.com", 
           "777777777", "25", successCallback, failureCallback);
        var userids=window.localStorage.getItem('userid');
        //alert(userids);
        if(userids!= null)
        {
            this.navCtrl.push(HomePage);
        }
    }
}

Answer 1

PayTM和PayU仍旧在旧的Web服务上，它们仍然不支持REST，因此，您需要准备Web api中的所有参数，然后将其作为名称值数组发送，然后将其绑定到有角页面并然后执行自动发布或手动发布

<form ngNoForm  #myFormPost name="myFormPost" id="payForm" [action]="postURL" method="POST">
    <ng-container *ngFor="let input of apiResponse">
        <input *ngIf="!input.multiline" type="hidden" [name]="input.name" [value]="input.value" />
        <textarea *ngIf="input.multiline" [name]="input.name" class="textarea--hidden">{{input.value}}</textarea>
      </ng-container>
      <button (click)="onPost()">Post</button> 
</form>

                      {{input.value}}              发布                       {{input.value}}              发布

 Dictionary<string, string> dicPam = new Dictionary<string, string>
            {
                { "MID", parameters.MID },
                { "CHANNEL_ID", parameters.CHANNEL_ID },
                { "INDUSTRY_TYPE_ID", parameters.INDUSTRY_TYPE_ID},
                { "WEBSITE", parameters.WEBSITE},
                { "EMAIL", parameters.EMAIL},
                { "MOBILE_NO", "9999999999" },
                { "CUST_ID", parameters.CUST_ID },
                { "ORDER_ID", parameters.ORDER_ID },
                { "TXN_AMOUNT", parameters.TXN_AMOUNT},
                { "CALLBACK_URL", parameters.CALLBACK_URL} //This parameter is not mandatory. Use this to pass the callback url dynamically.
            };

        var payTMParams = _mapper.Map<PayTMParams>(parameters);
        payTMParams.CHECKSUMHASH= CheckSum.generateCheckSum(merchantKey, dicPam);

        var PayParams = new PaymentParams();
        PayParams.PostURL= _configuration.GetSection("PaymentConfig:PayTM:POSTURL").Value;
        foreach (var item in dicPam)
        {
            PayParams.PayParams.Add(new ValPair { Name = item.Key, Value = item.Value });
        }

        PayParams.PayParams.Add(new ValPair { Name = "CHECKSUMHASH", Value = payTMParams.CHECKSUMHASH });
        return PayParams;

Answer 2

关于paytm，它们不支持REST。因此最好遵循普通的Form提交机制。根据其文档，我们可以将所需的参数与CHECKSUMHASH一起作为普通的POST请求传递。

>

<form ngNoForm method="post"action="https://securegwstage.paytm.in/theia/processTransactio">

ngNoForm  会将所有数据直接发布到其网关。

Answer 3

您可以简单地将其存档。

Create CHECKSUMHASH using backend (.net, php, etc..)借助API，只需替换表单中的checksumhash。或者，当您从API获取form时，也可以在组件本身中创建checksumhash。

在paytm documentation的帮助下创建CHECKSUMHASH。步骤2，然后返回CHECKSUMHASH。 Take all parameters from frontend.

例如： 我只用一个按钮进行交易，现在不需要任何形式。在checksumhash之后，我将创建表单。

app.component.html：

<button type="button" (click)="submitForm()">PAY NOW</button>

app.component.ts：

constructor(private http: HttpClient) { }

// I have all below fields values
paytm = {
    MID: "xxxxx", // paytm provide
    WEBSITE: "WEBSTAGING", // paytm provide
    INDUSTRY_TYPE_ID: "Retail", // paytm provide
    CHANNEL_ID: "WEB", // paytm provide
    ORDER_ID: "xxxxx", // unique id
    CUST_ID: "xxxxx", // customer id
    MOBILE_NO: "xxxx", // customer mobile number
    EMAIL: "xxxx", // customer email
    TXN_AMOUNT: "10.00", // transaction amount
    CALLBACK_URL: "http://localhost:4200/paymentverity", // Call back URL that i want to redirect after payment fail or success
  };

submitForm() {
    // I will do API call and will get CHECKSUMHASH.
    this.http.post('https://myAPI.com/createchecksum', this.paytm)
       .subscribe((res: any) => {
             // As per my backend i will get checksumhash under res.data
             this.paytm['CHECKSUMHASH'] = res.data;
             // than i will create form
             this.createPaytmForm();
        };       
};

createPaytmForm() {
   const my_form: any = document.createElement('form');
    my_form.name = 'paytm_form';
    my_form.method = 'post';
    my_form.action = 'https://securegw-stage.paytm.in/order/process';

    const myParams = Object.keys(this.paytm);
    for (let i = 0; i < myParams.length; i++) {
      const key = myParams[i];
      let my_tb: any = document.createElement('input');
      my_tb.type = 'hidden';
      my_tb.name = key;
      my_tb.value = paytmParams[key];
      my_form.appendChild(my_tb);
    };

    document.body.appendChild(my_form);
    my_form.submit();
// after click will fire you will redirect to paytm payment page.
// after complete or fail transaction you will redirect to your CALLBACK URL
};

Answer 4

当我从http://paywithpaytm.com/developer/discussion/topic/how-to-integrate-paytm-in-angularjs-web-app/得到一些信息时，很清楚地写道，paytm不支持角度js，它们只能帮助你进行集成和checksum generation逻辑，而无需下载我们的SDK这是不可能的。

检查https://github.com/Paytm-Payments/Paytm_App_Checksum_Kit_PHP

Answer 5

 ShowBillingForm: boolean = true;
  PlanId: any;
  PlanRes: any = [];
  PlanDetail: any = [];
  CustomField: boolean = false;
  placemntCount: any;
  totalPlaceCost: any;
  costPerPlace: any;
  DiscountAmount: any = 30;
  DiscountedAmount: any;
  NetAmount: any;

  // ************************Paytm Payment Process *********************
  RequestedData: any;
  responseBilling: any;
  EmployerId: any;
  timestamp: any;
  TransactionFormshow: boolean = false;
  RequestDataPay: any;
  SubmitBillingDetail() {
    this.EmployerId = this.userdetail.id;
    this.timestamp = +new Date;
    this.timestamp.toString();
    this.PlanDetailForm.controls['BillingState'].value
    this.RequestedData = {
      "name": this.PlanDetailForm.controls.BillingName.value,
      "email": this.PlanDetailForm.controls.Billingemail.value,
      "contactnum": this.PlanDetailForm.controls.Billingcontactnum.value,
      "address": this.PlanDetailForm.controls.Billingaddress.value,
      "state": this.PlanDetailForm.controls.BillingState.value,
      "district": this.PlanDetailForm.controls.BillingDistrict.value,
      "employerid": this.EmployerId,
      "cmpid": this.userdetail.companyID,
      "createdby": this.EmployerId,
      // "order_id": Math.random().toString(36).substr(2, 9),
      "order_id": Math.floor(10000000000 + Math.random() * 90000000000),
      "transaction_id": '',
      "status": 'Pending',
      "validfrom":this.PlanDetail.valiD_FROM? moment(this.PlanDetail.valiD_FROM).format('YYYY-MM-DD'):parseInt('null'),
      "validto":this.PlanDetail.valiD_TO? moment(this.PlanDetail.valiD_TO).format('YYYY-MM-DD'):parseInt('null'),
      "Response_msg": 'Successfull',
      "TXN_AMOUNT": this.PlanDetailForm.controls.Amount.value,
      "Payment_For": 'REGISTRATION',
      "CALLBACK_URL": environment.apiUrl + "Payment/PaymentConfirmation",
    };

    this.spinnerService.show();
    this.authenticationService.SaveBillingDetailforRegistration(this.RequestedData).subscribe(res => {
      this.responseBilling = res;
      this.PurchaseStatus = this.responseBilling.purchasePlanStatus;
      this.TransactionFormshow = true;
      this.spinnerService.show();
      localStorage.setItem('PurchaseStatus', this.PurchaseStatus);

      this.RequestDataPay = {
        "MID": this.responseBilling.mid,
        "WEBSITE": this.responseBilling.website,
        "INDUSTRY_TYPE_ID": this.responseBilling.industrY_TYPE_ID,
        "CHANNEL_ID": this.responseBilling.channeL_ID,
        "ORDER_ID": this.responseBilling.ordeR_ID,
        "CUST_ID": this.responseBilling.cusT_ID,
        "MOBILE_NO": this.responseBilling.mobilE_NO,
        "EMAIL": this.responseBilling.email,
        "TXN_AMOUNT": this.responseBilling.txN_AMOUNT,
        "CHECKSUMHASH": this.responseBilling.checksum,
        "CALLBACK_URL": this.responseBilling.callbacK_URL
      };
      this.createPaytmForm();
    });
  }

  createPaytmForm() {
    const my_form: any = document.createElement('form');
    my_form.name = 'paytm_form';
    my_form.method = 'post';
    // my_form.action = 'https://securegw-stage.paytm.in/order/process';
    my_form.action = this.responseBilling.paytmgatway;
    const myParams = Object.keys(this.RequestDataPay);
    for (let i = 0; i < myParams.length; i++) {
      const key = myParams[i];
      let my_tb: any = document.createElement('input');
      my_tb.type = 'hidden';
      my_tb.name = key;
      my_tb.value = this.RequestDataPay[key];
      my_form.appendChild(my_tb);
    };
    document.body.appendChild(my_form);
    my_form.submit();
  }