nunu0951_code

[elder sorrel]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1466000897724252261

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[vernal raptor]

Hey there, taking a look

I think this is because you're using Address Element with mode: 'shipping' so it's collecting the shipping address, which could differ from the billing address that the Payment Element collects

When you render the Elements there should be a checkbox when the address details are the same and when checked that remove the duplicate fields

[prisma nymph]

this is our checkout page, shows 2 country fields, we actually need to collect address so cannot disable address elements

[vernal raptor]

I'm not suggesting you disable it, but as stated there should be a checkbox that the customer can check when both shipping and billing address are the same which deduplicates some fields. Not sure why you don't have that

Can you share the full code that initialises the Elements group and the Address Element and Payment Element?

[prisma nymph]

initializeStripePaymentElementVariables: function(){
var form = $("#checkout-form");
var errorPaymentElement = $('.payment-element-errors ul');
errorPaymentElement.html("");
var crs_currency_code = form.find('input[name="crs_currency_code"]').val();
var order_total = form.find('input[name="order_total"]').val();
const paymentElementOptions = {
layout: "tabs",
};
const addressElementOptions = { mode: 'shipping' };
stripe.stripe = Stripe(publishable_key, {stripeAccount: account_id});

    if(order_total > 0){
        const options = {
            mode: 'payment',
            currency: crs_currency_code,
            amount: Math.trunc(order_total * 100),
            paymentMethodCreation: 'manual',
            paymentMethodTypes: ['link', 'card', 'bancontact', 'ideal', 'sepa_debit'],//, 'afterpay_clearpay', 'klarna'
            shipping_address_collection : {
                                            // Specify which shipping countries Checkout should provide as options for shipping locations
                                            allowed_countries : ['AU', 'GB', 'NZ', 'US', 'CA'],
                                          }
        };
        elements = stripe.stripe.elements( options );
        addr_elements = stripe.stripe.elements( options );
        const paymentElement = elements.create("payment", paymentElementOptions);
        addressElement = addr_elements.create('address', addressElementOptions);
        paymentElement.mount("#payment-element");
        addressElement.mount('#address-element');
        stripe.validateStripeElementForm(addressElement, paymentElement);

    }

else {
$.ajax({
url: '/product/create-setup-intent-for-payment-element',
method: "GET",
type: "json",
data: form.serialize(),

                success:function(response){ 
                    if(response.success){
                        var si_clientsecret = response.si_client_secret;
                        const options = {
                            clientSecret: si_clientsecret,
                            paymentMethodCreation: 'manual',
                            shipping_address_collection : {
                                                            // Specify which shipping countries Checkout should provide as options for shipping locations
                                                            allowed_countries : ['AU', 'GB', 'NZ', 'US', 'CA'],
                                                          }
                        };
                        elements = stripe.stripe.elements( options );
                        addr_elements = stripe.stripe.elements( options );
                        const paymentElement = elements.create("payment", paymentElementOptions);
                        addressElement = addr_elements.create('address', addressElementOptions);
                        paymentElement.mount("#payment-element");
                        addressElement.mount('#address-element');
                    } else {
                        errorPaymentElement.append('<li class="card-no cvc expiry text-danger"><span>' + response.msg + '</span></li>'); 
                    }
                },
                error: function(response){
                    errorPaymentElement.append('<li class="card-no cvc expiry text-danger"><span>Something wrong! Please try again.111</span></li>');
                }
            });
    }
},

[vernal raptor]

Let me see if I can repro, but looks fairly normal

Ah, you're creating two different Elements groups:

elements = stripe.stripe.elements( options );
addr_elements = stripe.stripe.elements( options );

Any reason for that?

All that code should jsut become this:

elements = stripe.stripe.elements( options );
const paymentElement = elements.create("payment", paymentElementOptions);
addressElement = elements.create('address', addressElementOptions);

There's no need for one separate Elements group for each Element, in fact you'll create issues that way

[prisma nymph]

thank you
now it shows the checkbox

in bancontact

fullname repeating , any option to handle that

[vernal raptor]

Unfortunately not for some LPMs

[prisma nymph]

also one more doubt , ours is an online course selling platform, so i think we dont need to ask shipping address

[vernal raptor]

Then why are you initialising the Address Element with mode: 'shipping'?

[prisma nymph]

actually i am modifying some others code, and i am also confused

[vernal raptor]

I mean if you don't need a shipping address at all then the Address Element is likely redundant entirely, unless you want a the full billing address. Otherwise the Payment Element will collect the minimum required address fields for payment

[prisma nymph]

instructors actually need to collect full address too in checkout page
if i disable address element , card payment method only ask for country
ideal only full name

so i cannot disable address elements, if enabled , duplicate

[vernal raptor]

Then you need to use the Address Element in mode: 'billing'

I'm not really sure what you're asking us to be honest. I guess you need to figure out what your actual requirements are and configure the Elements accordingly, and then we can help if there's any issues from there

If you just want a single full address per customer, then use mode: 'billing' with the Address Element

[prisma nymph]

ok we used mode: 'billing' , now its correct for card payment method
but in case of ban contact
fullname repeating