bk_docs

[hollow depot]

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can 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/1248637609148678234

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

[icy galleon]

Can you share your client-side code in here, and also what you see in the browser console?

[wary nova]

import { loadStripe } from '@stripe/stripe-js';
import { CheckoutForm } from './CheckoutForm';
// Make sure to call `loadStripe` outside a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_test_kCAgJ8Yd2HwPuHiAChlSIyJl');
export const Donations = () => {
  const options = {
    mode: 'payment',
    amount: 1099,
    currency: 'usd',
    paymentMethodCreation: 'manual',
    // clientSecret: '',
    // Fully customizable with appearance API.
    // appearance: {
    //   /*...*/
    // },
  };
  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;

I haven't moved past what is in the docs yet because I wasn't able to get this working

[icy galleon]

Got it

Let me ask a colleague who's a bit more familiar with this really quick

Can you share your code for creating and starting up your react app?

Also for spinning up your local server

Do you use a COEP?

[wary nova]

import 'source-map-support/register';
import { delay } from '@seedcompany/common';
import { FastifyInstance } from 'fastify';
import gracefulShutdown from 'http-graceful-shutdown';

const appRef: { current?: FastifyInstance } = {};

const startApp = async () => {
  if (appRef.current) {
    await appRef.current.close();
    await delay(10);
  }
  const { create } = await import('./server/server');
  appRef.current = await create();
  await appRef.current.listen({
    host: '0.0.0.0',
    port: parseInt(process.env.SERVER_PORT, 10),
  });
  console.log(`> Started on port ${process.env.PORT}`);
};

if (module.hot) {
  module.hot.accept('./server/server', () => {
    console.log('🔁  HMR Reloading `./server`...');
    startApp().catch((error) => console.error(error));
  });
  console.info('✅  Server-side HMR Enabled!');
}

async function bootstrap() {
  await startApp();
  gracefulShutdown(appRef.current!.server, {
    forceExit: false,
    onShutdown: async () => {
      await appRef.current?.close();
    },
  });
}
void bootstrap();

[wary nova]

I'm not familiar with this acronym?

[thorn sparrow]

Hi there 👋 jumping in as my teammate needs to step away soon. My understanding, from the provided error, is that the strictness of the COEP you're using does not allow you to load our resources that don't comply with that level of strictness.

It's a Cross-Origin-Embedder-Policy, as shown in the error.

It looks like your site currently has that set to require-corp, are you able to adjust that to credentialless?

[wary nova]

Let me check with my tech lead. I am not 100% sure where to do this, but what it seems like you're confirming is that it is on our end that the update needs to be made, correct?

yay iframes

[thorn sparrow]

Yup, I believe that's the case.

[wary nova]

Thanks for confirming that for me! I am thinking I will be able to find it and get it done from here.