.stevenp | Stripe Developers | Page 1

radiant roseBOT Jul 13, 2023, 7:08 AM

#

tardy moss Jul 13, 2023, 7:11 AM

#

Hi there, you shouldn't add thing to the stripeSignature, otherwise the signature verification would fail

unreal thorn Jul 13, 2023, 7:11 AM

#

ah yes, when I call it as the guide suggests here:

https://stripe.com/docs/stripe-apps/build-backend

```return fetch(https://example.com/${endpoint}/, {
method: 'POST',
headers: {
'Stripe-Signature': await fetchStripeSignature(),
'Content-Type': 'application/json',
},
// Include the account ID and user ID in the body to verify on backend.
body: JSON.stringify({
...requestData,
...signaturePayload,
}),
});

the request fails

tardy moss Jul 13, 2023, 7:13 AM

#

Any error log from your server?

unreal thorn Jul 13, 2023, 7:13 AM

#

It's not failing on the server it's failing in chrome

#

it never makes it to the server

#

#

no logs on my server, and when I remove this header it works fine

tardy moss Jul 13, 2023, 7:14 AM

#

Is the endpoint accessible?

unreal thorn Jul 13, 2023, 7:14 AM

#

yea

#

when I remove the header from the request it succeeds

tardy moss Jul 13, 2023, 7:14 AM

#

can you share with me your exact code?

unreal thorn Jul 13, 2023, 7:14 AM

#

yessir

#

mport { Box, ContextView, Inline, Link } from "@stripe/ui-extension-sdk/ui";
import type { ExtensionContextValue } from "@stripe/ui-extension-sdk/context";

import BrandIcon from "./brand_icon.svg";
import {SignInView, SettingsView} from '@stripe/ui-extension-sdk/ui';
import React, { useEffect, useState } from 'react';
import {fetchStripeSignature} from '@stripe/ui-extension-sdk/utils';

/**
 * This is a view that is rendered in the Stripe dashboard's customer detail page.
 * In stripe-app.json, this view is configured with stripe.dashboard.customer.detail viewport.
 * You can add a new view by running "stripe apps add view" from the CLI.
 */
const App = ({ userContext, environment }: ExtensionContextValue) => {
  const isUserSignedIn = false 

  const [data, setData] = useState(null);
 
  useEffect(() => {

    const fetchData = async () => {
      try {
        // just returns a 200 status
        const signaturePayload = {
          user_id: userContext?.id,
          account_id: userContext?.account.id,
        };
        const stripeSignature = await fetchStripeSignature()

        console.log(stripeSignature)
        const response = await fetch('https://cartwheel.ngrok.io/test_stripe', {
          method: 'POST',
          headers: {
            'Stripe-Signature': stripeSignature,
            'Content-Type': 'application/json',
          },
          // Include the account ID and user ID in the body to verify on backend.
          body: JSON.stringify({
            signaturePayload
          })
        });
        const result = await response.json();
        console.log(result)
        setData(result);
      } catch (error) {
        console.error('Error:', error);
      }
    };

    fetchData()
  }, []);

  return (
    <ContextView
      title="Hello world22"
      brandColor="#F6F8FA" // replace this with your brand color
      brandIcon={BrandIcon} // replace this with your brand icon
      externalLink={{
        label: "View docs",
        href: "https://stripe.com/docs/stripe-apps"
      }}
    >

<SettingsView>
      {/* Add your settings view content. */}
    </SettingsView>
...

tardy moss Jul 13, 2023, 7:17 AM

#

OK, do you see any error in your browser console?

unreal thorn Jul 13, 2023, 7:18 AM

#

not a particularly useful one

#

I am nearly certain the request never even makes it to my server as I have logs set up on my server and nothing is getting hit

tardy moss Jul 13, 2023, 7:19 AM

#

Open your Network tab and see if it tells you more about the network error.

unreal thorn Jul 13, 2023, 7:19 AM

#

I think Stripe is killing the request from the browser due to the signature not being valid

#

tardy moss Jul 13, 2023, 7:20 AM

#

Hmm, it's a CORS error.

#

Anyway, there's a mistake that you might want to fix in your code

            signaturePayload
          })

should be

            ...signaturePayload
          })

unreal thorn Jul 13, 2023, 7:21 AM

#

ah yeah good find

tardy moss Jul 13, 2023, 7:21 AM

#

Does your server accept CORS requests?

unreal thorn Jul 13, 2023, 7:21 AM

#

yep, thing is when the 'Stripe-Signature' Header is removed there's no CORS error, the response 200s, so I'm not sure if the CORS error is accurte

#

yessir

#

it returns a successful response without the header

tardy moss Jul 13, 2023, 7:22 AM

#

https://stripe.com/docs/stripe-apps/reference/app-manifest#csprequest

App manifest reference

Learn about the app manifest, an index of all fields, types, and descriptions for your app manifest file.

unreal thorn Jul 13, 2023, 7:22 AM

#

i've noticed on other projects chrome with show a CORS error when in reality the issue is somethign else, it's just chrome dev console not having good error logging

#

yep, i have my endpoint added there (if I didnt the request without the header wouldn't work)

tardy moss Jul 13, 2023, 7:22 AM

#

did you add your endpoint to connect-src ?

unreal thorn Jul 13, 2023, 7:23 AM

#

      "connect-src": [
        "https://api.chargeblast.io/",
        "https://cartwheel.ngrok.io/"
      ],

yes I have it added there, it is something very specific to the Header being passed in I think

tardy moss Jul 13, 2023, 7:24 AM

#

Do you mind if I do send some post requests to your server?

unreal thorn Jul 13, 2023, 7:24 AM

#

Go for it

#

So I've found another interesting observation:

 const response = await fetch('https://cartwheel.ngrok.io/test_stripe', {
          method: 'POST',
          headers: {
            'Example': 'XYZ',
            'Content-Type': 'application/json',
          },
          // Include the account ID and user ID in the body to verify on backend.
          body: JSON.stringify({
            ... signaturePayload
          })
        });

This does not work

But removing the "EXAMPLE" header works

#

it seems adding anything to the header (nothing to do with the Stripe verification part) is causing the fetch to not get made

#

When I do it from postman it works

#

So am thinking there's some middleware on the stripe dashboard thats killing it

tardy moss Jul 13, 2023, 7:27 AM

#

Have you run stripe apps upload ?

unreal thorn Jul 13, 2023, 7:27 AM

#

yes

#

i've done that and I'm running it via stripe apps start for a live developer experience

#

i can reupload it

tardy moss Jul 13, 2023, 7:28 AM

#

Did you upload it before you set the connect-src ?

unreal thorn Jul 13, 2023, 7:28 AM

#

yes

tardy moss Jul 13, 2023, 7:28 AM

#

Ah, can you upload it again?

unreal thorn Jul 13, 2023, 7:28 AM

#

yes will do, just seeing a small error

#

found violation for connect-src "https://api.chargeblast.io/": path cannot be empty found violation for connect-src "https://cartwheel.ngrok.io/": path cannot be empty

#

would you know how to make it like a wildcard allow?

#

    "content_security_policy": {
      "connect-src": [
        "https://api.chargeblast.io/",
        "https://cartwheel.ngrok.io/"
      ],

#

will just tuck it under a /stripe/ folder

tardy moss Jul 13, 2023, 7:30 AM

#

Change it to https://cartwheel.ngrok.io/test_stripe

unreal thorn Jul 13, 2023, 7:30 AM

#

https://cartwheel.ngrok.io/stripe/test_stripe

moved my endpoint here

#

give me a moment

tardy moss Jul 13, 2023, 7:31 AM

#

Update the connect-src, upload the Stripe app and try again.

unreal thorn Jul 13, 2023, 7:33 AM

#

Ok so I moved my endpoint instead to the above and changed the stripe frontend code to hit new endpoint, and updated connect-src. I've test app both within the stripe page direct and via stripe apps start seeing the same issue

#

        const response = await fetch('https://cartwheel.ngrok.io/stripe/test_stripe', {
          method: 'POST',
          headers: {
            'Example': 'XYZ',
            'Content-Type': 'application/json',
          },

#

this fails

#

      "connect-src": [
        "https://api.chargeblast.io/stripe/",
        "https://cartwheel.ngrok.io/stripe/"
      ],```

tardy moss Jul 13, 2023, 7:34 AM

#

I thought I asked you to change it to https://cartwheel.ngrok.io/test_stripe ?

#

Wait

#

it doesn't matter

#

Did you run stripe apps upload ? was the upload sucessful?

unreal thorn Jul 13, 2023, 7:35 AM

#

It shouldn't matter, i just thought I was being clever to make it under a subfolder

#

yes the upload was successful

#

also, I had a connect-src error before, when i didnt have the endpoint/folder there, the request failed even without a random header on it

#

so I don't think that's it

tardy moss Jul 13, 2023, 7:36 AM

#

Can you remove the Example header and use Stripe-Signature instead?

unreal thorn Jul 13, 2023, 7:37 AM

#

done, it is still the same issue

#

would it help if i send the exact curl request?

tardy moss Jul 13, 2023, 7:39 AM

#

Can you try increment the version number in stripe-app.json and upload it again?

unreal thorn Jul 13, 2023, 7:39 AM

#

yes

#

tardy moss Jul 13, 2023, 7:40 AM

#

Still the same error?

unreal thorn Jul 13, 2023, 7:40 AM

#

give me a sec, seem to be having a different isuee

#

#

weird, it gets past this error when i do stripe apps start

#

but when i do stripe apps upload this is a new error and nothing is loading

#

tardy moss Jul 13, 2023, 7:45 AM

#

You mean you get error in browser console when running stripe apps upload ?

unreal thorn Jul 13, 2023, 7:45 AM

#

When I run the app via stripe app upload now nothing is loading in the UI of the drawer, but when I do stripe apps start, it loads the UI correctly, just fails on this web request

#

so it hits an error way earlier in the lifecycle on stripe app upload compared to stripe apps start

#

#

This is the same app, just with stripe apps start instead

tardy moss Jul 13, 2023, 7:47 AM

#

Close the browser, run stripe login to login to your Stripe account, and then run stripe apps start

unreal thorn Jul 13, 2023, 7:48 AM

#

#

ok now im getting the error i was getting before, but i will bet if i try stripe apps upload nothing will work

tardy moss Jul 13, 2023, 7:49 AM

#

So still the same CORS error?

unreal thorn Jul 13, 2023, 7:49 AM

#

yes

tardy moss Jul 13, 2023, 7:56 AM

#

That's very strange

#

Hmm, can you create new Stripe app and upload the same code?

unreal thorn Jul 13, 2023, 7:56 AM

#

ok - how do I delete the stripe app?

radiant roseBOT Jul 13, 2023, 7:59 AM

#

unreal thorn Jul 13, 2023, 8:04 AM

#

#

i made a second one but now my account is quite bugged

#

i cant delete the old one and i have two of the same app and am getting duplicate console logs

tardy moss Jul 13, 2023, 8:05 AM

#

https://dashboard.stripe.com/settings/apps can you uninstall the old one from here?

Stripe Login | Sign in to the Stripe Dashboard

Sign in to the Stripe Dashboard to manage business payments and operations in your account. Manage payments and refunds, respond to disputes and more.

unreal thorn Jul 13, 2023, 8:06 AM

#

yes that worked ty

#

do i really need this header on the request?

#

can i just pass in on the body?

clear bough Jul 13, 2023, 8:09 AM

#

No, needs to be in the header to verify the request in your backend

#

I suggest fixing your CORS configuration in your backend server to permit that header

unreal thorn Jul 13, 2023, 8:09 AM

#

I dont think it has anything to do w/ my server because when i make a request with a random header in it, it also is blocked

#

and the request succeeds from postman

unreal thorn Jul 13, 2023, 8:10 AM

#

clear bough No, needs to be in the header to verify the request in your backend

in my backend, can't i just look at the body instead?

clear bough Jul 13, 2023, 8:11 AM

#

unreal thorn I dont think it has anything to do w/ my server because when i make a request wi...

Ok, so what does your manifest.json look like and to what URL are you making the requests?

unreal thorn Jul 13, 2023, 8:12 AM

#

this is my stripe-app.json

{
  "id": "com.chargeblast.helloworld2",
  "version": "0.0.5",
  "name": "Helloworld2",
  "icon": "",
  "permissions": [
    {
      "permission": "event_read",
      "purpose": "Allows reading event data from users who have installed the app"
    },
    {
      "permission": "dispute_read",
      "purpose": "Allows reading event data from users who have installed the app"
    },
    {
      "permission": "dispute_write",
      "purpose": "Allows reading event data from users who have installed the app"
    },
    {
      "permission": "charge_read",
      "purpose": "Allows reading event data from users who have installed the app"
    },
    {
      "permission": "webhook_read",
      "purpose": "Allows reading event data from users who have installed the app"
    }
  ],
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.drawer.default",
        "component": "App"
      }
    ],
    "content_security_policy": {
      "connect-src": [
        "https://api.chargeblast.io/stripe/",
        "https://cartwheel.ngrok.io/stripe/"
      ],
      "image-src": [
        "https://images.example.com/one_image.jpg",
        "https://images.example.com/a_whole_subdirectory/"
      ],
      "purpose": "These URLs allow the app to contact [YOUR APP] for creating shipping details and loading images of shipping partner logos"
    }
  },
  "allowed_redirect_uris": [
    "https://api.chargeblast.io/callback_stripe",
    "https://cartwheel.ngrok.io/callback_stripe"
  ]
}

#

making requests to https://cartwheel.ngrok.io/stripe/stripe_test

#

I

#

I'm not sure what you mean by manifest.json - do you mean for my backend?

#

I'm not using node on the backend

clear bough Jul 13, 2023, 8:14 AM

#

unreal thorn I'm not sure what you mean by manifest.json - do you mean for my backend?

Sorry, that is the manifest you shared

unreal thorn Jul 13, 2023, 8:16 AM

#

  const sig = request.headers['stripe-signature'];
  // Retrieve user id and account id from the request body
  const payload = JSON.stringify({
    user_id: request.body['user_id'],
    account_id: request.body['account_id']
  });
  try {
    // Verify the payload and signature from the request with the app secret.
    stripe.webhooks.signature.verifyHeader(payload, sig, appSecret);

#

this is example code of what i should do on the backend

#

cant i just pull the signature from the body instead?

clear bough Jul 13, 2023, 8:16 AM

#

I suspect ngrok is the issue here

#

See: https://ngrok.com/docs/faq/#cors-with-http-basic-authentication

FAQ | ngrok documentation

#

It's probably blocking any of the non-standard HTTP headers (i.e. Stripe-Signature)

unreal thorn Jul 13, 2023, 8:22 AM

#

get same error when i try a different url

#

if i go right to the api instead of ngrok

#.stevenp