1
paypal.Button.render({

        env: 'sandbox', // Or 'sandbox',

        commit: true, // Show a 'Pay Now' button

        payment: function() {
            // Set up the payment here
        },

        onAuthorize: function(data, actions) {
            // Execute the payment here
       }

    }, '#paypal-button');

how to implement the above code in angular 2 component and call this function in the component html file by adding the paypal button in div

<div id="paypal-button"></div>
vijay raju
  • 21
  • 2

1 Answers1

3

I'm not sure what is on your mind - do you want to have a component with button inside and bind the functions to it with paypal.Button.render (which I'm not familiar with to be fair)?

You can create PaypalButtonComponent and call this render action on ngOnInit (you must implement OnInit from @angular/core). I've written the following example:

    import { Component, OnInit } from 'angular2/core';

    @Component({
        selector: 'paypal-button',
        template: `<div id="paypal-button">Button</div>`
    })
    export class PaypalButtonComponent implements OnInit {
        public ngOnInit(): void {
            (window as any).paypal.Button.render({

                env: 'sandbox', // Or 'sandbox',

                commit: true, // Show a 'Pay Now' button

                payment: function () {
                    // Set up the payment here
                },

                onAuthorize: function (data, actions) {
                    // Execute the payment here
                }

            }, '#paypal-button');
        }
    }

EDIT: https://plnkr.co/edit/qaxBsnEcIPnD8oWFMj6z (check src/app.ts)

I've created mock paypal.Button.render method that mimics the desired activity and implemented two buttons: one with plain function passed and second, where I passed components method with proper this pointer. Hope this helps.

Tomek Fiechowski
  • 102
  • 3
  • Hi, Thank you for the reply. But i want to add that java script in an angular 2 component typescript and the the button should render and go to the paypal site for further payment and after the transaction it should return to the home page. I am unable to integrate the express checkout button in angular 2 and render the button and proceed to the paypal sandbox site. please help me out. Thank you. – vijay raju May 15 '17 at 16:11