phaniophrero | Stripe Developers | Page 1

fading thicketBOT Jul 31, 2023, 2:08 AM

#

acoustic stream Jul 31, 2023, 2:10 AM

#

You may disable the field in fields.billingDetails.address.country with never: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-address-country

#

@grizzled ginkgo please use the thread here

grizzled ginkgo Jul 31, 2023, 2:11 AM

#

I've kind of tried that before but it didn't got removed

#

can I show you my code and tell me if is the right place to do it

#

so this is my form component

#

📎 stripe-form.txt

#

this is the checkout component

#

`import { useState, useEffect } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import { useRouter } from "next/router";
import Link from "next/link";
import PaymentForm from "./PaymentForm";
import CheckoutForm from "./CheckoutForm";

const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

const Checkout = ({ course_id }) => {
const [clientSecret, setClientSecret] = useState("");

const router = useRouter();

console.log("course_id: ", course_id);

useEffect(() => {
fetch("http://localhost:8000/api/create-payment-intent/", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(course_id),
})
.then((res) => res.json())
.then((data) => setClientSecret(data.clientSecret));
}, []);

const options = {
clientSecret: clientSecret,
// just added this right now
fields: {
billingDetails: {
address: {
country: "never",
postalCode: "never",
},
},
},
};

console.log("clientSecret: ", clientSecret);
// const handleCheckout = () => {
// router.push(/checkout/${course_id});
// };

return (
<div className="btn-checkout-wrapper">
{clientSecret && (
<Elements stripe={stripePromise} options={options}>
<PaymentForm />
{/* <CheckoutForm /> /}
</Elements>
)}
{/ <button
style={{
background: "green",
border: "none",
padding: ".5rem",
borderRadius: ".5rem",
}}
onClick={handleCheckout}
className="btn-checkout"
>
Checkout
</button> */}
</div>
);
};

export default Checkout;`

acoustic stream Jul 31, 2023, 2:16 AM

#

In <PaymentElement id="payment-element" />, I don't see you setting options field and disable the billing address country

grizzled ginkgo Jul 31, 2023, 2:16 AM

#

so in the <PaymentElement/> i should pass the options ?

acoustic stream Jul 31, 2023, 2:17 AM

#

Yup! It should be set as <PaymentElement />, not <Elements />

grizzled ginkgo Jul 31, 2023, 2:17 AM

#

const options = { clientSecret: clientSecret, // just added this right now fields: { billingDetails: { address: { country: "never", postalCode: "never", }, }, }, };

#

this ones ?

#

should I leave the clientSecret there or not ?

acoustic stream Jul 31, 2023, 2:18 AM

#

There are two options to be set. One at <Elements /> and another one at <PaymentElement />

#

The one with client secret is the options field at <Elements /> and client secret should be set

grizzled ginkgo Jul 31, 2023, 2:18 AM

#

ok

acoustic stream Jul 31, 2023, 2:18 AM

#

Billing address country should be set at the options of <PaymentElement />

grizzled ginkgo Jul 31, 2023, 2:19 AM

#

ok , I'll change that now

#

and come back with an update

#

ok

#

so

#

it didn't worked..

#

`import { useState, useEffect } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import { useRouter } from "next/router";
import Link from "next/link";
import PaymentForm from "./PaymentForm";
import CheckoutForm from "./CheckoutForm";

const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

const Checkout = ({ course_id }) => {
const [clientSecret, setClientSecret] = useState("");

const router = useRouter();

console.log("course_id: ", course_id);

useEffect(() => {
fetch("http://localhost:8000/api/create-payment-intent/", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(course_id),
})
.then((res) => res.json())
.then((data) => setClientSecret(data.clientSecret));
}, []);

const options = {
clientSecret: clientSecret,
};

const optionsPaymentElement = {
fields: {
billingDetails: {
address: {
country: "never",
postalCode: "never",
},
},
},
};

console.log("clientSecret: ", clientSecret);
// const handleCheckout = () => {
// router.push(/checkout/${course_id});
// };

return (
<div className="btn-checkout-wrapper">
{clientSecret && (
<Elements stripe={stripePromise} options={options}>
<PaymentForm options={optionsPaymentElement} />
{/* <CheckoutForm /> /}
</Elements>
)}
{/ <button
style={{
background: "green",
border: "none",
padding: ".5rem",
borderRadius: ".5rem",
}}
onClick={handleCheckout}
className="btn-checkout"
>
Checkout
</button> */}
</div>
);
};

export default Checkout;`

#

#

it still shows the default country and gets my country france

#

is there something I did wrong ?

#

I also have some code wrote in Django in order to create the payment intent and all of that...

#

do I need to set it from there ?

acoustic stream Jul 31, 2023, 2:27 AM

#

I don't see optionsPaymentElement set in <PaymentElement />

grizzled ginkgo Jul 31, 2023, 2:27 AM

#

#

is there

acoustic stream Jul 31, 2023, 2:28 AM

#

It's not setting at <PaymentElement />

grizzled ginkgo Jul 31, 2023, 2:28 AM

#

oh wait

#

sorry

#

my bad

acoustic stream Jul 31, 2023, 2:28 AM

#

PaymentForm is your own react component

grizzled ginkgo Jul 31, 2023, 2:29 AM

#

i just pass it down to the payment form and use the prosp to serve the options to PaymentElement

#

#

done

#

thank you

acoustic stream Jul 31, 2023, 2:30 AM

#

Great to see that it's working now

grizzled ginkgo Jul 31, 2023, 2:30 AM

#

so basically now is this the wright way I'm passing the billing details data

#

?

#

in this component

#

📎 message.txt

#

here

#

and for example if I'd like to add some extra fields like customer ID or Invoice ID or Business name , this like that , that usually goes in a invoice ?

acoustic stream Jul 31, 2023, 2:31 AM

#

Yup! That looks right to me. Alternatively, you can set optionsPaymentElement in the PaymentForm component and set it directly to <PaymentElement/> instead of passing through props

grizzled ginkgo Jul 31, 2023, 2:32 AM

#

brb in 5 minutes

acoustic stream Jul 31, 2023, 2:32 AM

#

and for example if I'd like to add some extra fields like customer ID or Invoice ID or Business name , this like that , that usually goes in a invoice ?
Where are you going to add?

grizzled ginkgo Jul 31, 2023, 2:44 AM

#

well

#

in the same component I've send above

#

I mean where I've already added those fields address , country , city , zipcode..

#

I'm trying go get all this data to be able to create an invoice

#

do you have any suggestions ? 🙂

acoustic stream Jul 31, 2023, 2:47 AM

#

Those fields are collected automatically when necessary. These information might not be collected if the payment doesn't require it. If you wish to collect them all the time, you may disable them in Payment Element and collect with your own form

grizzled ginkgo Jul 31, 2023, 2:49 AM

#

how can I do that ? I mean I thought that I'm already doing that by adding those fileds I have already added. But you are saying that what I did there is not actually collecting those fileds with my own form ?

acoustic stream Jul 31, 2023, 2:52 AM

#

Oh sorry! I didn't look clearly. If you have added those fields in your own form, you can submit the information in confirmPayment (which you already did), so that it'll reflect in the Payment Intent which you can retrieve it later

grizzled ginkgo Jul 31, 2023, 2:53 AM

#

I'm getting this error now when I try to submit the payment

#

#

why is that ?

#

#

and that is the console

acoustic stream Jul 31, 2023, 2:55 AM

#

Can you share the request ID (req_xxx) with the error? Here’s how you can find it: https://support.stripe.com/questions/finding-the-id-for-an-api-request

Finding the ID for an API Request : Stripe: Help & Support

Find help and support for Stripe. Our support center provides answers on all types of situations, including account information, charges and refunds, and subscriptions information. Get your questions answered and find international support for Stripe.

grizzled ginkgo Jul 31, 2023, 2:58 AM

#

you mean, to go to the dashboard and look for the payment that dind't went through ?

#

it says

#

invalid_request_error - payment_method_data[billing_details][address][country]
Country 'France' is unknown. Try using a 2-character alphanumeric country code instead, such as 'US', 'EG', or 'GB'. A full list of country codes is available at https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements

Was this useful?

Yes

No

ISO 3166-1 alpha-2

ISO 3166-1 alpha-2 codes are two-letter country codes defined in ISO 3166-1, part of the ISO 3166 standard published by the International Organization for Standardization (ISO), to represent countries, dependent territories, and special areas of geographical interest. They are the most widely used of the country codes published by ISO (the other...

#

I guess

acoustic stream Jul 31, 2023, 3:00 AM

#

Any API failure (like the screenshot) will be reflected under request history in the Dashboard. I'd need the request ID (req_xxx) of this particular request failures to check the reason

grizzled ginkgo Jul 31, 2023, 3:00 AM

#

the country

#

is not right ?

acoustic stream Jul 31, 2023, 3:00 AM

#

Can you share the request ID (req_xxx)?

grizzled ginkgo Jul 31, 2023, 3:00 AM

#

yes

#

req_ogKKxr6M1NbvG8

#

this one ?

acoustic stream Jul 31, 2023, 3:02 AM

#

Yup! This is the one. In https://dashboard.stripe.com/test/logs/req_ogKKxr6M1NbvG8, the country is set as France in your request. country field only supports 2-character alphanumeric country code

#

In your case, France should be FR

grizzled ginkgo Jul 31, 2023, 3:03 AM

#

so I sould do a conversion behing the scene , for example I should let the user type the word "france" and behind the scene to convert it to "fr" ?

acoustic stream Jul 31, 2023, 3:03 AM

#

Yup, correct

grizzled ginkgo Jul 31, 2023, 3:03 AM

#

if I'm not asking to much already

#

do you have something i mind

#

of how can I do that in a right way ?

acoustic stream Jul 31, 2023, 3:04 AM

#

you will need to map it manually by yourself with the reference here: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements

grizzled ginkgo Jul 31, 2023, 3:06 AM

#

so do you think if I check for the first two letters of each country words like France first two words are FR to set its value to FR ?

#

in the state

acoustic stream Jul 31, 2023, 3:08 AM

#

No, that's not correct. Two letters is not always the first two character. For example, United Kingdom is GB which is irrelevant to the first two character

#

You will check the full name of the country and map it to its own 2-character alphanumeric country code

grizzled ginkgo Jul 31, 2023, 3:08 AM

#

right

#

ok thank you so much river

#

what are you specialized on ? react js / next js or other framework ?

#

do you also do backend too ?

#

just a courious question

#

if you don't mind

#

🙂

acoustic stream Jul 31, 2023, 3:12 AM

#

Engineers supporting this channel are mainly full stack

#

We work with both frontend and backend

grizzled ginkgo Jul 31, 2023, 3:19 AM

#

right

#

well thank you again for your support

#

and quick respose

#phaniophrero