Paypal-checkout-components: Angular js integration

Created on 8 Dec 2016 · 22Comments · Source: paypal/paypal-checkout-components

Hello,
I'm having same issue as #126, so I've tried to instantiate button directly with script tag in angular template.
Button is displayed but popup keeps displaying spinner. Any Clues:
I'm having this error in log console:

logLevel https://www.paypalobjects.com/api/checkout.js:1590:21
    sendMessage/< https://www.paypalobjects.com/api/checkout.js:2680:17
    _loop2 https://www.paypalobjects.com/api/checkout.js:1117:54
    this.ppxo<["./node_modules/sync-browser-mocks/src/promise.js"]/SyncPromise.prototype.dispatch https://www.paypalobjects.com/api/checkout.js:1147:29
    this.ppxo<["./node_modules/sync-browser-mocks/src/promise.js"]/SyncPromise.prototype.then https://www.paypalobjects.com/api/checkout.js:1165:13
    run https://www.paypalobjects.com/api/checkout.js:888:24
    sendMessage https://www.paypalobjects.com/api/checkout.js:2667:20
    respond https://www.paypalobjects.com/api/checkout.js:2560:25
    this.ppxo<["./node_modules/post-robot/src/drivers/receive/types.js"]/exports.RECEIVE_MESSAGE_TYPES</< https://www.paypalobjects.com/api/checkout.js:2588:24
    _loop2 https://www.paypalobjects.com/api/checkout.js:1120:38
    this.ppxo<["./node_modules/sync-browser-mocks/src/promise.js"]/SyncPromise.prototype.dispatch https://www.paypalobjects.com/api/checkout.js:1147:29
    this.ppxo<["./node_modules/sync-browser-mocks/src/promise.js"]/SyncPromise.prototype.then https://www.paypalobjects.com/api/checkout.js:1165:13
    this.ppxo<["./node_modules/post-robot/src/drivers/receive/types.js"]/exports.RECEIVE_MESSAGE_TYPES< https://www.paypalobjects.com/api/checkout.js:2568:17
    receiveMessage https://www.paypalobjects.com/api/checkout.js:763:13
    messageListener

I'm also getting too much recursion error when popup window is displayed.
Can code structuring be problem here:
node_modules and src directory are on same levels, where template file and controler are located in src/js and src/tpl.
Any clues?
Thanks.

outdated

Source

neshke89

Most helpful comment

Push is done. Please clear your cache, and use the following code:

$scope.opts = {
    // Pass the client ids to use to create your transaction on sandbox and production environments
    client: {
        sandbox:    'Ae4jgb4s1ExAngKX-6hqb19kM0bSHG9qTKc9N8gj3gmKD8uV6FM6TN4KQVcw251wmTA3tvopl5jewjkD', // from https://developer.paypal.com/developer/applications/
        production: 'AVZhosFzrnZ5Mf3tiOxAD0M6NHv8pcB2IFNHAfp_h69mmbd-LElFYkJUSII3Y0FPbm7S7lxBuqWImLbl'  // from https://developer.paypal.com/developer/applications/
    },
    // Pass the payment details for your transaction
    // See https://developer.paypal.com/docs/api/payments/#payment_create for the expected json parameters

    env: 'sandbox',
    payment: function() {
        console.log('payment');
        //console.log(this.props.env);
        //console.log(this.props.client);


        return paypal.rest.payment.create(this.props.env, this.props.client, {
            transactions: [
                {
                    amount: {
                        total:    '1.00',
                        currency: 'USD'
                    }
                }
            ]
        });

    },
    // Display a "Pay Now" button rather than a "Continue" button
    commit: true,
    // Pass a function to be called when the customer completes the payment
    onAuthorize: function(data, actions) {
        console.log('authorize');
        console.log(data);
        console.log(actions);
       // return actions.payment.execute().then(function(res) {
         //   console.log(res);
          //  console.log('The payment was completed!');
        //});
    },
    // Pass a function to be called when the customer cancels the payment
    onCancel: function(data) {
        console.log('cancel');
        console.log(data);
        console.log('The payment was cancelled!');
    },
    style : {
        shape:'rect',
        size: 'small',
        color: 'blue'
    }
};

    <paypal-button
        env="opts.env"
        client="opts.client"
        payment="opts.payment"
        commit="opts.commit"
        on-authorize="opts.onAuthorize"
        on-cancel="opts.onCancel"
        style="opts.style">
    </paypal-button>

bluepnume on 8 Dec 2016

👍2

All 22 comments

Hi,

Can you paste your code? Or is it hosted somewhere so I can repro?

Also, which browser is the problem happening in?

bluepnume on 8 Dec 2016

Both chrome and mozzila. Unfortunately I can't give you link for repro, but will paste all relevant (as I think so) code in a few minutes

neshke89 on 8 Dec 2016

Ok so, this is button initialization in template file:
`

Are you loading on localhost, or are you loading on a file:// url?

bluepnume on 8 Dec 2016

localhost, like this: http://127.0.0.1:8080/src/#/app/page/price
I've uncomented that part of code as well.
I've used npm start to get localhost up and running.

neshke89 on 8 Dec 2016

Hmm, that shouldn't be the problem then.

Are you sure you pasted the full stack trace and error in the original message? I don't actually see an error message there, it doesn't look complete.

bluepnume on 8 Dec 2016

These are all displayed before any actions (click) on a button.
Does this makes it any more readable?

neshke89 on 8 Dec 2016

Hmm. Still not able to reproduce. I'm wondering if there's some conflict with one of the other libs you're loading.

Do the errors in chrome show anything more?

bluepnume on 8 Dec 2016

If you can zip the code up and send to daniel AT bluesuncorp DOT co DOT uk, I can keep trying.

bluepnume on 8 Dec 2016

👍1

Here's excerpt from error in chrome:
"No handler found for post message: xcomponent_init from https://www.sandbox.paypal.com in http://127.0.0.1:8080/src/
I'm wondering if it has something to do with router which uses # so that xcomponent files are not loaded?
Do I need to include any files except one from checkout.js in index.html?

neshke89 on 8 Dec 2016

OK I'm seeing the errors now in the files you sent. I'll see if I can figure out the cause.

bluepnume on 8 Dec 2016

If there's anything that I can do to help please reach out.
On čet, 8. dec 2016. at 03.36 Daniel Brain notifications@github.com wrote:

OK I'm seeing the errors now in the files you sent. I'll see if I can
figure out the cause.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/paypal/paypal-checkout/issues/130#issuecomment-265637007,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEI31_Nigu1pEPBNFa7VayORdQdeC74jks5rF21LgaJpZM4LHUZa
.

>

Sent from iPhone SE, please excuse any typos.

neshke89 on 8 Dec 2016

OK. Think I found the issue. Using paypal.Checkout.render() renders the button into the raw html, then when angular loads it clones the html, which messes up the iframe.

The solution is to use the angular paypal-button element. I've made the fix for #126, I'm going to push it out and I'll let you know when it's done.

bluepnume on 8 Dec 2016

Push is done. Please clear your cache, and use the following code:

$scope.opts = {
    // Pass the client ids to use to create your transaction on sandbox and production environments
    client: {
        sandbox:    'Ae4jgb4s1ExAngKX-6hqb19kM0bSHG9qTKc9N8gj3gmKD8uV6FM6TN4KQVcw251wmTA3tvopl5jewjkD', // from https://developer.paypal.com/developer/applications/
        production: 'AVZhosFzrnZ5Mf3tiOxAD0M6NHv8pcB2IFNHAfp_h69mmbd-LElFYkJUSII3Y0FPbm7S7lxBuqWImLbl'  // from https://developer.paypal.com/developer/applications/
    },
    // Pass the payment details for your transaction
    // See https://developer.paypal.com/docs/api/payments/#payment_create for the expected json parameters

    env: 'sandbox',
    payment: function() {
        console.log('payment');
        //console.log(this.props.env);
        //console.log(this.props.client);


        return paypal.rest.payment.create(this.props.env, this.props.client, {
            transactions: [
                {
                    amount: {
                        total:    '1.00',
                        currency: 'USD'
                    }
                }
            ]
        });

    },
    // Display a "Pay Now" button rather than a "Continue" button
    commit: true,
    // Pass a function to be called when the customer completes the payment
    onAuthorize: function(data, actions) {
        console.log('authorize');
        console.log(data);
        console.log(actions);
       // return actions.payment.execute().then(function(res) {
         //   console.log(res);
          //  console.log('The payment was completed!');
        //});
    },
    // Pass a function to be called when the customer cancels the payment
    onCancel: function(data) {
        console.log('cancel');
        console.log(data);
        console.log('The payment was cancelled!');
    },
    style : {
        shape:'rect',
        size: 'small',
        color: 'blue'
    }
};

    <paypal-button
        env="opts.env"
        client="opts.client"
        payment="opts.payment"
        commit="opts.commit"
        on-authorize="opts.onAuthorize"
        on-cancel="opts.onCancel"
        style="opts.style">
    </paypal-button>

bluepnume on 8 Dec 2016

👍2

I can confirm that it works now as supposed.
Many thanks!

neshke89 on 8 Dec 2016

Glad to hear!

bluepnume on 8 Dec 2016

Hi, where are locate this file?
Thanks

danieledr on 20 Feb 2017

how to pass amount from view angularjs

sathyadev555 on 19 Aug 2017

Any body is there please tell me

sathyadev555 on 19 Aug 2017

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

github-actions[bot] on 20 Dec 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Error Handling

Wr4i7h · 4Comments

PayPal Express Checkout Button not rendering in iOS when used in Cordova application. It is working in Android but the button is not getting build up in iOS devices.

AashutoshPrashar · 5Comments

Excessive checkout.js file size

deejbee · 5Comments

Pay Button has NO TEXT!!!

webdeb · 3Comments

Expected an order id to be passed

gastonyelmini · 3Comments