#reginbald_api

1 messages · Page 1 of 1 (latest)

livid jungleBOT
#

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

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

harsh narwhal
#

👋 Hi there! Let me take a look

#

Are you able to add customer_session_read and customer_session_write?

livid jungleBOT
deft moth
harsh narwhal
#

Great! And thanks for pointing that out. I'll check with the docs team on this

deft moth
#

Awesome. one related question, Should I be able to use the payment JS element with the customer session client secret or do I need a setup intent client secret?

#

This is how I'm creating my customer session

params := &stripe.CustomerSessionCreateParams{
            StripeAccount: "account id"
    Customer: "customer id",
    Components: &stripe.CustomerSessionCreateComponentsParams{
        PaymentElement: &stripe.CustomerSessionCreateComponentsPaymentElementParams{
            Enabled: stripe.Bool(true),
            Features: &stripe.CustomerSessionCreateComponentsPaymentElementFeaturesParams{
                PaymentMethodRedisplay: stripe.String("enabled"),     // shows saved payment methods
                PaymentMethodRemove:    stripe.String("enabled"),     // allow removing a payment method
                PaymentMethodSave:      stripe.String("enabled"),     // allow saving a new payment method
                PaymentMethodSaveUsage: stripe.String("off_session"), // customer may or may not be present in your checkout flow.
                PaymentMethodAllowRedisplayFilters: []*string{ // All saved payment methods are shown
                    stripe.String("always"), stripe.String("limited"), stripe.String("unspecified")},
            },
        },
    },
}
return s.client.V1CustomerSessions.Create(ctx, params)
harsh narwhal
#

A Customer Session would only give you access to those features, i.e. reading/writing saved payment methods

deft moth
#

I think that should be enough for me, I'm trying to create a user settings UI. Where the users can manage their payment methods and address

#

This is the front end code

import { useEffect, useState } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import PaymentMethodForm from "./payment-method-form";

const stripePromise = loadStripe(
"pk_live_....."
);

export default function PaymentMethodManager({
customerId,
}: {
customerId: string;
}) {
const customerSessionClientSecret =
"cuss_secret_....";

if (!customerSessionClientSecret) return <div>Loading...</div>;

return (
<Elements
stripe={stripePromise}
options={{
customerSessionClientSecret,
}}
>
<PaymentMethodForm />
</Elements>
);
}

import { useState } from "react";
import {
useStripe,
useElements,
PaymentElement,
} from "@stripe/react-stripe-js";

export default function PaymentMethodForm() {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);

const handleSubmit = async (e: any) => {
e.preventDefault();

if (!stripe || !elements) return;

setIsLoading(true);

const { error } = await stripe.confirmSetup({
  elements,
  confirmParams: {
    return_url: `${window.location.origin}/payment-success`,
  },
});

if (error) {
  setErrorMessage(error.message ?? "");
}

setIsLoading(false);

};

return (
<form onSubmit={handleSubmit}>
<PaymentElement />
{errorMessage && <div className="error">{errorMessage}</div>}
<button disabled={!stripe || isLoading}>
{isLoading ? "Processing..." : "Save Payment Method"}
</button>
</form>
);
}

livid jungleBOT
deft moth
#

I'm getting this error
IntegrationError: In order to create a payment element, you must pass a clientSecret or mode when creating the Elements group.

e.g. stripe.elements({clientSecret: "{{CLIENT_SECRET}}"})

prisma trench
#

hi there, taking over as my colleague had to step away, give me a few moments to catch up

#

the error is indicating that you need to provide a clientSecret from a Payment Intent when you create the <Elements> component. similar to this example

#

you'd pass it alongside your customerSessionClientSecret in the options

deft moth
#

Ok so I need to create a setup intent and a customersession to be able to achieve this?

prisma trench
#

yes you could use a Setup Intent if you're not intending to collect payment immediately

deft moth
#

Ok great. Is it possible to get the publishable key of an account that has installed my Stripe app programmatically?

prisma trench
#

I don't think so. What are you trying to do with that publishable key?

deft moth
#

The idea is to have an endpoint that returns everything necessary to render customer settings (address, payment methods) using the stripe.js elements on my website for the accounts that have installed my Stripe app

#

If a customer logs into account X, they’ll see their settings page for account X. If they log into account Y, they’ll see their settings page for account Y.

prisma trench
deft moth
#

Ok great, thank you for all your help