Connect the Billing Form

@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?

1 Like

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.

1 Like

I think for their dependencies, I would wait for them to fix it. Or post over on their GitHub page to update it.

Hey guys, when I submit my test card for a purchase I get thrown a Network Error. I’m able to submit a mock request through billing-event.json just fine. How do I check logs to verify what the error is? Also this is what the console looks like, it seems the link should be to /prod/billing but is instead directing to /prodbilling, where might I fix this path?

I’m not getting any Log Streams to show in /aws/lambda/notes-app-api-prod-billing.
As my screenshot shows it seems the path is missing a forward-slash, how do I ensure this is getting set properly? My billing path in serverless.yml is set correctly:

billing:
# Defines an HTTP API endpoint that calls the main function in billing.js
# - path: url path is /billing
# - method: POST request
handler: billing.main
events:
- http:
path: billing
method: post
cors: true
authorizer: aws_iam

Oh my goodness. Such a silly mistake.

function billUser(details) {
    return API.post("notes", "/billing", {
        body: details
    });
}

My PATH was set incorrectly, without the forward slash. :sleeping:

1 Like

Glad you figure it out.

Hello,

I have a problem when filling card details and clicking purchase.

Thanks in advance

Solved it. Had a typo in a public key code :expressionless:

1 Like

Hello @jayair, i am getting a “Error: Request failed with status code 502” see the console log below too. Can you point me to what i am doing wrong

Do you get this error when testing locally?