向付款指令分配表格值

问题描述 投票:0回答:1

我的问题在下面,这样的代码可以很好地与硬编码值一起运行,它会启动付款处理器

 options: PaystackOptions = {

   amount:4500,
   email:'[email protected]',
   ref: `ref-${Math.ceil(Math.random() * 10e13)}`

};

当从.html侧面调用并带有这样的按钮时

 <button class="btn btn-outline-dark" [disabled]="donateForm.invalid" 
angular4-paystack
[PaystackOptions]="options" 
(paymentInit)="paymentCancel()" 
(close)="paymentCancel()"
(callback)="paymentDone($event)">
Donate</button>

然后我尝试通过onSubmit()方法在此处分配表单值,登录控制台后,我看到了表单值,但未分配给它]

onSubmit() {


    console.log(this.donateForm.value);
    this.isSubmitted = true;
    this.options = {
      amount: this.donateForm.value['amount'],
      email: this.donateForm.value['email'],
      ref: `ref-${Math.ceil(Math.random() * 10e13)}`
    }
    console.log(this.options.amount, this.options.email);

    if (this.donateForm.invalid) {
      return;
    }

它说电子邮件是空的,因此它无法启动付款,我正努力尝试,所以这里很新。有帮助吗?

问题是如何用用户从表单中输入的值替换那里的硬编码值。

我的.ts文件看起来像这样

import { Component, OnInit } from '@angular/core';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Router } from '@angular/router';
import { PaystackOptions } from 'angular4-paystack';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [NgbModalConfig, NgbModal]
})


export class HomeComponent implements OnInit {


  donateForm: FormGroup;
  isSubmitted = false;

  options: PaystackOptions = {

   amount:4500,
   email:'[email protected]',
   ref: `ref-${Math.ceil(Math.random() * 10e13)}`

};


  reference = '';
  title: any;





  constructor(
    private fb: FormBuilder,
    config: NgbModalConfig,
    private authService: AuthService,
    private modalService: NgbModal,


  ) {
    // customize default values of modals used by this component tree
    config.backdrop = 'static';
    config.keyboard = false;
  }


  ngOnInit(): void {

    this.donateForm = this.fb.group({
      fullname: ['', [Validators.required, Validators.minLength(2)]],
      email: ['', [Validators.required, Validators.email]],
      amount: ['', Validators.required]
    });
  }

  paymentInit() {
    console.log('Payment initialized');
  }

  paymentDone(ref: any) {
    this.title = 'Payment successfull';
    console.log(this.title, ref);
  }

  paymentCancel() {
    console.log('payment failed');
  }


  open(content) {
    this.modalService.open(content);
  }

  modal(donate) {
    this.modalService.open(donate);
  }

  //check: number

  get formControls() { return this.donateForm.controls; }

  onSubmit() {


    console.log(this.donateForm.value);
    this.isSubmitted = true;
    this.options = {
      amount: this.donateForm.value['amount'],
      email: this.donateForm.value['email'],
      ref: `ref-${Math.ceil(Math.random() * 10e13)}`
    }
    console.log(this.options.amount, this.options.email);

    if (this.donateForm.invalid) {
      return;
    }


  }



}

我的.html文件

  <!-- Modal for Donation Start-->
    <ng-template #donate let-c="close" let-d="dismiss">
        <div class="modal-header">
            <h3 class="text-center p-4">Campaign Funds</h3>
            <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form [formGroup]="donateForm" (ngSubmit)="onSubmit()" class="container">

                <div class="form-group">
                    <p [ngClass]="{ 'has-error': isSubmitted && formControls.fullname.errors }">
                        <input type="text" class="form-control form-control-lg" formControlName="fullname"
                            placeholder="Enter Fullname">
                    </p>
                    <div *ngIf="isSubmitted && formControls.fullname.errors" class="help-block">
                        <div *ngIf="formControls.fullname.errors.required">Fullname is required</div>
                    </div>
                </div>
                <div class="form-group">
                    <p for="email" [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
                        <input type="email" class="form-control form-control-lg" formControlName="email"
                            placeholder="Enter valid email">
                    </p>
                    <div *ngIf="isSubmitted && formControls.email.errors" class="help-block">
                        <div *ngIf="formControls.email.errors.required">Email is required</div>
                    </div>
                </div>
                <div class="form-group">
                    <p for="amount" [ngClass]="{ 'has-error': isSubmitted && formControls.amount.errors }">
                        <input type="text" class="form-control form-control-lg" formControlName="amount"
                            placeholder="Enter Amount">
                    </p>
                    <div *ngIf="isSubmitted && formControls.amount.errors" class="help-block">
                        <div *ngIf="formControls.amount.errors.required">Amount is required</div>
                    </div>
                </div>
                <div class="text-center">
                    <button class="btn btn-outline-dark" [disabled]="donateForm.invalid" angular4-paystack
                        [PaystackOptions]="options" (paymentInit)="paymentCancel()" (close)="paymentCancel()"
                        (callback)="paymentDone($event)">Donate</button>
                </div>


            </form>

        </div>
        <div class="modal-footer d-flex justify-content-center">
            <small style="text-align: center;">Thank you for your donation</small>
        </div>

    </ng-template>
    <!-- Modal for Donation End-->

javascript angular typescript payment-gateway ng-init
1个回答
0
投票

看看这个例子,我使用(需要在app.module中正确设置API密钥)中的文档创建此示例。

https://www.npmjs.com/package/angular4-paystack

Demo

https://stackblitz.com/edit/angular-ivy-6p5sp4

一旦提交,请注意控制台,您将在其中看到类似的内容

https://api.paystack.co/checkout/request_inline?id=paystackYbsen&key=pk_test_xxxxxxxxxxxxxxxxxxxxxxx&ref=Test%20Case&email=Test%40gmail.com&amount=123&currency=NGN&metadata=%7B%22referrer%22%3A%22https%3A%2F%2Fangular-ivy-6p5sp4.stackblitz.io%2F%22%7D&mode=popup&hasTLSFallback=true&device=9642afc9fa65cb207c2d9c3e2b832253

您将在key参数之后找到您提交的数据

请确保您生成正确的付款参考。看一看以下

https://developers.paystack.co/docs/paystack-inline#section-working-with-paystack-inlinehttps://www.npmjs.com/package/angular4-paystack

© www.soinside.com 2019 - 2024. All rights reserved.