#brave_monkey_33835_00636
1 messages · Page 1 of 1 (latest)
Set country option to never when creating the Element:
https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-address-country
<script>
document.addEventListener('DOMContentLoaded', async () => {
const stripe = Stripe('pk_test_xxxxxxxxx'); // Replace with your actual publishable key
const elements = stripe.elements({
clientSecret: '<?= $paymentIntent->client_secret; ?>',
country:'never'
});
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');
const paymentForm = document.querySelector('#payment-form');
paymentForm.addEventListener('submit', async (e) => {
// Avoid a full page POST request.
e.preventDefault();
// Disable the form from submitting twice.
paymentForm.querySelector('button').disabled = true;
// Confirm the card payment that was created server side:
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: '<?= base_url() ?>Distributorpayments/complete' // Replace with your actual return URL
}
});
if(error) {
addMessage(error.message);
// Re-enable the form so the customer can resubmit.
paymentForm.querySelector('button').disabled = false;
return;
}
});
});
</script>
You need to pass the correct object
Refer to the documentation link I shared.
You are passing country as a root field
You should do something like this:
const paymentElement = elements.create("payment", {
defaultValues: {
billingDetails: {
name: 'User Name',
email: 'user@example.com'
country: 'IN'
}
},
fields: {
billingDetails: {
name: 'auto',
email: 'auto',
address: {
country: 'never
}
},
}
});
<script>
document.addEventListener('DOMContentLoaded', async () => {
const stripe = Stripe('pk_test_xxxxxxxxxxxx'); // Replace with your actual publishable key
const elements = stripe.elements({
clientSecret: '<?= $paymentIntent->client_secret; ?>',
});
//const paymentElement = elements.create('payment');
const paymentElement = elements.create('payment', {
fields: {
billingDetails: {
address: 'never',
}
}
});
paymentElement.mount('#payment-element');
const paymentForm = document.querySelector('#payment-form');
paymentForm.addEventListener('submit', async (e) => {
e.preventDefault();
paymentForm.querySelector('button').disabled = true;
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: '<?= base_url() ?>Distributorpayments/complete',
payment_method_data: {
billingDetails: {
address: 'mexico',
}
},
}
});
if(error) {
addMessage(error.message);
paymentForm.querySelector('button').disabled = false;
return;
}
});
});
</script>
Uncaught (in promise) IntegrationError: You specified "never" for fields.billing_details.address when creating the payment Element, but did not pass confirmParams.payment_method_data.billing_details.address.country when calling stripe.confirmPayment(). If you opt out of collecting data via the payment Element using the fields option, the data must be passed in when calling stripe.confirmPayment().
at _e ((index):1:54834)
at e._handleMessage ((index):1:60057)
at e._handleMessage ((index):1:70776)
at (index):1:57960
Uncaught (in promise) IntegrationError: You specified "never" for fields.billing_details when creating the payment Element, but did not pass confirmParams.payment_method_data.billing_details.name when calling stripe.confirmPayment(). If you opt out of collecting data via the payment Element using the fields option, the data must be passed in when calling stripe.confirmPayment().
at _e ((index):1:54834)
at e._handleMessage ((index):1:60057)
at e._handleMessage ((index):1:70776)
at (index):1:57960
<script>
document.addEventListener('DOMContentLoaded', async () => {
const elements = stripe.elements({
clientSecret: '<?= $paymentIntent->client_secret; ?>',
});
const paymentElement = elements.create('payment', {
fields: {
billingDetails: 'never'
}
});
paymentElement.mount('#payment-element');
const paymentForm = document.querySelector('#payment-form');
paymentForm.addEventListener('submit', async (e) => {
e.preventDefault();
paymentForm.querySelector('button').disabled = true;
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: '<?= base_url() ?>Distributorpayments/complete',
payment_method_data: {
billingDetails: {
address: {
country: 'MX' // Replace with the appropriate country code
}
}
},
}
});
if(error) {
addMessage(error.message);
paymentForm.querySelector('button').disabled = false;
return;
}
});
});
</script>
I got this error when i click the pay button afetr i entered card details