Why do my session details in the stripe webhook show as undefined?

During the development of my stripe checkout session, I encountered an issue where I can successfully send information to my webhook and print out all the session details, but I am unable to access individual pieces of information. Whenever I try to access a specific line to save it in my backend using prisma, the information appears as undefined when I console.log it. It's puzzling that I can see the entire session but not the specific details. Can anyone point out what I might be doing wrong and how I can access the individual data in my Next.js program?

Here is a snippet of my webhook code

import Stripe from "stripe";
import { stripe } from "@/lib/stripe";
import { headers } from "next/headers";
import { NextResponse } from "next/server";
import prisma from "@/lib/db/prisma";
import { OrderItem } from "@prisma/client";
import { createCart, getCart } from "@/lib/db/cart";
import { revalidatePath } from "next/cache";

... (rest of the code snippet)

When I log the entire session object, it appears as below:

{
  ... (session details)
}

The issue arises when I attempt to access a specific information like

console.log(session.shipping_details?.address?.state);

which gives an undefined output. Additionally, I noticed that when trying to access keys within the session object, the autocomplete feature does not display basic shipping properties; instead, it only shows shipping_details, which adds to the confusion. While I can access top-level keys like session.created, deeper nested keys do not seem to work as expected. I have exhaustively console.logged various possibilities and referred to the documentation without finding a solution. Any insights would be greatly appreciated.

Answer №1

charge.succeeded event pertains to a Charge object; however, your code mistakenly associates it with a Checkout Session object.

session.shipping_details.address.state
is only accessible through the Checkout Session object, not the Charge object. This field is not supposed to be available. To retrieve the state in the shipping address within the Charge object, your code needs to:

  1. Map event.data.object to the Charge object:
    const charge = event.data.object as Stripe.Charge;
    
  2. Access the shipping field based on the Charge object specifications:
    console.log(charge.shipping?.address?.state);
    

The problem lies in incorrectly mapping the object to a TypeScript object type and not retrieving the fields properly. The system should ensure that event.data.object is correctly mapped to the appropriate object type.

If you are interested in Checkout Session events, you should focus on checkout.session.* events like checkout.session.completed instead of charge.succeeded event.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preserve user-inputted text from jQuery within a div container

With the help of the knowledgeable individuals here, I successfully created a prototype to address an issue I had encountered. The problem involved using a textbox input with a password requirement to update an HTML element. Although everything is functio ...

Utilizing Jquery select2 to enhance user experience by organizing JSON data with optgroup and

Currently, I am working with select2 in conjunction with spring mvc. The data I need to display is retrieved from my controller and should be displayed as options. However, I would like these options to be grouped within optgroups while also incorporating ...

Tips for eliminating one or multiple spaces preceding text in an input field

I implemented input field validation to detect empty fields, but then I discovered that someone could enter white space and still submit the form. Can anyone assist me in removing white space before text while still allowing space in the middle of the text ...

Encountered a TypeError: The super expression should be defined as null or a function, not undefined in a React application

Contents of package.json { "name": "react_playlist", "version": "1.0.0", "description": "All course files for the React tutorial playlist on YouTube by Net Ninja", "main": "index.js", "scripts": { "test": "echo \"Error: no test specifie ...

Creating repeatable texture patterns in Three.js

Hello, I have developed a basic renderer for my 3D objects that are generated using PHP. While I am able to successfully render all the objects, I am facing some major issues with textures. Currently, the texture I am using is sized at 512x512 pixels. I ...

Create a script that ensures my website can be set as the homepage on any internet browser

I am currently in search of a way to prompt users on my website to set it as their homepage. Upon clicking "Yes," I would like to execute a script that will automatically make my website the user's browser homepage. I have come across a Similar Thread ...

Tips for keeping several buttons in the spotlight: HTML/CSS/JS

Looking for a solution to keep multiple buttons toggled on? I'm not very familiar with JavaScript, but I know that adding a class on click won't work if there's already a class set. Maybe giving the element an ID could be a possible solution ...

Invoking AngularJS Function from Login Callback Script

Just getting started with angularjs and I have a logincallback function that is used for external login. This function returns the returnUrl, closes the externallogin pop up, and redirects back to the main page. function loginCallback(success, returnUrl) ...

AWS Amplify is failing to display i18n translations on dynamic pages within Next.js (directory structure)

Currently experimenting with the next-i18next package within a Nextjs project. Encountering an issue specifically on dynamic pages like: /blogs/[id], where i18n seems to struggle to translate the content properly, displaying keys rather than actual transla ...

Maintain fullcalendar event filtering across multiple renderings

I currently have a fullcalendar that initially displays all events. I am using a select dropdown to filter the events, which works well. However, when the calendar re-renders after moving to the next month, it shows all events again. Here is my calendar in ...

Enhance your data retrieval from XPATH using Javascript

Here is the layout of an HTML template I am working with: <div class="item"> <span class="light">Date</span> <a class="link" href="">2018</a> (4pop) </div> <div class="item"> <span class="light">From</sp ...

Guide on modifying values using both input fields and buttons at the same time

I am facing an issue with my input field that is designed to accept numbers. I want the value to be changed both via keyboard input and buttons. The buttons are functioning correctly unless I try to use keyboard input as well. For instance, if I enter 10 ...

Cannot use Object.keys function in AngularJS

For my UI.Bootstrap accordion, I have set up the heading as follows: <accordion-group ng=repeat="(cname, stations) in byClient"> <accordion-heading> {{ cname }} <span class="pull-right"> {{ Object.keys(stations).length }} Sta ...

How can you use a selector to filter Cheerio objects within an `each` loop?

As I work on parsing a basic webpage using Cheerio, I began to wonder about the possibilities at hand: Consider a content structure like this: <tr class="human"> <td class="event"><a>event1</a></td> <td class="nam ...

Transmit responses from PHP script

I am in the process of creating a signup form where, upon clicking the submit button, all form data is sent to a PHP file for validation. My goal is to display an error message next to each input field if there are multiple errors. How can I achieve this ...

Is it a Mozilla Firefox glitch or something else?

After writing the code, I noticed a bug in Firefox and a small bug in Chrome. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

The issue of `Console.log` displaying as undefined arises after subscribing to a provider in Ionic3

In the process of implementing the Spotify api into my Ionic 3 app, I encountered an issue where the data retrieved appears as undefined when attempting to log it. Let me share some code and delve deeper into the problem. Here is the function getData() tha ...

Visibility of Code in AngularJS

After inspecting the source code of a website built with Angular today, I came across a snippet that made me ponder whether it's advisable to have such elements visible to everyone. ul class="nav-account desktop-only" ng-show="!User.isAuthenticated" ...

A different approach to making ajax requests

I'm currently conducting some experiments involving AJAX calls using pure JavaScript, without relying on JQuery. I am curious if it's possible to populate a DIV element in the following way: <script type="text/javascript"> function call_t ...

Best practices for structuring npm scripts and multiple webpack configurations

My project consists of multiple dashboards, and I've decided to create separate scripts in my package.json for each one. Building all the dashboards during development when you only need to work on one can be time-consuming. So, I discovered that it&a ...