#wulff-13
knotty rapids
solid delta
I want to disable the injected payment elements so that users cannot change input values or payment option while the user is processing a payment already
this.stripe = Stripe(this.stripePublicKey, {
betas: ['elements_enable_deferred_intent_beta_1'],
});
const options = {
mode: 'payment',
amount: this.total,
currency: Strings.lc(this.currency),
appearance: Style,
};
// Set up Stripe.js and Elements to use in checkout form
this.elements = this.stripe.elements(options);
// Create and mount the Payment Element
this.paymentElement = this.elements.create('payment', {
layout: 'tabs',
fields: {
billingDetails: {
name: 'never',
email: 'never',
phone: 'never',
address: {
line1: 'never',
line2: 'never',
city: 'never',
postalCode: 'never',
country: 'auto',
},
},
},
business: {
name: this.businessName ?? '',
},
});
this.paymentElement.addEventListener('change', (data) => {
let mode;
switch (data.value.type) {
case 'apple_pay':
mode = PaymentModes.APPLE_PAY;
break;
case 'google_pay':
mode = PaymentModes.GOOGLE_PAY;
break;
case 'card':
mode = PaymentModes.CREDIT_CARD;
break;
default:
mode = PaymentModes.OTHER;
break;
}
this.$emit('selectedPaymentMode', mode);
});
this.paymentElement.mount('#payment-element');
this is how I create the payment element
topaz vapor
Hello 👋
You can update the PaymentElement to be readOnly once your customer have submitted the payment
https://stripe.com/docs/js/elements_object/update_payment_element#payment_element_update-options-readOnly