web-dev-qa-db-fra.com

Déclenchement Paypal checkout bouton clic

Comment puis-je déclencher un clic sur le bouton Paypal Checkout? Nous avons un site Web à côté des cartes de crédit que nous allons accepter également les paiements Paypal et j'ai décidé de mettre des boutons radio pour que les clients puissent choisir le mode de paiement souhaité. et aussi le bouton Paypal Checkout:  enter image description here

Bouton Paypal Checkout cliquez sur ce bouton pour ouvrir la fenêtre sécurisée Paypal et le reste fonctionne correctement. Lorsque le client clique sur le premier bouton radio, je souhaite ouvrir à nouveau la fenêtre sécurisée Paypal, c’est-à-dire déclencher, cliquer sur le bouton de paiement Paypal . domaine? Est-il possible de déclencher un clic sur le bouton de paiement?

Voici le code HTML:

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
    <script type="text/javascript" src="Paypal.js">

    </script>
    <body>
        <div>
        <span style="vertical-align: 50%"><input id="rd" name="aaa" type="radio"/></span>
        <div id="Paypal-button-container" style="display: inline-block"></div><hr/>
        <input id="rd1" name="aaa" type="radio"/>
        </div>
    </body>
</html>

Et code Javascript:

// Paypal.js
// Render the Paypal button
$(function(){
    Paypal.Button.render({

        // Set your environment

        //TODO: Dynamically provide sandbox or production
        env: 'sandbox', // sandbox | production

        // Paypal Client IDs - replace with your own
        // Create a Paypal app: https://developer.Paypal.com/developer/applications/create

        //TODO: Dynamically provide clientID
        client: {
            sandbox:    'ZZZZZZ',
            production: '//TODO: Provide this later'
        },

        // Wait for the Paypal button to be clicked

        payment: function() {

            // Make a client-side call to the REST api to create the payment

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

        // Wait for the payment to be authorized by the customer

        onAuthorize: function(data, actions) {

            return actions.payment.get().then(function(paymentData) {

                $('#Paypal-button-container').style.display = 'none'; //hide button

                //TODO: Show user payment details
                //TODO: Create input hidden fields and set payerID, paymentID, etc..for later authoriza/capture
            });
        },

        onClick: function(){
            $('#rd').trigger('click');
        },

    }, '#Paypal-button-container');
});

EDIT: Comme exemple de travail, je suggérerais ce site, mais c’est un peu différent de ce dont j'ai besoin https://developer.Paypal.com/demo/checkout/#/pattern/mark

paypalpaypal-sandbox
15
Arsen Alexanyan

Ce n'est pas quelque chose qui est pris en charge par le bouton Paypal en ce moment. La politique officielle est, seul un clic sur le bouton lui-même devrait ouvrir une fenêtre de paiement.

7
bluepnume

Je suppose que je suis un peu en retard, mais j'espère que cela aidera les personnes confrontées à ce problème, tout comme moi.

Vous pouvez définir l'opacité du bouton de Paypal sur 0 et la placer sur votre propre bouton de paiement. Ensuite, vous pouvez régler son affichage sur "none" ou "block" en fonction de la valeur du bouton radio.

3
Danil

Dans mon cas, je voulais juste utiliser un bouton entièrement personnalisé pour des raisons d'espace. En fin de compte, j’ai caché le bouton Paypal jusqu’à ce qu’il soit entouré d’un débordement: div div. Cela ressemble à un bouton carré Paypal sans rembourrage gauche/droite. 

Contexte: la documentation actuelle de la caisse express de Paypal indique qu’ils ne prennent en charge que les boutons d’une taille minimale de 80 pixels, mais que jouer avec CSS semble être le minimum réel sur le bureau qui a une largeur d’appx 120 pixels.

1
Mario Olivio Flores