Connect the Billing Form

lopezdp · December 7, 2018, 1:46am

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.

jdccr · March 15, 2019, 11:16pm

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!

jayair · March 24, 2019, 7:31pm

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

fcastellanos · September 12, 2019, 6:44am

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!

jayair · September 15, 2019, 12:38am

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

fcastellanos · September 17, 2019, 4:39am

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)

fcastellanos · September 18, 2019, 2:16am

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?

andre · September 18, 2019, 4:47am

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.

andre · September 18, 2019, 6:49am

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.

jayair · September 28, 2019, 6:25pm

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

hai-der · November 19, 2019, 9:34pm

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?

hai-der · November 21, 2019, 7:45pm

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

hai-der · November 21, 2019, 10:37pm

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.

jayair · December 16, 2019, 1:12am

Glad you figure it out.

mnensa · February 3, 2020, 12:25pm

Hello,

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

Thanks in advance

mnensa · February 3, 2020, 12:55pm

Solved it. Had a typo in a public key code

kpose · February 7, 2020, 8:04am

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

jayair · February 10, 2020, 7:19pm

Do you get this error when testing locally?

AntonioUlatina · May 19, 2020, 7:08am

Original code taken from the tutorial:

My solution(Not sure if this was the correct solution)

While making this post I found out that if I insert a number of notes higher than my amount of notes created I get a 500 error

jayair · May 30, 2020, 7:18pm

You shouldn’t have to change the API paths. There might be something wrong with your configs.

For the number of notes, you only get this error for specific number of notes?

Because there’s no code related to that:

github.com

AnomalyInnovations/serverless-stack-demo-api/blob/master/billing.js

import stripePackage from "stripe";
import handler from "./libs/handler-lib";
import { calculateCost } from "./libs/billing-lib";

export const main = handler(async (event, context) => {
  const { storage, source } = JSON.parse(event.body);
  const amount = calculateCost(storage);
  const description = "Scratch charge";

  // Load our secret key from the  environment variables
  const stripe = stripePackage(process.env.stripeSecretKey);

  await stripe.charges.create({
    source,
    amount,
    description,
    currency: "usd"
  });
  return { status: true };
});

Topic		Replies	Views
Testing the Billing API Chapter Comments	1	546	November 30, 2018
Test the Billing API Chapter Comments	25	3385	May 30, 2021
Add an API to Handle Billing Chapter Comments	17	1588	June 26, 2023
Testing Billing API Issue Chapter Comments	1	475	May 31, 2020
Comments for Test the APIs Chapter Comments	362	22604	May 28, 2021

Connect the Billing Form

Related Topics