我的问题在下面,这样的代码可以很好地与硬编码值一起运行,它会启动付款处理器
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">×</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-->
看看这个例子,我使用(需要在app.module中正确设置API密钥)中的文档创建此示例。
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¤cy=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