becki_defer-subscription

[deft schooner]

👋 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/1301302760859238512

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

[tiny helm]

becki_defer-subscription

@bold mango can you share the JS code you use to initialize Elements? My guess is you passed mode: 'payment' instead of mode: 'subscription

[bold mango]

oh you're right i did

let me run that real quick

that worked! one more question ...

i was passing a fields object to hide billing fields, and that no longer works

const options = {
mode: 'subscription',
amount: amount,
currency: currency,
setupFutureUsage: 'off_session',
fields: {
billingDetails: 'never',
},
};

[tiny helm]

yeah you mixed things up

the options you shared are for Elements initialization with stripe.elements()
the fields option is for PaymentElement initialization when you call elements.create('payment');

so you need to split the two

[bold mango]

your'e saying i should add fields to the payment options instead?

[tiny helm]

I'm saying you should have 2 separate variables. One for options you pass the the first call and one for different options you pass to the second call

[bold mango]

i do

i tried passing fields to the payment options and that didn't work

const paymentOptions = {
elements,
clientSecret,
confirmParams: {
return_url: returnUrl,
payment_method_data: {
billing_details: {
name: $( ".stripe-name input" ).val(),
email: $( ".stripe-email input" ).val(),
phone: $( ".stripe-phone input" ).val(),
address: {
country: $( ".stripe-country select" ).val() || 'US',
postal_code: $( ".stripe-postal_code input" ).val(),
state: $( ".stripe-state select" ).val(),
city: $( ".stripe-city input" ).val(),
line1: $( ".stripe-line1 input" ).val(),
line2: $( ".stripe-line2 input" ).val() || '',
},
},
},
},
redirect: "if_required",
fields: {
billingDetails: 'never',
},

[tiny helm]

yeah you seem to still mix most things up. Likely because something worked and you just modified the code quickly without carefully readin the guide
Like fields shouldn't be in the same place where you pass confirmParams. that one seems to go in the confirmPayment() call

  mode: 'subscription',
  amount: 1999,
  currency: 'usd',
};
console.log(options);
const stripe = Stripe('pk_test_123');
var elements = stripe.elements(options);
const paymentElement = elements.create(
  'payment',
  {
    fields: { 
      billingDetails: { 
        address: {
          postalCode: 'never',
        },
      }, 
    },
  }
);
paymentElement.mount('#payment-element');```

this works fine for me. See how I have 2 separate logic. One options that goes in the first call I mention and then a separate hash in the second call

[bold mango]

ok i see. i'll try that. thank you!

[tiny helm]

sure thing. If you are stuck share the code where you call stripe.elements and elements.create and I'll show you the issue

[bold mango]

that worked