Any reason why Stripe Payment form has the class "hide"?

abelchuazw

Hi there,

Any reason why Stripe payment form was given the class "hide"?

<div
    id="stripePaymentForm"
    **_class="payment-form hide w-100"_**
    data-publishable-key="<?= $paymentMethod->getPublishableKey() ?>"
    data-card-selector="#stripe-card-element"
    data-error-selector="#stripe-card-errors"
    data-trigger="[type=radio][name=payment]"
    data-trigger-action="show"
    data-trigger-condition="value[stripe]"
    data-trigger-closest-parent="form"
>
    <?php foreach ($paymentMethod->getHiddenFields() as $name => $value) { ?>
        <input type="hidden" name="<?= $name; ?>" value="<?= $value; ?>"/>
    <?php } ?>

    <div class="form-group mt-2">
        <label for="stripe-card-element">
            Credit or debit card
        </label>
        <div id="stripe-card-element">
            <!-- A Stripe Element will be inserted here. -->
        </div>

        <!-- Used to display form errors. -->
        <div id="stripe-card-errors" class="text-danger" role="alert"></div>
    </div>
</div>

Can't seem to find the function that unhides it.

sampoyigi

abelchuazw data-trigger="[type=radio][name=payment]" unhides it when the radio changes. Removing all data-trigger attributes will disable toggling of the hide class

It stops the div container from displaying before the stripe checkout widget is loaded.

abelchuazw

ahh i see. Hmm. makes sense, though interestingly, the data-trigger has been left there, but the hide classes doesn't seem to be toggled. Even after the Stripe payment has been loaded. Any clue on how i can trace the data-trigger attribute to figure out what's going wrong?

sampoyigi

abelchuazw Any clue on how I can trace the data-trigger attribute to figure out what's going wrong?

Maybe debugging app/system/assets/ui/js/trigger.js from your DevTool?

abelchuazw

Hmmm. Apparently, it's not loading. May i know where the js file is been loaded from? Unless it's been included in the other js files?

Taking a look at the demo as well, trigger.js is not loading.
https://demo.tastyigniter.com/checkout

sampoyigi

abelchuazw Right 🙂, trigger.js is bundled into flame.js. So I'll look for var TriggerOn = in DevTools to start with 😉

abelchuazw

Looks like, it's in the webpack mix of flame.js

             '~/app/system/assets/ui/js/flashmessage.js',
  328                  '~/app/system/assets/ui/js/toggler.js',
  329:                 '~/app/system/assets/ui/js/trigger.js',
  330              ], '~/app/system/assets/ui/flame.js', 'admin');
  331

However, not being called on the frontend, any clue where is the best practice in which i should be calling trigger.js? And do you think i should call toggler as well?

abelchuazw

Ahh cool. Looks like i'm not loading trigger.js on the frontend. That's why. Any reason why it's not bundled into app.js?

sampoyigi

abelchuazw Should be bundled if you haven't made changes to themes/your_theme/_meta/assets.json

abelchuazw

Ok i have one more question. Shall i start a new thread?
Thanks for helping me out. Appreciate it, and it's a very nice system.

katesmith1304619

Not sure if this is the right place to ask, but I’m a college student who has one of those Bank of America student debit cards under your parents so you don’t need to pay monthly fees. Anyways, I just purchased about 300 dollars worth of figures and even though it’s all my money I earned by working summer jobs, my dad still gets really pissed when I spend my cash on games, figures, and other “useless” stuff. Just wondering if there’s any way to hide the transactions.