API name is invalid.

[zayeemZaki]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

REST API

Amplify Categories

function, api

Environment information

# Put output below this line
Need to install the following packages:
envinfo@7.11.0
Ok to proceed? (y)

  System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 2.26 GB / 7.83 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.77)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @aws-amplify/api: ^6.0.5 => 6.0.7
    @aws-amplify/api/internals:  undefined ()
    @aws-amplify/api/server:  undefined ()
    @aws-amplify/core: ^6.0.5 => 6.0.7
    @aws-amplify/core/internals/adapter-core:  undefined ()
    @aws-amplify/core/internals/aws-client-utils:  undefined ()
    @aws-amplify/core/internals/aws-client-utils/composers:  undefined ()
    @aws-amplify/core/internals/aws-clients/cognitoIdentity:  undefined ()
    @aws-amplify/core/internals/aws-clients/pinpoint:  undefined ()
    @aws-amplify/core/internals/providers/pinpoint:  undefined ()
    @aws-amplify/core/internals/utils:  undefined ()
    @aws-amplify/core/server:  undefined ()
    @aws-amplify/ui-react: ^6.0.3 => 6.0.3
    @aws-amplify/ui-react-internal:  undefined ()
    @stripe/react-stripe-js: ^2.3.2 => 2.3.2
    @stripe/stripe-js: ^2.2.0 => 2.2.0
    @testing-library/jest-dom: ^5.17.0 => 5.17.0
    @testing-library/react: ^13.4.0 => 13.4.0
    @testing-library/user-event: ^13.5.0 => 13.5.0
    aws-amplify: ^6.0.5 => 6.0.7
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    axios: ^1.6.2 => 1.6.2
    cors: ^2.8.5 => 2.8.5
    dotenv: ^16.3.1 => 16.3.1 (10.0.0)
    express: ^4.18.2 => 4.18.2
    nodemon: ^3.0.1 => 3.0.1
    npm-run-all: ^4.1.5 => 4.1.5
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    react-icons: ^4.11.0 => 4.11.0
    react-router-dom: ^6.19.0 => 6.19.0
    react-scripts: ^5.0.1 => 5.0.1
    run-all: ^1.0.1 => 1.0.1
    stripe: ^14.5.0 => 14.5.0
    web-vitals: ^2.1.4 => 2.1.4
  npmGlobalPackages:
    @aws-amplify/cli: 12.10.0
    create-react-app: 5.0.1
    create: 0.0.2
    nodemon: 3.0.1
    npm-run-all: 4.1.5
    react-app: 1.1.2
    react-scripts: 5.0.1

Describe the bug

I am trying to send request to stripe using Rest Api and lambda but when I click on checkout button it says ApiName is invalid even though the apiName is correct

Expected behavior

After clicking on checkout button, I want it to send request to Rest API which should call amplify lambda funciton and load stripe checkout page to display back to user

Reproduction steps

By clicking on checkout button.

Code Snippet

// Put your code below this line.

//handleCheckOut is called when user clicks on checkout button

  const handleCheckOut = async () => {
    try {
      const stripe = await stripePromise;
  
      const response = await post('stripeAPI', '/checkout', {
        body: { cart },
      });

      console.log(response);
  
      const { sessionId } = response;
  
      // Redirect to Stripe Checkout
      const { error: stripeError } = await stripe.redirectToCheckout({
        sessionId,
      });
  
      if (stripeError) {
        console.error(stripeError);
      }
    } 
    catch (apiError) {
      console.error(apiError);
    }
  };

//Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Amplify } from "aws-amplify";
import amplifyconfig from './amplifyconfiguration.json';
Amplify.configure(amplifyconfig);

const existingConfig = Amplify.getConfig();
Amplify.configure({
  ...existingConfig,
  API: {
    ...existingConfig.API,
    REST: {
      ...existingConfig.API?.REST,
      'stripeAPI': {
        endpoint: 'https://sapsmxfq24.execute-api.us-east-1.amazonaws.com/dev',
        region: 'us-east-1'
      }
    }
  },
});

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

aws-exports.js

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cloud_logic_custom": [
        {
            "name": "stripeAPI",
            "endpoint": "https://sapsmxfq24.execute-api.us-east-1.amazonaws.com/dev",
            "region": "us-east-1"
        }
    ]
};

export default awsmobile;

[chrisbonifacio]

Hi @zayeemZaki it looks like you're using Amplify v6. Can you try changing your post request's syntax to this?

const response = await post({
        apiName: "stripeAPI",
        path: "/checkout",
        options: {
          body: { cart },
        },
      });

It looks like you have a a lot of scoped amplify packages installed, such as @aws-amplify/api.

Having @aws-amplify/ui-react installed separately is fine.

You should only need aws-amplify installed, and you can import the functions you need from its subdirectories like so:

import { post } from `aws-amplify/api`

[zayeemZaki]

@chrisbonifacio Thank you that fixed the apiName invalid error but now I'm getting two errors:
NoCredentials: Credentials should not be empty.
stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId.

[chrisbonifacio]

That might be due to an existing bug regarding unrestricted REST APIs. If yours is unrestricted, you can try adding an arbitrary Authorization header until the fix is published.

const response = await post({
        apiName: "stripeAPI",
        path: "/checkout",
        options: {
          headers: {
            Authorization: 'test'
          },
          body: { 
            cart
          },
        },
      });

If your API is not restricted then Amplify should be setting those headers automatically or you may need to pass the credentials your API expects.

[zayeemZaki]

Thank you it fixed NoCredentials error but I'm still getting :
stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId.
and My Rest API is not restricted.

This is my lambda function:

exports.handler = async (event) => {
  const { paymentMethodId, cart } = JSON.parse(event.body);
  console.log("Hello")

  // Create a Checkout Session
  const session = await stripe.checkout.sessions.create({
    payment_method: paymentMethodId,
    line_items: cart.map((item) => ({
      price_data: {
        currency: 'usd',
        product_data: {
          name: item.title,
        },
        unit_amount: parseFloat(item.price.replace('$', '')) * 100, // amount in cents
      },
      quantity: item.quantity,
    })),
    mode: 'payment',
  });

  return {
    statusCode: 200,
    body: JSON.stringify({ sessionId: session.id }),
  };
};

[chrisbonifacio]

Okay so one last thing, to get the data from your API's response, use this syntax

const response = await post({
        apiName: "stripeAPI",
        path: "/checkout",
        options: {
          headers: {
            Authorization: 'test'
          },
          body: { 
            cart
          },
        },
      }).response

const { sessionId } = await response.body.json()

Here are our docs on making REST API calls and accessing the response payload

https://docs.amplify.aws/react/build-a-backend/restapi/fetch-data/#accessing-response-payload

[zayeemZaki]

Thank you for your help, I figured it out!