Angular Assigning Form Values to Payment directive

Question

My problem is this below, code runs well with hard coded values like this, it initiates the payment processor

 options: PaystackOptions = {

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

};

when called from .html side with button like this

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

then I try assigning form values here from the onSubmit() method, when console logged I get to see the form values but it's not assigning to it

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

it says email is empty hence it can't initiate payment, am trying my hands on angular, so am new here. any help?

the question is how do I replace the hard coded values up there with values entered by user from my form.

my .ts file looks like this

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


  }



}

my .html file

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

Answer 1

Have a look at this example, I Created this using documentation in (API keys need to be set properly in app.module)

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

Demo

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

Once submitted keep an eye on the console where you will see something resembling this

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

You will find the data you submitted just after the key parameter

Make sure you generate proper Refs for payements. Take a look at following

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