Cant complete Stripe Card details

psweb · August 6, 2024, 12:33pm

M1 Mac, Sonoma 14.6, Wappler 6.8.0

Today I needed to open an old project, still on App Connect 1, I opened it, left it as App Connect 1 depreciated, made a minor text alteration and deployed.

Suddenly the payment side no longer works

<fieldset>
    <legend class="the-tabor-group-gold-text-colour mt-5 virtual-p">CARD DETAILS</legend>
    <div class="form-group mb-3">
        <div class="form-floating">
            <dmx-stripe-card-number class="form-control" id="inp_wvwb_card_number" name="wvwb_card_number" aria-describedby="inp_wvwb_card_number"></dmx-stripe-card-number>
            <label for="inp_wvwb_card_number">CARD NUMBER <span class="text-danger">*</span></label>
        </div>
    </div>
    <div class="form-group mb-3">
        <div class="form-floating">
            <dmx-stripe-card-expiry class="form-control" id="inp_wvwb_card_expiry_date" name="wvwb_card_expiry_date" aria-describedby="inp_wvwb_card_expiry_date" required=""></dmx-stripe-card-expiry>
            <label for="inp_wvwb_card_expiry_date">EXPIRY DATE (MM/YY) <span class="text-danger">*</span></label>
        </div>
    </div>
    <div class="form-group mb-3">
        <div class="form-floating">
            <dmx-stripe-card-cvc class="form-control" id="inp_wvwb_card_cvv" name="wvwb_card_cvv" aria-describedby="inp_wvwb_card_cvv" required=""></dmx-stripe-card-cvc>
            <label for="inp_wvwb_card_cvv">CVV <span class="text-danger">*</span></label>
        </div>
    </div>
</fieldset>

When trying to click on any of the 3 fields to input a card number of expiry date or cvv the field has no way to input data. I have also tried tabbing through and it never selects these input fields.

Console shows the following error

TypeError: this.render is not a function
    at n.constructor (dmxAppConnect.js:7:30439)
    at n (dmxAppConnect.js:7:15524)
    at e.hasOwnProperty.e.constructor (dmxAppConnect.js:7:16119)
    at new n (dmxAppConnect.js:7:15524)
    at n.$addChild (dmxAppConnect.js:7:32628)
    at n.<anonymous> (dmxAppConnect.js:7:33850)
    at Object.walk (dmxAppConnect.js:7:19396)
    at dmxAppConnect.js:7:19504
    at Array.forEach (<anonymous>)
    at Object.walk (dmxAppConnect.js:7:19475)

This system has been live and working for well over a year already, so I do not think there is anything wrong with it besides the app connect updates i did when opening the project.

A plea for any assistance.

sid · August 6, 2024, 3:16pm

A plea to start using Git to not end up in situations like this.

Could it be that you accidentally updated some files to AC2 version?

psweb · August 7, 2024, 7:51am

Thankfully on this project i do have it all in Git, i will start reverting things and see if it all works again.
All your Git warning to me paying off @sid

psweb · August 8, 2024, 8:49am

Problem was dmxStripe.js replaced the latest version with the older v1.0.4 from git and its working again.

sid · August 8, 2024, 12:48pm

Hopefully this is the last time I hear you complain about how scared you are of Git.

psweb · April 29, 2025, 1:46pm

I just ran into this issue again with a different project, also been working perfectly for more than a year.

NodeJS, Mac M1 Max, OS X Sequoia 15.3.1

I open the project and it asks me which app connect i am using, i choose v1 and change channel, it then says 3 modules are updated, dmxRouting.js.map, dmxStripe.js, dmxStripe.js.map, I press ok and it updates the 3 modules.

When I go and test out my form, which looks like this

The last 3 fields for CARD DETAILS become completely unclickable, as though they are disabled or something. The HTML for this area is below.

<fieldset>
    <legend class="the-tabor-group-gold-text-colour mt-5 virtual-p">CARD DETAILS</legend>
    <div class="form-group mb-3">
        <div class="form-floating">
            <dmx-stripe-card-number class="form-control" id="inp_wvwb_card_number" name="wvwb_card_number" aria-describedby="inp_wvwb_card_number" required=""></dmx-stripe-card-number>
            <label for="inp_wvwb_card_number">CARD NUMBER <span class="text-danger">*</span></label>
        </div>
    </div>
    <div class="form-group mb-3">
        <div class="form-floating">
            <dmx-stripe-card-expiry class="form-control" id="inp_wvwb_card_expiry_date" name="wvwb_card_expiry_date" aria-describedby="inp_wvwb_card_expiry_date" required=""></dmx-stripe-card-expiry>
            <label for="inp_wvwb_card_expiry_date">EXPIRY DATE (MM/YY) <span class="text-danger">*</span></label>
        </div>
    </div>
    <div class="form-group mb-3">
        <div class="form-floating">
            <dmx-stripe-card-cvc class="form-control" id="inp_wvwb_card_cvv" name="wvwb_card_cvv" aria-describedby="inp_wvwb_card_cvv" required=""></dmx-stripe-card-cvc>
            <label for="inp_wvwb_card_cvv">CVV <span class="text-danger">*</span></label>
        </div>
    </div>
</fieldset>

The console shows this error

dmxAppConnect.js:7 TypeError: this.render is not a function
    at n.constructor (dmxAppConnect.js:7:30439)
    at n (dmxAppConnect.js:7:15524)
    at n.<anonymous> (dmxAppConnect.js:7:16119)
    at new n (dmxAppConnect.js:7:15524)
    at n.$addChild (dmxAppConnect.js:7:32628)
    at n.<anonymous> (dmxAppConnect.js:7:33850)
    at Object.walk (dmxAppConnect.js:7:19396)
    at dmxAppConnect.js:7:19504
    at Array.forEach (<anonymous>)
    at Object.walk (dmxAppConnect.js:7:19475)

Using Git, if i replace the newer v2.0.2 of dmxStripe.js, dmxStripe.js.map with v1.0.4, the console error goes away, and the 3 fields work perfectly again, and a test of a live payment all work as they should.

@Teodor is there something I need to alter in the head section possibly that I am missing for the newer stripe v2.0.2 to work, currently I have

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