#jaxo_code

1 messages · Page 1 of 1 (latest)

burnt lodgeBOT
#

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

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

wide heath
#

Hello, which of our payment surfaces are you trying to restrict the address element in? Checkout? Payment Element? Address Element? Something else?

twilit sand
#

country as i said

wide heath
#

Right, but where?

twilit sand
#

i think it a PaymentElement

wide heath
#

I get the ask, but there are a number of places where country dropdowns appear on Stripe surfaces. Changing them in different places often requires different things

twilit sand
wide heath
#

Gotcha, checking if it is possible to restrict that in the payment element

twilit sand
#

sorry for the question message i use the translator, because i was i hurry and it didnt translate well

#

i think you can restrict it , but u must pass a country in other way , but when i tried to pass it , it said invalid argument country , so idk

wide heath
twilit sand
#

oh okey

wide heath
twilit sand
#

<PaymentElement options={{ fields: { billingDetails: "auto", }, // Stripe supports the allowedCountries option in the PaymentElement // to restrict countries for the billing address. billingDetails: { address: { country: "SK", // default country, can be left out if you're enforcing through the allowedCountries option }, }, allowedCountries: ["SK", "CZ"], // Restrict countries to Slovakia (SK) and Czech Republic (CZ) }} />

#

i also tried this ..<PaymentElement options={{ fields: { billingDetails: { name: "auto", email: "auto", phone: "auto", address: { country: "never", // Set country field to 'never' }, }, }, // Stripe supports the allowedCountries option in the PaymentElement // to restrict countries for the billing address. billingDetails: { address: { country: "SK", // default country, can be left out if you're enforcing through the allowedCountries option }, }, allowedCountries: ["SK", "CZ"], // Restrict countries to Slovakia (SK) and Czech Republic (CZ) }} /> but get an error : Unhandled Runtime Error
IntegrationError: You specified "never" for fields.billing_details.address.country 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().

wide heath
#

Gotcha, in that code billingDetails should be within another parameter called defaultValues. I think this should work

<PaymentElement
        options={{
          fields: {
            billingDetails: "auto",
          },
          // Stripe supports the allowedCountries option in the PaymentElement
          // to restrict countries for the billing address.
          defaultValues: { 
            billingDetails: {
              address: {
                country: "SK", // default country, can be left out if you're enforcing through the allowedCountries option
              },
            },
          },
        }}
      />
#

Are you collecting a full address or just the postal code?

twilit sand
#

i tried to give better propt to copilot with things u said and i works now

#

here is a full code if you want to look : `import {
PaymentElement,
useStripe,
useElements,
} from "@stripe/react-stripe-js";
import { Button } from "../components/ui/button";
import { useState } from "react";
import { Loader2 } from "lucide-react";
import { toast } from "react-hot-toast";

export default function PaymentForm({ amount, onSuccess }) {
const stripe = useStripe();
const elements = useElements();
const [isProcessing, setIsProcessing] = useState(false);

const handleSubmit = async (e) => {
e.preventDefault();
if (!stripe || !elements) {
return;
}

setIsProcessing(true);

const { error } = await stripe.confirmPayment({
  elements,
  confirmParams: {
    return_url: `${window.location.origin}/kosik`,
    payment_method_data: {
      billing_details: {
        address: {
          country: "SK",
        },
      },
    },
  },
  redirect: "if_required",
});

if (error) {
  console.error("Payment error:", error);
  toast.error(error.message || "An error occurred during payment");
  setIsProcessing(false);
} else {
  await onSuccess();
}

};

return (
<form onSubmit={handleSubmit} className="w-full space-y-6">
<PaymentElement
options={{
fields: {
billingDetails: {
name: "auto",
email: "auto",
phone: "auto",
address: {
country: "never",
},
},
},
allowedCountries: ["SK", "CZ"],
}}
/>
<Button
disabled={isProcessing || !stripe || !elements}
className="w-full"
type="submit"
>
{isProcessing ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Spracúva sa platba...
</>
) : (
Zaplatiť ${amount.toFixed(2)} €
)}
</Button>
</form>
);
}`

#

he said that he added : the payment_method_data.billing_details.address.country parameter to the stripe.confirmPayment

#

but yea code you said should also work , thank you very much

wide heath
#

Nice! Happy I could help