#kennethpogi323

1 messages · Page 1 of 1 (latest)

finite peakBOT
lone phoenix
#

hi

#

I try to disable the country in my payment element form and this code didn't work

#

i use react js

raven barn
#

I don't think that can be disabled

#

hmm wait

lone phoenix
#

it has a documentation

raven barn
#

what you're passing, the fields.billingDetails.address.country: 'never' should work to hide the Country field

#

so when you tried that, is it not hiding country field?

lone phoenix
#

yea

#

i follow this guide

raven barn
#

so you do see country field in Payment Element? with that code running?
the guide you shared is just a screenshot, I cannot tell anything from it

lone phoenix
#

im using a react

#

here

#

here's the guide

raven barn
lone phoenix
#

okay

#

const handleSubmit = async (event) =>
{
let resultDB = custSvc.submitCustomerInfo(checkoutDetails);

    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    
    if (!stripe || !elements) 
    {
        elements.create('payment', {
            fields: {
                billingDetails: {
                  name: "auto",
                  address: {
                    country: 'never'
                  }
                  
                }
              }
          });
        return;
    }
    const result = await stripe.confirmPayment({
        //`Elements` instance that was used to create the Payment Element
        elements,
        confirmParams: 
        {
            return_url: "",
            payment_method_data: {
                billing_details: {
                   name: 'KENNETH',
                   address: {
                    country: 'US',
                   }
                }
            }
        },
         redirect: "if_required"
       })
       
    if (result.error) {
        // Show error to your customer (for example, payment details incomplete)
        console.log(result.error.message);
    } else {
        // Your customer will be redirected to your `return_url`. For some payment
        // methods like iDEAL, your customer will be redirected to an intermediate
        // site first to authorize the payment, then redirected to the `return_url`.
    
    }
#

here

#

thanks

finite peakBOT
lone phoenix
#

hi

somber igloo
#

Hi there 👋 taking over, as my colleague needs to step away

Give me a few minutes to get caught up.

lone phoenix
#

okay thanks

somber igloo
lone phoenix
#

im using v3

#

its V1 sorry how to upgrade Api version?

somber igloo
#

That's the version of the library I think. I'm looking specifically for your API version, which would be in a date format like this --> 2022-08-01

lone phoenix
somber igloo
#

Okay, thanks. I assume you're using the deferred intents workflow? (e.g. you create a Payment Intent after your customer submits their payment details)

#

If not those, can you post the docs you're following?

lone phoenix
#

here's the docs i followed

somber igloo
#

Can you try adding this to your options block there in the code you posted in that screenshot?

fields: { billingDetails: { address: { country: 'never' } } }

lone phoenix
#

where?

somber igloo
#

In the options block from your screenshot

lone phoenix
#

here

#

didn't work

somber igloo
#

So the country text box still appears?

lone phoenix
#

yea

#

i dont know what the problem is i stuck in this error haha\

somber igloo
#

Where's the code that references the Payment() function you exported in that screenshot? Can you copy/paste instead of screenshotting it?

lone phoenix
#

function Payment() {
const stripePromise = loadStripe('pk_test_51NNhEaAedoGpHj7S4MeCu0taZOVsnWzPz4ImshqOFloJWNTcrpptLBLD6SjM4s9M11OhqBN4HzWVxJC3Pr1kHHUc00Kf9xxkTr');
const options = {
fields: {
billingDetails: {
name: 'auto',
address: {
country: 'never'
}

        }
      },
    // passing the client secret obtained from the server
    clientSecret: 'pi_3Na0s3AedoGpHj7S0A6kOlSi_secret_GktCTDmPALEqeDaVXZy7bk4h9',
};

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

}

export default Payment

somber igloo
#

That's the code from your screenshot. Where's the rest of it?

lone phoenix
#

here's my checkout.js

#

import React from 'react'
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import Checkout from './checkout';

function Payment() {
const stripePromise = loadStripe('pk_test_51NNhEaAedoGpHj7S4MeCu0taZOVsnWzPz4ImshqOFloJWNTcrpptLBLD6SjM4s9M11OhqBN4HzWVxJC3Pr1kHHUc00Kf9xxkTr');
const options = {
fields: {
billingDetails: {
name: 'auto',
address: {
country: 'never'
}

        }
      },
    // passing the client secret obtained from the server
    clientSecret: 'pi_3Na0s3AedoGpHj7S0A6kOlSi_secret_GktCTDmPALEqeDaVXZy7bk4h9',
};

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

}

export default Payment

#

and that one is payment.js

#

thats all code i use

finite peakBOT
somber igloo
#

Your code seems to deviate a bit from the docs in weird places. Like, why is the line function Payment() not using export default function App() ? And why are some of the names changed? Like, you have:

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

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

You mentioned you were following these docs (https://stripe.com/docs/stripe-js/react), so I'm just trying to understand why these differences are popping up and if the cause of the issue is somewhere in the tangling of code.

lone phoenix
#

payment.js refrence

image.png
#

i change the name of the form not the content

#

and i harcode client secret

#

i know its dynamic but i use different one every payment simulation

#

import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
const stripe = useStripe();
const elements = useElements();

const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();

if (!stripe || !elements) {
  // Stripe.js hasn't yet loaded.
  // Make sure to disable form submission until Stripe.js has loaded.
  return;
}

const result = await stripe.confirmPayment({
  //`Elements` instance that was used to create the Payment Element
  elements,
  confirmParams: {
    return_url: "https://example.com/order/123/complete",
  },
});

if (result.error) {
  // Show error to your customer (for example, payment details incomplete)
  console.log(result.error.message);
} else {
  // Your customer will be redirected to your `return_url`. For some payment
  // methods like iDEAL, your customer will be redirected to an intermediate
  // site first to authorize the payment, then redirected to the `return_url`.
}

};

return (
<form onSubmit={handleSubmit}>
<PaymentElement />
<button disabled={!stripe}>Submit</button>
</form>
)
};

export default CheckoutForm;

#

checkout.js

somber igloo
#

I would recommend sticking with the exact formatting/content of the examples to get the app up and running before you deviate. That will: (a) allow you to be able to selectively change one thing at at time without breaking things, and (b) make it much much easier for us to help debug

lone phoenix
#

i already did that its all working fine i just want remove country in the UI

#

i can fix it.

#

Thanks for the time

somber igloo
#

Just circling back around to close this out. I think the overall solution requires that you pass the options object into the Elements component, rather than in the Elements provider. So if you followed along with the guide, your code would look something like this.

`import {PaymentElement} from '@stripe/react-stripe-js';

const options = {
fields: {
billingDetails: {
address: {
country: 'never'
}
}
}

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

export default CheckoutForm;`