#geimsdin-PaymentElement
wraith rivet
Hi there, happy to help
Did you pass a valid clientSecret to this PaymentElement?
short ledge
Yes, the payment element sometimes is displayed sometimes not. I figured out that it is a problem with some delay and then wanted to trigger some actions after the element is mounted
I get the client secret by PHP by creating a SetupIntent as you suggested me few days ago. I then pass it to js and use it there
wraith rivet
Can you check the value of clientSecret when the paymentElement is not displayed?
short ledge
Yes
<script id="wc_ninja_payment_vars-js-extra">
var wcNinjaPaymentData = {"wcNpPubKey":"pk_test_vcJH8QN2yWjEaHzZxNeR5ygh","wcNpClientSecret":"seti_1LTHspLmxBucQd15NudwkIUO_secret_MBfDNuyhAyhjPcqarEfNb6nSb9jUDef","wcNpPaymentIntentData":{"id":"seti_1LTHspLmxBucQd15NudwkIUO","object":"setup_intent","application":null,"cancellation_reason":null,"client_secret":"seti_1LTHspLmxBucQd15NudwkIUO_secret_MBfDNuyhAyhjPcqarEfNb6nSb9jUDef","created":1659672695,"customer":"cus_MBfDwkb2MfWweD","description":null,"flow_directions":null,"last_setup_error":null,"latest_attempt":null,"livemode":false,"mandate":null,"metadata":[],"next_action":null,"on_behalf_of":null,"payment_method":null,"payment_method_options":{"card":{"mandate_options":null,"network":null,"request_three_d_secure":"automatic"}},"payment_method_types":["card","sepa_debit"],"single_use_mandate":null,"status":"requires_payment_method","usage":"off_session"},"wcNpReturnUrl":"https://wptest.test"};
</script>
This is the object I pass from php and it is always full of data
there is the pubKey, the clientSecret and the PaymentIntent object
It is like tha ajax requests made by stripe like this: https://r.stripe.com/0
Are "shaking" my DOM tree and I cannot get elements by ID anymore
wraith rivet
What do you mean by Are "shaking" my DOM tree and I cannot get elements by ID anymore ?
short ledge
Sorry Jack, I think it is a wordpress problem that loads 2 times the checkout page, I will fix it.
by "shaking" my DOM tree I mean that is moving objects and detach them from the document but I was wrong
You can close this, thanks
wraith rivet
I see. I'm glad that your problem is resolved 🙂
short ledge
Wait
Sorry but even if I fixed the display the event is still not triggered
const payment = elements.create("payment");
payment.mount("#wcnp-payment-element");
payment.on('change', function(event) {
if (event.complete) {
// enable payment button
alert('ready');
}
});
the event is never completed
wraith rivet
it should be payment.on('ready',
short ledge
ok, I try
the trigger works but the event is never completed, is that ok?
payment.on('ready', function(event) {
alert('change');
if (event.complete) {
// enable payment button
alert('ready');
}
});
First alert displayed, second alert not
wraith rivet
I don't think the event has a complete property.