#oniel-tech_code

1 messages · Page 1 of 1 (latest)

pure jackalBOT
#

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

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

grave python
#

hi there!

grand veldt
#

Hello!

pure jackalBOT
grave python
#

But Link is not being presented as an available payment method I only see the card one.
what are you using to accept payment? the Payment Element?

grand veldt
#

Yes, Payment Element from @stripe/react-stripe-js/checkout

inland haven
#

👋 Hi there! I'm taking over for my colleague. Let me take a look

#

Can you share your account ID (acct_…)?

#

Also, do you happen to have a public page where we can see this behaviour?

#

Or a screenshot of what the Payment Element looks like in your setup

grand veldt
#

Sure, give me a sec

grand veldt
grand veldt
grand veldt
pure jackalBOT
#

🧑‍💻 How to format code on Discord

Inline code: wrap in single backticks (`)

This:

The variable `foo` contains the value `bar`.

Will turn into this:

The variable foo contains the value bar.

Code blocks: wrap in three backticks (```)

Also, you can specify the language after the first three backticks to get syntax highlighting.

This:

```javascript
function foo() {
return 'bar';
}
```

Will turn into this:

function foo() {
  return 'bar';
}```

Notes about **code blocks**:
- Specifying the language is optional (e.g., you can omit `javascript` in the example above)
  - If you don't specify the language you won't get syntax highlighting
- When you're inside a code block (after you type \`\`\`) the `Return`/`Enter` key will add a new line instead of sending your message
  - Once you end the code block `Return`/`Enter` works normally again

You can [read more about message formatting on Discord's website.](https://support.discord.com/hc/en-us/articles/210298617)
grand veldt
# 
import { PaymentElement, useCheckout } from '@stripe/react-stripe-js/checkout';
import { useState } from 'react';
import { Medium } from 'ui/atoms/FontScale';

import FailPaymentModal from '../../FailPaymentModal';
import { StyledButton, StyledFormWrapper } from './styles';

export const CheckoutForm = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  const checkoutState = useCheckout();
  if (checkoutState.type === 'error') {
    return <div>Error: {checkoutState.error.message}</div>;
  }

  const handleSubmit = async () => {
    if (checkoutState.type !== 'success') {
      return;
    }
    const { checkout } = checkoutState;
    setIsLoading(true);

    const result = await checkout.confirm();
    if (result.type === 'error' && result?.error?.code === 'paymentFailed') {
      setIsError(true);
    }

    setIsLoading(false);
  };

  return (
    <>
      <StyledFormWrapper>
        <PaymentElement id="payment-element" />
        <StyledButton
          disabled={isLoading}
          onClick={handleSubmit}
          btnType="product"
          noIcon
          data-id="confirm-payment-button"
        >
          <Medium bold light center noMargin>
            CTA
          </Medium>
        </StyledButton>
      </StyledFormWrapper>
      <FailPaymentModal
        showModal={isError}
        handleClose={() => {
          setIsError(false);
        }}
      />
    </>
  );
};
#

This is how it looks

image.png
#

It only display card elements, and I expects to see Link as well

inland haven
#

Thanks a lot, taking a look!

#

To clarify, you're looking for this option? Or something else?

CleanShot_2025-12-18_at_12.35.22.png
grand veldt
#

Yes something like that

grave python
#

hi! I'm taking over this thread. give me a few minutes to catchup.

#

could you share a link where we can reproduce the issue?

grand veldt
#

That screenshot it was taken from my local env

grave python
#

can you make a quick reproduction on a public URL? that would help to debug this.

grand veldt
#

I'm not allowed to do that

grave python
#

to be clear, no need to share your whole website. only rendering the Payment Element is enough.

grand veldt
#

Oh ok, I'll try to have that then

grave python
#

This is the account ID acct_1SD2ViCVIGjyn8n9 is a sandbox account
also can you double check you shared the correct account ID?

grand veldt
#

FYI: in our side we had stripe only in staging and test envs, today we'll deploy to production only with card payments, when deployment is done I can share prod url to you

#

acct_1SD2ViCVIGjyn8n9
isn't the account id that from the url?

image.png
grave python
#

yes, so you are using the API key from that account to mount the Payment Element?

grand veldt
#

yes, in frontend we use a stripe public key

#

in backend there's another key

#

also in the backend we create a checkout session and it returns a client_secret which I also use in the provider

# 
import { CheckoutProvider } from '@stripe/react-stripe-js/checkout';
import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY || ''
);

      <CheckoutProvider
        stripe={stripePromise}
        options={{
        clientSecret: clientSecret,
      }}
      >
        <StripePaymentPage />
      </CheckoutProvider>
#

this is how the checkout session is created

const session = await this.stripe.checkout.sessions.create({
      ui_mode: 'custom', // For custom Elements integration
      customer: request.pspCustomerId,
      line_items: prices,
      mode: 'subscription',
      subscription_data: {
        trial_period_days: daysOfTrial ? 7 : undefined,
        metadata: stripeMetadata,
      },
      metadata: stripeMetadata,
      // Where to redirect after checkout completion
      return_url: `${process.env.NEXT_PUBLIC_SITE_DOMAIN}/payment/thankyou?session_id={CHECKOUT_SESSION_ID}`,
    });
wet geyser
#

Can you share the ID of one of the Checkout Sessions? cs_xxx

wet geyser
#

I tried by using ExpressCheckoutElement, it displays link but it expect from the user an account created in Link test mode, but doesn't give the user a way to create the account.
Yeah unfortunately that isn't supported today and the only way to get Link to render with custom Checkout Sessions is in ECE

wet geyser