### 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',
    'BANK_TRANSFER' (not realized yet),
    'PAYPAL' (not realized yet),
    'WALLET_ONE' (not realized yet)

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[]` </bcode>`

Public paymentMethodsObjects
`paymentMethodsObjects: `{ BANK_TRANSFER: { name: string; value: string; }; PAYPAL: { name: string; value: string; }; TWO_...` </bcode>`
Payment methods information array

Public paymentsForm
`paymentsForm: `any` </bcode>`
Payments form

Public showPaymentsList
`showPaymentsList: `boolean` </bcode>`
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',
         * 'BANK_TRANSFER' (not realized yet),
         * 'PAYPAL' (not realized yet),
         * 'WALLET_ONE' (not realized yet)
         * ```
         * For default all methods are injected.
         *
         */
        @Input() public paymentMethods = [
            'BANK_TRANSFER',
            'PAYPAL',
            'TWO_CHECKOUT',
            'WALLET_ONE',
            'STRIPE'
        ];

        /**
         * Payment methods information array
         */
        public paymentMethodsObjects = {
            BANK_TRANSFER: {
                name: 'BANK_TRANSFER',
                value: 'Bank transfer'
            },
            PAYPAL: {
                name: 'PAYPAL',
                value: 'Paypal'
            },
            TWO_CHECKOUT: {
                name: 'TWO_CHECKOUT',
                value: '2Checkout'
            },
            WALLET_ONE: {
                name: 'WALLET_ONE',
                value: 'Wallet One'
            },
            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 ""