File

modules/payments-component/src/paymets/payments.component.ts

Description

Component that contain different types of payments and pass data to PaymentsContainerComponent

Metadata

selector payments
styleUrls payments.component.scss
templateUrl payments.component.html

Inputs

paymentMethods

Available payment methods. You can inject array with those payyment methods:

'TWO_CHECKOUT',
'STRIPE'

For default all methods are injected.

selectedMethod

Default payment method

Outputs

paymentSaved

EventEmitter of payment form

$event type: EventEmitter

Constructor

constructor(fb: any)

Methods

setSelectedMethod
setSelectedMethod(methodName: any)

Set current selected method

Parameters :
  • methodName

    payment method name

Returns: void
nextStep
nextStep(paymentForm: any)

Emit new payment form after filling it

Parameters :
  • paymentForm

    payment form FormGroup

Returns: void

Properties

Public paymentMethodsArray
paymentMethodsArray: any[]
Public paymentMethodsObjects
paymentMethodsObjects: { TWO_CHECKOUT: { name: string; value: string; }; STRIPE: { name: string; value: string; }; }

Payment methods information array

Public paymentsForm
paymentsForm: any

Payments form

Public showPaymentsList
showPaymentsList: boolean
Default value: true

Glag to show payments list

import { FormGroup, FormBuilder } from '@angular/forms';
import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';

/**
 * Component that contain different types of payments and pass data to {@link PaymentsContainerComponent}
 */
@Component({
    selector: 'payments',
    templateUrl: './payments.component.html',
    styleUrls: ['payments.component.scss']
})
export class PaymentsComponent implements OnInit{

    /**
     * Available payment methods. You can inject array with those payyment methods: 
     * ```
     * 'TWO_CHECKOUT',
     * 'STRIPE'
     * ```
     * For default all methods are injected. 
     *
     */
    @Input() public paymentMethods = [
        'TWO_CHECKOUT',
        'STRIPE'
    ];

    /**
     * Payment methods information array
     */
    public paymentMethodsObjects = {
        TWO_CHECKOUT: {
            name: 'TWO_CHECKOUT',
            value: '2Checkout'
        },
        STRIPE: {
            name: 'STRIPE',
            value: 'Stripe'
        }
    };
    
    /**
     * EventEmitter of payment form
     */
    @Output() paymentSaved = new EventEmitter();

    public paymentMethodsArray = [];

    /**
     * Payments form
     */
    public paymentsForm: FormGroup;

    /**
     * Default payment method
     */
    @Input() public selectedMethod = '';

    /**
     * Glag to show payments list
     */
    public showPaymentsList = true;

    constructor(fb: FormBuilder){
        this.paymentsForm = fb.group({
        });
    }

    ngOnInit(){
        this.selectedMethod = '';
        for (let i = 0; i < this.paymentMethods.length; i++){
            if(this.paymentMethodsObjects.hasOwnProperty(this.paymentMethods[i])){
                let currMethod = this.paymentMethods[i];
                this.paymentMethodsArray.push(this.paymentMethodsObjects[currMethod]);
            }
        }
        console.log(this.paymentMethodsArray);
    }

    /**
     * Set current selected method
     * @param methodName payment method name
     */
    setSelectedMethod(methodName){
        console.log(methodName);
        this.selectedMethod = methodName;
    }

    /**
     * Emit new payment form after filling it
     * @param paymentForm payment form FormGroup
     */
    nextStep(paymentForm) {
        paymentForm.paymentMethod = this.selectedMethod;
        console.log(paymentForm);
        this.paymentSaved.next(paymentForm);
    }
}

results matching ""

    No results matching ""