#arti-villa_api

1 messages ¡ Page 1 of 1 (latest)

final locustBOT
#

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

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

manic onyx
#

Hmm, can you share all your code relative to this?

final locustBOT
minor jetty
#

this is the whole component.

function CheckoutColumn() {
  const [sameAsShipping, setSameAsShipping] = useState(false);

  return (
    <section className="text-foreground rounded-lg bg-white p-4">
      <h1 className="font-editors-note pb-5 text-3xl">Checkout</h1>
      <form className="space-y-8">
        <article>
          <h1 className="font-editors-note pb-3 text-2xl">Shipping address</h1>
          <AddressElement
            options={{
              mode: 'shipping',
            }}
          />
        </article>

        <article>
          <div className="flex justify-between">
            <h1 className="font-editors-note pb-3 text-2xl">Billing address</h1>
            <Toggle
              variant="outline"
              size="sm"
              aria-label="same as shipping"
              pressed={sameAsShipping}
              onPressedChange={setSameAsShipping}
            >
              Same as Shipping
            </Toggle>
          </div>
          {!sameAsShipping && (
            <AddressElement
              options={{
                mode: 'billing',
              }}
            />
          )}
        </article>

        <article>
          <h1 className="font-editors-note pb-3 text-2xl">Payment</h1>
          <PaymentElement options={{ layout: 'tabs' }} />
        </article>
      </form>
    </section>
  );
}
#

with only mode it works fine, but as soon as I introduce these options it throws

#

I'm using custom_checkout_beta_5 which is the new embedded checkout form.

import { loadStripe } from '@stripe/stripe-js';

export const stripeClient = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
  {
    betas: ['custom_checkout_beta_5'],
  },
);
#

It's a very specific version

regal torrent
#

Hey! Taking over for my colleague. Let me catch up.

minor jetty
#

few other things I don't understand, how does the left side using the useCheckout() hook get updated, when I updated the right side, AddressElement. like if i updated location, the tax needs to show the updated tax and shipping cost. also what is shipping tax?

there is a shipping.taxAmounts and I'm unclear what its referring to.

{
    "shippingOption": {
        "id": "shr_1Qp5Z9Dl6iLtSAd9xm2XFpLL",
        "amount": 1200,
        "currency": "usd",
        "displayName": "Standard Shipping",
        "deliveryEstimate": {
            "maximum": {
                "unit": "business_day",
                "value": 15
            },
            "minimum": {
                "unit": "business_day",
                "value": 10
            }
        }
    },
    "taxAmounts": []
}
regal torrent
#

with only mode it works fine, but as soon as I introduce these options it throws
What error does it throws ?

minor jetty
#

running into IntegrationError: Invalid createElement() parameter: options.blockPoBox is not an accepted parameter.

#

any updates?

regal torrent
#

OK so you are using Address Element with embedde Checkout ?

#

Address is built for PaymentElement and not Checkout.

#

You should have Address Element with Payment Element or just embeded Checkout.

minor jetty
#

what is this called?

#

you should should build an full feature app that does all this vs have me go thorugh 400 docs

regal torrent
#

Address Element with Payment Element, not embedded checkout. its called embedded compoonents. re: third option: https://docs.stripe.com/payments/checkout
Yes correct, this is quiet advanced integration and it's still beta, but it's Checkout and not Element. Address Element belongs to the Elements family and not Checkout.

minor jetty
#

ok so i can't use the Address Element?

#

I just added the phone_number_collection but I don't see the AddressElement show me the phone input.

#

I see. I need to create a separeate input

regal torrent
#

Yes you need to create a separate input.

minor jetty
#

damn. okies. and how about how to update the usecheckout hook values if we update shipping? what endpoint do i need to call prior to submitting the form.

regal torrent