JS autoclick na button s id / provedení scriptu

JS autoclick na button s id / provedení scriptu
« kdy: 11. 02. 2021, 07:32:10 »
Ahoj,

řeším problém ohledně automatického provedení scriptu. Dole je kodik, kde mám dvě hlavní čísti. Button, na který když kliknu, načítá si data ze "stripe_charge", vygeneruje si sessionId a poté přesměrovovává na platební bránu stripe.com (externí adresa). Problém je, že na ten button musím kliknout, rád bych docílil toho, aby kliknutí na ten button došlo automaticky, plánuji to celé schovat, protože částku a další údaje si člověk vyplňuje na předešlé stránce, musel by tudíž 2x klikat a to nechci. Vím, proč to neudělám už tam, v předešlém kroku, ale já s .js neumím a když jsem se o to pokoušel, nikdy mi nesedělo sessionId se stripe API...

Zkoušel jsem třeba toto:

Kód: [Vybrat]
window.onload = function(){
  document.getElementById('payButton').click();
}

ale nefungovalo mi to. Zkoušel jsem spousty jiných variant, prostě nic. :( Dokážete mi tu napsat něco, moc prosím, co bude fungovat? Děkuji moc.

Kód: [Vybrat]
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Title</title>

    <script src="https://js.stripe.com/v3/"></script>

    <link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/x-icon">
</head>

<body>

<div id="paymentResponse"></div>

<div id="buynow">
    <button class="stripe-button" id="payButton">Koupit</button>
</div>

<script>
    var buyBtn = document.getElementById('payButton');
    var responseContainer = document.getElementById('paymentResponse');

    // Create a Checkout Session with the selected product
    var createCheckoutSession = function (stripe) {
        return fetch("stripe_charge", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                checkoutSession: 1,
            }),
        }).then(function (result) {
            return result.json();
        });
    };

    // Handle any errors returned from Checkout
    var handleResult = function (result) {
        if (result.error) {
            responseContainer.innerHTML = '<p>'+result.error.message+'</p>';
        }
        buyBtn.disabled = false;
        buyBtn.textContent = 'Buy Now';
    };

    // Specify Stripe publishable key to initialize Stripe.js
    var stripe = Stripe('<?php echo STRIPE_PUBLISHABLE_KEY?>');

    buyBtn.addEventListener("click", function (evt) {
        buyBtn.disabled = true;
        buyBtn.textContent = 'Please wait...';

        createCheckoutSession().then(function (data) {
            if(data.sessionId){
                stripe.redirectToCheckout({
                    sessionId: data.sessionId,
                }).then(handleResult);
            }else{
                handleResult(data);
            }
        });
    });
</script>
</body>
</html>


AoK

  • ****
  • 251
    • Zobrazit profil
Re:JS autoclick na button s id / provedení scriptu
« Odpověď #1 kdy: 11. 02. 2021, 08:30:19 »
onload event se spustí mnohem dříve než se Stripe button načte, takže musíš ten event navázat na něco jiného nebo to zkoušet tak dlouho než se ten button tam neobjeví.

Re:JS autoclick na button s id / provedení scriptu
« Odpověď #2 kdy: 11. 02. 2021, 09:13:57 »
onload event se spustí mnohem dříve než se Stripe button načte, takže musíš ten event navázat na něco jiného nebo to zkoušet tak dlouho než se ten button tam neobjeví.

Nejde tolik o ten event jako o ten button. Když na něj kliknu, přesměrovává mě. To vše je v pořádku. Ale jak to udělat za uživatele? Jak zajistit, aby se automaticky kliklo na ten button a přesměrovávalo na tu bránu? Děkuji :)

Re:JS autoclick na button s id / provedení scriptu
« Odpověď #3 kdy: 11. 02. 2021, 09:59:53 »
Ale jak to udělat za uživatele? Jak zajistit, aby se automaticky kliklo na ten button a přesměrovávalo na tu bránu?

To dělá ten řádek, který jste napsal (pokud to tlačítko má id payButton):

Kód: [Vybrat]
document.getElementById('payButton').click();

Re:JS autoclick na button s id / provedení scriptu
« Odpověď #4 kdy: 11. 02. 2021, 10:43:20 »
Ale jak to udělat za uživatele? Jak zajistit, aby se automaticky kliklo na ten button a přesměrovávalo na tu bránu?

To dělá ten řádek, který jste napsal (pokud to tlačítko má id payButton):

Kód: [Vybrat]
document.getElementById('payButton').click();

Máte pravdu. Dělá. A to se mi pravděpodobně snažil říct AoK výše. Stačilo přidat krátký delay, počkat než se vše načte a nyní přesměrovává automaticky. Jen pro ostatní do budoucna, vyřešil jsem to následovně.

Kód: [Vybrat]
<script>
    // document.getElementById('payButton').click(); // PŮVODNÍ ŘEŠENÍ
    setTimeout(function(){document.getElementById("payButton").click()}, 4000); // SOUČASNÉ ŘEŠENÍ
</script>

Nyní zbývá jediné. Button vyobrazovat jako prostý text, ovšem se stejnou funkcionalitou pro případ, že by nedošlo k přesměrování a nahradit to textem "Probíhá přesměrování na platební bránu. Pakliže se tak nestane, klikněte zde!"

Všem děkuji za pomoc.


Re:JS autoclick na button s id / provedení scriptu
« Odpověď #5 kdy: 11. 02. 2021, 11:44:15 »
Stačilo přidat krátký delay, počkat než se vše načte a nyní přesměrovává automaticky.
Přidávat někam prodlevu na čekání je klasický případ kódu, který někdy fungovat bude a někdy ne. Není to dobré řešení a používá se jedině jako hotfix. Ten kód totiž nečeká, než se vše načte. Ten kód prostě jen čeká a pak se spustí. Typicky bude čekat zbytečně dlouho – 4 sekundy už uživatel zaznamená a nejspíš začne i se stránkou nějak pracovat, takže mu pak budete tlačítko mačkat „pod rukama“. A někdy se to naopak ani během těch 4 sekund načíst nestihne.

Podstatně lepší by bylo zareagovat na okamžik, kdy je tlačítko připravené k použití. Pokud je připravené hned pro načtení DOMu, dá se použít událost DOMContentLoaded na dokumentu. Pokud se tlačítko oživuje synchronním JavaScriptem, dá se požadované funkce docílit správným seřazením JavaScriptů. V ostatních případech to nejspíš také bude nějak řešitelné, záleží na konkrétním kódu.

Re:JS autoclick na button s id / provedení scriptu
« Odpověď #6 kdy: 12. 02. 2021, 13:17:51 »
a co takto napr. kazdych 100ms kontrolovat, ci uz je button pripraveny, ak ano, tak kliknut.

Re:JS autoclick na button s id / provedení scriptu
« Odpověď #7 kdy: 12. 02. 2021, 16:26:50 »
a co takto napr. kazdych 100ms kontrolovat, ci uz je button pripraveny, ak ano, tak kliknut.

Dopr dele,clovek by povedal,ze na fundovanom webe na taketo nieco nenarazi.

Druha vec je,ze ludia su lenivi si nastudovat aj zaklady HTML + JS.

Ale aby som len nekecal...

1. Idealne si pribalit napr. Jquery a zavesit sa na document ready metodu,ktora sa spusti,ked je DOM pripraveny.

2. Da sa to spravit aj dynamicky $('<a>').href(xyz).click(); 

Nechce sa mi pisat z telefonu
« Poslední změna: 12. 02. 2021, 16:28:24 od Vočko Szyslak »