Paypal-checkout-components: Paypal express checkout customize button

[dmitry-kostin]

Hello,
A few questions, could you please give me a fast consult?

1. Is there any way to implement custom paypal buttons, for example some of that exist on following page: https://developer.paypal.com/docs/classic/api/buttons

You wrote:

For new integrations, PayPal strongly recommends using Express Checkout JavaScript buttons.

That should mean we still have a chance to customize button in new express checkout?
but unfortunately didn't find any way except tiny,small and etc props

1. Is any option/property to remove "The safer, easier way to pay" text under the button?

[bluepnume]

1. We're going to remove that page. The range of customization that's available with the button is all up here: https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/

   If there's something you want to do that isn't covered by that page, we'd be happy to consider adding it to the iframe button, but our goal is to dramatically reduce the number of PayPal buttons that are used across the web.

   https://medium.com/@bluepnume/less-is-more-reducing-thousands-of-paypal-buttons-into-a-single-iframe-using-xcomponent-d902d71d8875

2. We're running an experiment to remove this text. The theory is that it doesn't help drive clicks. If that theory holds true, the plan is to remove that text across the board.

[dmitry-kostin]

Thanks for your answer. I appreciate it.

If you don't tired of me may I ask one more question, Can you implement some kind of callback when button is displayed and ready to go, when onDisplay invoked - the loader spinner is showing, but no any other callback when button is showed?

[bluepnume]

paypal.Button.render() returns a promise, so you can do

paypal.Button.render().then(function() {
    ...
})

[dmitry-kostin]

thanks

[KES777]

I did not find answers on the web. So I ask on this issue as it is better related.

I want to add multiple buttons on the page and customize them like next:

<div id="paypal-button" data-amount=30 data-currency="USD"></div>
<div id="paypal-button" data-amount=10 data-currency="USD"></div>

But the issue is in javascript which renders the button: for every button I should call .redner individually. I this this is overhead:

paypal.Button.render({
    env: '<%= $env %>',
    client: {
        <%= $env %>:'<%= $client_id %>'
    },

    payment: function( resolve, reject ) {
        // XXX
        paypal.request.post( '<%== url_for( "create_paypal_payment" )->query( amount => 30, currency => "USD" ) %>' )
                        .then(function(data) { resolve(data.paymentID); })
                        .catch(function(err) { reject(err); });
    },

    commit: true, // Optional: show a 'Pay Now' button in the checkout flow

    onAuthorize: function(data, actions) {
        paypal.request.post( '<%= url_for( "execute_paypal_payment" ) %>',
                { paymentID: data.paymentID, payerID: data.payerID })
            .then(function(data) { /* Go to a success page */ actions.redirect(); })
            .catch(function(err) { /* Go to an error page  */ actions.redirect(); });
    },

    onCancel: function(data, actions) {
        console.log('The payment was cancelled!');
        actions.redirect();
    },
}, '#paypal-button');

I look for the ability at place of XXX to get reference to clicked button and access its data-amount, data-currency and form the desired URL:

 my url =  '/path/to/create_payment?amount=' + button.dataset.amount + '?currency=' + button.dataset.currency

Where button is clicked button.

[bluepnume]

Hey @KES777 -- usually best to ask questions like this in a new issue so it doesn't get lost.

You can do something like this:

<div id="paypal-button1"></div>
<div id="paypal-button2"></div>

<script>
    [
        {
            container: '#paypal-button1',
            amount: '30.00',
            currency: 'USD'
        },

        {
            container: '#paypal-button2',
            amount: '10.00',
            currency: 'USD'
        }

    ].forEach(function(opts) {

        paypal.Button.render({

            env: 'sandbox',

            client: {
                sandbox:    'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R'
            },

            payment(data, actions) {
                return actions.payment.create({
                    payment: {
                        transactions: [
                            {
                                amount: { total: opts.amount, currency: opts.currency }
                            }
                        ]
                    }
                });
            },

            onAuthorize() {

            }

        }, opts.container);
    });
</script>

[KES777]

thank you. As workaround it is ok and I will use it. But this solution still is not so clear as stripe.com checkout interface.

[BetaProg]

@bluepnume While your solution holds good for 2 div s , it fails in the case where it is free input text field where the user can dynamically change the amount value. In that case without calling render every time, how the amount gets updated and passed to payment? Please clarify if I'm wrong somewhere.

[github-actions[bot]]

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.