Akshay-paymentelement

[mighty sapphire]

hey, you can disable it with
{fields:{billingDetails:{address:{country:"never"}}}}
https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-address-country
But you need to supply the country from your own code when confirming the PaymentIntent if you do that.

[chilly fossil]

I'm archiving this thread, but if there are additional questions or anything else that we can assist with, then please let us know in #dev-help. 👋

[analog thicket]

@subtle cipher I have re-opened your thread

Does karllekko's answer help you? It should be possible to remove that dropdown with that code

[subtle cipher]

I read this thread, but i am not able to find the elements.create fucntion in the code which i implemented

[analog thicket]

Can you share the code that you currently have where you are mounting the payment element?

[subtle cipher]

I read this thread, but i am not able to find the elements.create fucntion in the code which i implemented

[analog thicket]

Okay, but you do have some code for the payment element now, correct?

[subtle cipher]

Okay let me share the code

import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call loadStripe outside of a component’s render to avoid
// recreating the Stripe object on every render.
const stripePromise = loadStripe('pk_test_51BTUDGJAJfZb9HEBwDg86TN1KNprHjkfipXmEDMb0gSCassK5T3ZfxsAbcgKVmAIXF7oZ6ItlZZbXO6idTHE67IM007EwQ4uN3');

function App() {
const options = {
// passing the client secret obtained in step 2
clientSecret: '{{CLIENT_SECRET}}',
// Fully customizable with appearance API.
appearance: {/.../},
};

return (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
);
};

ReactDOM.render(<App />, document.getElementById('root'));

Checkout component. import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
return (
<form>
<PaymentElement />
<button>Submit</button>
</form>
);
};

export default CheckoutForm;

[analog thicket]

Apologies for dropping off this thread for a bit. Thank you for the code, I am looking in to this now

It looks like you should be able to do it by adding something like

const payment_element_options = {fields:{billingDetails:{address:{country:"never"}}}} 
const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement options={options} />
      <button>Submit</button>
    </form>
  );
};```

[subtle cipher]

And where are we passing that variable payment_element_options ?

[lean sedge]

Hi 👋 I'm stepping in for @analog thicket . The options passed in to the <PaymentElement> should be the payment_element_options. You pass whatever configuration options you define when you return the <PaymentElement>

[subtle cipher]

Im using typescript and it is showing error (red mark) when i use optionsprops

[lean sedge]

Okay but does it allow you to test it out and see if it works. We can resolve type issues later

[subtle cipher]

Yes, i changed to javascript and it was working fine with javascript

But when using ts it gives error

[lean sedge]

Take a look at our public docs on the Types Stripe.js makes available here:
https://github.com/stripe/stripe-js/blob/master/types/stripe-js/elements/payment.d.ts

[subtle cipher]

Hey its fixed now

Thanks for the help !