#diavo-checkout

1 messages · Page 1 of 1 (latest)

grave python
#

@scenic basalt so are you sure you need to do that? Is the billing address and phone collection that happens in the Checkout page not meeting your use case? (I know the phone collection was broken yesterday, but should work now).

scenic basalt
#

Yeah it works, but i need customer name at least

#

i mean as customer it looks a bit strange here

unknown.png
#

i cant enter my name or other personal information, is it possible to build a custom form(mine) with name + email + something then start the checkout session and finally bind name and email to created customer through checkout session

grave python
#

to be clear the customer can enter a name , but yes it's a 'cardholder name' and is saved to the PaymentMethod object and not the Customer

unknown.png
#

so if you specifically want customer.name to be set, you'll have to do a little bit of custom coding

#

as I said yesterday you can either :

  • copy the payment method name and set it to the customer for example when handling the webhook event
  • collect the customer name outside of Checkout in your own HTML form and save it to a customer object which you then use with Checkout
#

I can show you a little sample code if that helps

scenic basalt
#

yes please i'm bit lost and kinda new to node js

# 
    <div></div>
    <div>
      <div>
        <header>
          <div></div>
        </header>
        <h1>Choisir abonnement</h1>
        <div>
          <section>
            <form action="/create-checkout-session" method="POST">
              <input type="hidden" id="basicPrice" name="priceId">
              <img
                src="/img/premium.png"
                width="120"
                height="120"
                />
              <div>Starter</div>
              <div>20 euros</div>
              <div>par mois</div>
              <button>Select</button>
            </form>
          </section>
          <section>
            <form action="/create-checkout-session" method="POST">
              <input type="hidden" id="proPrice" name="priceId">
              <img
                src="/img/premium.png"
                width="120"
                height="120"
                />
              <div>Premium</div>
              <div>30 euros</div>
              <div>par mois</div>
              <button>Select</button>
            </form>
          </section>
        </div>
      </div>
    </div>
    <div id="error-message" class="error-message"></div>``` this is my HTML form btw
grave python
#

well which way do you want to do it? You can copy the card's name to the customer after the payment(while handling the webhook https://stripe.com/docs/payments/checkout/fulfill-orders#handle-the-event) or you can collect it in your own page upfront.

To clarify, the reason we don't set this to the customer name directly is that you might have a customer with multiple payment methods and cards(imagine a customer paying with her card but then later in a future payment uses her husband's card, they have different cardholder names and that's different from the top-level customer name).

scenic basalt
#

i' prefer the second option

grave python
#

ok then I'll assume you know how to add an input to your HTML form that collects a name

scenic basalt
#

yeah

grave python
#

then you just create a customer with that value and pass to Checkout

let customer = await stripe.customers.create({
    name: customerName
})

const session = await stripe.checkout.sessions.create({
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
  customer:customer.id,
  payment_method_types: ['card'],
  line_items: [
    {price: 'price_1JiKBfJoUivz182DeeQGbB0L', quantity: 2},
  ],
  mode: 'payment',
});
scenic basalt
#

I get the idea, the problem is in my html form up here, i go to create-checkout-session when form is posted and i need this "<input type="hidden" id="proPrice" name="priceId">" or <input type="hidden" id="basicPrice" name="priceId"> to perform the checkout session

grave python
#

not sure I follow the problem

#

you can have all those hidden inputs, totally fine, and just add another (not hidden) input for a name or any other info you want to collect

scenic basalt
#

Well your input name="customer" has to be where i select the product to perform, the thing that i need is after clicking the product i go to page when i enter customer name/email then i go checkout page, dont know if its clear

grave python
#

well you can do that if you want yes, but you'll have to build that logic

#

like you'd need two pages I suppose — instead posting to create-checkout-session immediately, post to a different route which just takes the product name and returns a page where the customer can enter a name and other details

#

or add some Javascript to the frontend and have a form that collects the product and the customer name and makes one big POST to the backend

#

it's all completely possible to build as the web developer building your site

scenic basalt
#

yeah, and you know if i can pass (input=priceiD) from page A (product page) to page B(customer info page) to page C (checkout page) and perform the checkout ?

grave python
#

you certainly can yes

#

like a simple way would be to have it in URL query parameters, like have the first page POST the Price ID, it redirects to a page /collect-customer-details.html?price=price-xxx , then that page POSTs with the details to create-checkout-session, and you can grab the price ID from the URL

#

or you can have an 'order' or shopping cart in your database and store the context of what price is being used. Or save the price ID to a cookie on the first page and read it from there in create-checkout-session. There's lots of options here but it's about building your site and not just using Stripe directly so I can't really build this for you.

#

maybe start by just doing it the way I described(one form that submits the customer name and the price) and get that working, then you can expand!