#kenny_code

1 messages · Page 1 of 1 (latest)

meager cypressBOT
#

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

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

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

strange locust
# 
      const session = await stripe.checkout.sessions.create({
        ui_mode: "custom",
        line_items: [
          {
            price: formData.price,
            quantity: formData.quantity,
          },
        ],
        mode: formData.mode,
        return_url: `${BASE_URL}${href("/:orgSlug?")}?session_id={CHECKOUT_SESSION_ID}`,
        automatic_tax: { enabled: false },
        customer: orgExt.customerId,
        saved_payment_method_options: {
          allow_redisplay_filters: ['always', 'limited'],
        },
      });
#

that's the full session object

#

it renders like this even though I have an active payment method

image.png
brittle granite
#

That's Checkout not Payment Element

#

So that uses a different flow from customer session

strange locust
#

I'm afraid that I don't understand

brittle granite
#

The doc you linked is for the payment element

#

You are not using the payment element

#

Not based on the code you shared

#

You are using Checkout Sessions

strange locust
#

the checkout sessions with the payment element

# 
function CheckoutForm({
  amountTotal,
  amountSubtotal,
}: {
  amountTotal: number;
  amountSubtotal: number;
}) {
  const checkout = useCheckout();
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [viewMode, setViewMode] = useState<string | null>(null);
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<
    string | undefined
  >();

  console.log('checkout.savedPaymentMethods', checkout.savedPaymentMethods)

  const displayAmount = new Intl.NumberFormat("en-US", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(amountTotal / 100);

  async function handleSubmit(event: FormEvent) {
    event.preventDefault();

    setIsLoading(true);

    const res = await checkout.confirm();

    if (res.type === "error") {
      setError(res.error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="m-auto">
      <PaymentElement options={{ layout: "tabs" }} />
      <button type="submit" disabled={isLoading}>submit</button>
    </form>
  );
}
# 
...
    return (
      <CheckoutProvider
        stripe={stripePromise}
        options={{
          fetchClientSecret: async () => clientSecret,
          elementsOptions: {
            fonts: [
              { cssSrc: "https://fonts.googleapis.com/css?family=Inter" },
            ],
            appearance: {
              theme: "night",
              variables: {
                fontFamily: "Inter",
                colorPrimary: "white",
                colorBackground: "#09090B",
                colorText: "white",
              },
            },
          },
        }}
      >
        <CheckoutForm amountTotal={amountTotal} amountSubtotal={amountSubtotal} />
      </CheckoutProvider>
    );
brittle granite
#

I don't think Elements with Checkout Sessions supports Customer Sessions and redisplaying saved payment methods

#

AFAIK it's only regular Payment Element integrations that support it

#

Confirming with a colleague though

strange locust
#

gotcha so if that were the case would I need to do the advanced integration with payment intents & customer sessions?

brittle granite
#

I believe so

#

Still waiting for confirmation from my colleague if there's a way around this with Elements + Checkout Sessions

strange locust
#

appreciate it

brittle granite
#

So it's actively being worked on

#

But not possible yet

strange locust
#

gotcha, not possible for the payment element entirely?

brittle granite
#

Not possible with Checkout Sessions + Payment Element

#

If only doing Payment Intent + Payment Element it is possible

strange locust
#

does that method allow me to charge based on a subscription price

brittle granite
#

Yes

meager cypressBOT
strange locust
#

I guess I don't understand how payment intent works. Would I just be showing them a button and then issuing the payment when they click it directly?

#

idk how to put my thoughts into words

#

basically what's the difference between payment intents and a checkout session

devout axle
#

Hi hi! I’m going to be taking over for my colleague here. Can you please summarize where things are at for me, and what issue(s) is/are blocking you?

strange locust
#

Yeah for sure. I am trying to get payment methods for my checkout session payment element but I learned that it's not supported yet so I am looking into alternatives.

strange locust
# brittle granite via this flow: https://docs.stripe.com/payments/accept-a-payment?platform=web&ui...

from this link I notice this line of code:

  const intent = await stripe.paymentIntents.create({
    amount: 1099,
    currency: 'usd',
    // In the latest version of the API, specifying the `automatic_payment_methods` parameter
    // is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: {{CUSTOMER_ID}},
  });

but this is manually specifying an amount. I need to be able to put a price in not an amount it also needs to be a subscription

devout axle
#

Can we take a step back and can you explain to me what you're trying to accomplish exactly?

#

Or rather, what is the "why" behind what you're trying to do?

strange locust
#

I have a flow where my customers have payment methods. When they want to subscribe or top up I need them to be able to select which payment method they would like to use (if available) or to enter new card details pretty much to continue with the payment

#

kind of like how amazon works with payments

devout axle
#

Can you share the request ID from your dashboard for the Checkout Session? Or the Checkout Session ID?

strange locust
#

I can but I don't know why that would help considering that @brittle granite confirmed that this isn't supported by checkout sessions yet

#

cs_test_a1NMZXHiTwTHEO3UbTgJnl4Qjg6HcDWrjhQJT3wcZmfTo7600bkrTaE0ST

devout axle
#

Cool, so you're good then?

strange locust
#

no because he said it was possible with payment intents

strange locust
devout axle
strange locust
#

this doesn't answer my question about the price though

#

like price id

# 
  const intent = await stripe.paymentIntents.create({
    amount: 1099,
    currency: 'usd',
    // In the latest version of the API, specifying the `automatic_payment_methods` parameter
    // is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: {{CUSTOMER_ID}},
  });

as you can see it's manually selecitng the amount

#

i have 0 idea how i could possibly translate this into setting up a subscription for my price let's say price_1RCs4uCWRQ9TqHkCexlKFdcp

devout axle
#

When they want to subscribe or top up

Tell me more about what this means in terms of your application, and also why an existing Customer would want to 'subscribe' (since I presume they arlready were subscribed)?

strange locust
#

because we have multiple subscription packages that are not mutually exclusive to one another

devout axle
#

The only part of this that actually requires a Stripe frontend component is the "enter new card details" part; the rest could all be done with your own UI.

Tell me more about "top up"s.

strange locust
#

right, and I tried to make my own UI for this as well but checkout.savedPaymentMethods outputs null

devout axle
#

You need to think about this like the two distinct steps it is:

  1. Pick the costs-money activity (top-up, new subscription item, whatever);
  2. Select the payment method you want to use (or add a new one)

From that perspective, it's a lot easier to execute on. How are they/the app selecting the 'costs-money' actions?

strange locust
#

Okay I see what you mean but without a checkout session how would I charge a user and set up a new subscription?

devout axle
#

First please tell me more about what 'top ups' mean for you.

strange locust
#

one time payments. But those are easy and I can just use standard payments intents. I'm more interested in figuring out the more complex subscriptions.

devout axle
#

Ok, so a top-up from Stripe's perspective is just a regular 'charge', rather than a Subscription needing creating, and whatever's getting 'topped up' is managed wholly outside of Stripe, ya?

strange locust
#

Yes that’s correct

#

But my users can select multiple add on subscriptions which is why I need payment methods to be saved so they don’t have to re-input every time

devout axle
#

Right, ok.