Connect the Billing Form

@jayair

Im working through the connection of the BillingForm component and I am receiving a Request failed with status code 500 Error alert.

When I look through the JavaScript console in my browser’s DevTools I see the following error in the console:

Blocked a frame with origin "http://localhost:3000" from accessing a frame with origin "https://js.stripe.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

It seems that since I am on the localhost dev environment, React, from the browser, as http is not letting me access the Stripe iFrame CardElement which is an https resource.

Looking at the logs in seed first for the deployment itself i see the following:

Dec 6, 11:30:54 AM
134.56.130.56 - - [06/Dec/2018:16:30:54 +0000] "OPTIONS /billing HTTP/1.1" 200 0 4d1eda09-f974-11e8-9295-355450434bf5
Dec 6, 11:30:54 AM
134.56.130.56 AROAJ52RLDUSSCLAVHIPS:CognitoIdentityCredentials AROAJ52RLDUSSCLAVHIPS:CognitoIdentityCredentials [06/Dec/2018:16:30:54 +0000] "POST /billing HTTP/1.1" 500 57 4d2f0625-f974-11e8-8a69-f1c7066f0985

So the app is definitely trying to access the billing resource at my serverless backend. Here are the logs for the Lamda function itself:

Dec 6, 11:30:54 AM
START RequestId: 4d3261df-f974-11e8-9619-05a5a6b29c97 Version: $LATEST
Dec 6, 11:30:54 AM
END RequestId: 4d3261df-f974-11e8-9619-05a5a6b29c97
Dec 6, 11:30:54 AM
Duration: 411.46 ms	Billed Duration: 500 ms Memory Size: 1024 MB	Max Memory Used: 32 MB

It looks from the console that React is blocking the exchange… Im not sure.

Here is an image of the error I am getting and the outputs to console:

Separately I can also see that the stripe frame is in fact able to capture the data entered by the user and the BillingForm is tokenizing the card correctly as can be seen by the output to the console showing the child attributes for the token created as can be seen below:

Ultimately it looks like I am not able to access my serverless /billing resource…

When I look at the header in the error message this is what it looks like and it says the Error is coming from CloudFront:

Summary
URL: https://laiwbpgoji.execute-api.us-east-1.amazonaws.com/prod/billing
Status: 500
Source: Network

Request
Accept: application/json, text/plain, */*
Content-Type: application/json; charset=UTF-8
Authorization: AWS4-HMAC-SHA256 Credential=ASIA6C4EOESDVI2T2TPU/20181206/us-east-1/execute-api/aws4_request, SignedHeaders=content-type;host;x-amz-date;x-amz-security-token, Signature=0318801002fcc8783b46e2db59e478520582023771332f48a57431983975c8cc
Origin: http://localhost:3000
Referer: http://localhost:3000/settings
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.1 Safari/605.1.15
x-amz-date: 20181206T203238Z
X-Amz-Security-Token: AgoGb3JpZ2luEFAaCXVzLWVhc3QtMSKAApJvNCOvPm8DuGI995rwSvOHHKkLgcsrVli97QmzqNCSfrBgMXMZjRW5Ihw/4LCZhNfswkMqoiWPvvQhM77z7jAQTc4OhaQCGi1XNuvOdnr2xvTJcxd+pBzk1xJ+B+iYTMyR1ghQ+8d8jkX1CKoq1QM2HQ5efL3woyX7zExEEDsWCG+IdM2cokQLJ1Seqxx9iVbvT9xHcyTH1OSZLUR95rf3/QTnOdd6KCQDlg6cy1xMymwCrPNxanwSKEZo/meK3Cdf23eDSmofjPrImGP3YpytCKPXXE/vag/TU5qArMOMtAonZGygJtgT1obWgNzRTZpPxtPwdwIun64qQnb6GCcqrwUI9v//////////ARAAGgw5NjgyNTYwMDUyNTUiDGaTpvDuc8mB+dnM0CqDBUbvAY1cTCq69CmD4lP7XIbvHT39N3GA9YuGyNb6CWzj97iDFp6gsxZPPyFrLFYauHw1AwIU/fXCs1NvG/uqzn5IAb7QK7dyZvu7XQypKNVpqw2zaj4xNzNB8T3t3I5m5gKPRsSKDEygRC6t3yAXTAjiXom/9ZIBXkcMxlJS4w2wEHghymG101O+sVdLHQS+SHxf7nDNxqvidebmXCpQ0jPzTkalfB/emcHxiERyDRUcB7qypoYhypcYV6wCkzhshE1aljRvF47ucvKrDjpId5IqOdnaF/QJhHtk8cxwlCVHGbx1CsJHiBNRPXXxmt1IRGG+RPWr/wMaFdZKhLA5OKKCvSkol4Pw5roMHPsSZQAsre/20y058GdeFmi8u8Eip8as27gG9AZt+d7MpXSbLvCmphqQCyGZuFL7Hz7aTNLMAvRMtbU2YEhR+uTqBLeY6xWhGpsoncuSU18uajAtWEb493tjmNcmsA9VVnUbkBO6nfZpWgmhT1ODqUwcgsbwTYEGv6OGFN5Tmt7qrHrhXnGgH/2muFAmiOV4H3AZFyodCdkQSDoY3DI3NWFcYbMQCr6m0YOvRv7SRUEfwzFyf61b8eYadOP41M68FTWgRruCtcwNKrw80RXzDaEU/FDwZVx4aZJ5WhDX+8E6NdqPD8Dm07DMvxCIywsuupfgcOUkCBhvtJCwSCDelsatFwT76ygFxpFOJoK5quEsnMGfzRCHW6+ykhMikWybQ3ikzOtZqqW60JHQGN75Q3wZrn/or5gZ3A+KoXgZrW0dC5W+ni1jstPw/QA8OL3MeOD42uX0feBJytzBqD+g6xmu5K8ZCPkz2imUQdbHRUzardXvZdTBe+Aw0Y6m4AU=

Response
Access-Control-Allow-Credentials: true
Content-Type: application/json
Via: 1.1 044b06becff164c5ab784f66cdbee17d.cloudfront.net (CloudFront)
Date: Thu, 06 Dec 2018 20:32:39 GMT
Content-Length: 57
Access-Control-Allow-Origin: *
x-cache: Error from cloudfront
x-amzn-requestid: 12986d0d-f996-11e8-8a8e-3118299295ca
x-amz-apigw-id: RgIYDH0qoAMFbvA=
x-amzn-trace-id: Root=1-5c098766-275504973c96e8752839b698;Sampled=0
x-amz-cf-id: x34o2HCNEwcQ_nTlA06Li8sab2pxYQEsrCyqQYCuhqSNconnvki04w==

Request Data
MIME Type: application/json
Encoding: UTF-8
Request Data: 

Here is the request object that is sent with the request and it too looks correct as it is holding the data that the backend /billing API is expecting:

{"txnQty":"1","txnType":"SubscriptionFee","source":"tok_1DeTWULcSK7HST3BCK1k6WrJ"}

It looks like since my localhost is on http its not letting me access the endpoint correctly. Not sure why AWS is preventing this since I have my CORS Policy set as per specs and all of the other endpoints work fine from http

Not really sure what is wrong here, and I could use some help, what else can I look for to pinpoint this error?

Thanks again!

@jayair This is the thread I needed some help with please.

Yeah this is a browser policy. You can run your localhost through HTTPS. We do this in one of our other Extra Credit chapters. You can set the following option while starting your Create React App.

Awesome! thanks so much. Im assuming ill have to npm start again according to the stage I’m on to get it going correct?

Also should I remove this to deploy to production on AWS? or can I keep it as is?

Thanks again I really appreciate the help, I’ve been stuck on this one for quite a bit.

1 Like

Yeah npm start again. Here is the doc on it https://facebook.github.io/create-react-app/docs/using-https-in-development.

Deployment should not be affected by the flag, it’s only for local.

@jayair

That didn’t work. I get an https:// on local host now but when I enter data into the Stripe CardElement fields I get the following error in the console:

Blocked a frame with origin "https://localhost:3000" from accessing a frame with origin "https://js.stripe.com". Protocols, domains, and ports must match.

I also get this error showing I am not accessing the /billing resource:

Furthermore when I look at the headers in the response it says I get:

x-cache: Error from cloudfront

Not sure what to do here as I have it all as specified on docs.

Any suggestions as to how to approach?

The error still has http in it (or at least the screenshot does). Has it been setup properly?

Yeah sorry I just reused an old screenshot. Here is the updated screenshot asking for the ports to match now also:

@jayair

So the 500 error is different from the blocked origin error. And it appears as though the blocked origin error isn’t preventing the users from making the purchase. 500 errors are thrown by our own code in the Lambda function and you should be able to debug them using a simple console.log.

@jayair

Here is a picture of my /billing lambda function in my billing.js file:

I have been trying to figure out how to console.log those lambda’s but it’s not clear how to get them to print to the node console. As you can see aslant doesn’t accept them as valid syntax in the lambda itself.

Also, I know the request is sending the correct info. When I look at the request object being sent, in the developer tools I can see that it is being passed properly as such:

{"txnQty":"1","txnType":"SubscriptionFee","source":"tok_1DeTWULcSK7HST3BCK1k6WrJ"}

I am generating a token as needed by Stripe and I am getting the data to the backend as needed. Where can I put the console.log methods so I can get meaning full feedback from the service on the node console.

Thanks again.

Any clues on how to get the console.log working on the back end?

@jayair

Really weird thing happening. When I run npm start to test the /dev/billing endpoint I get the 500 error.

However when I run REACT_APP_STAGE=prod npm start to test the /prod/billing endpoint I get a Status 200: OK response…

Any ideas why this would happen when everything is the same on both environments???

Basically it has worked all along just not in dev…

UPDATE:

This has been resolved. It seems like there was an issue with deployment in SEED that is now synchronized correctly. I think it just took some time for the deployment to propagate across all environments.

Thank you again @jayair for the help.

1 Like

Hello Friends,

I had been working very hard in these tutorials (part 1 and part 2) but I have a question:

Anyone knows if I can convert the client project in app? I wish to publish an app in the Google and Apple Store.

Thank you for your help!

I’m not sure what you mean by convert. But I would look into using React Native for that maybe?

I keep getting a message that the API is not configured when going to any section which tries to hit the API, I am able to authenticate but not see the list of messages or create a message from the web client.

I didn’t really change the Amplify config in index.js

import config from "./config";
Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REGION,
    userPoolId: config.cognito.USER_POOL_ID,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.APP_CLIENT_ID
  },
  Storage: {
    region: config.s3.REGION,
    bucket: config.s3.BUCKET,
    identityPoolId: config.cognito.IDENTITY_POOL_ID
  },
  API: {
    endpoints: [
      {
        region: config.apiGateway.REGION,
        name: "notes",
        endpoint: config.apiGateway.URL
      },
    ]
  }
});

And the config.js the only thing I changed was the values of the bucket, region, endpoint URL, etc

Any ideas? Thanks!

Have you tested your APIs on their own? https://serverless-stack.com/chapters/test-the-apis.html

Yeah, I’ve done that part, I was able to create a note on both, staging and prod, I’m also able to log in through the web app, but for some reason it fails when trying to fetch the notes…

return API.get(“notes”, “/notes”);

I checked the Amplify JS library version and it’s the same as in the repo (I cloned it from Github)

Solved the problem, I had a different package-lock.json because I had to fix some vulnerabilities, it updated the aws amplify package and that version broke the implementation, I went back and did npm install again and it’s now fixed but it brought back the vulnerabilities. Any ideas on this?

When I add this line to the top of my index.html

and I navigate to the settings page, I get an error on my localhost:3000 in Google Chrome on Mac OS:

Unhandled Rejection (Error): A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See react-crossorigin-error for more information.

App.componentDidMount

src/App.js:30

this.setState({ isAuthenticating: false });

I don’t think the line above has anything to do with it.

My billing API tests fine with the mock event, I believe I have cors:true in all my methods in the serverless.yml file, I believe I have CORS options enabled in both the s3 Buckets hosting my front end and backend. I tried running “HTTPS=true npm start” and that didn’t help either.

When I remove the line from index.html:
Error: Please load Stripe.js (https://js.stripe.com/v3/) on this page to use react-stripe-elements. If Stripe.js isn’t available yet (it’s loading asynchronously, or you’re using server-side rendering), see react-stripe-elements#advanced-integrations

I hope it’s something simple and obvious that I missed.

I think I got it working.

I ran google chrome without CORS protection enabled:

And I was able to get a better error message. It told me I was using my secret stripe key instead of my publishable key. Oops.
I switched from the sk key to the pk key, and the billing form appeared on the settings page.

Thanks for your hard work on the site, I’m really enjoying learning through it.