ReferenceError: ClientSecret Is Not Defined In Stripe

I am trying to integrate the Payment Request Button in the stripe. For that, I follow the document(https://stripe.com/docs/stripe-js/elements/payment-request-button#complete-payment-intents). I got the button in my chrome. At the time of payment completion

paymentRequest.on('paymentmethod', function(ev) {
  stripe.confirmPaymentIntent(clientSecret, {
    payment_method: ev.paymentMethod.id,
  }).then(function(confirmResult) {
    if (confirmResult.error) {
      console.log("error")
      ev.complete('fail');
    } else {
      ev.complete('success');
      stripe.handleCardPayment(clientSecret).then(function(result) {
        if (result.error) {
            console.log(result.error)
        } else {
            console.log("Success")
        }
      });
    }
  });
});

I got an error clientSecret is not defined. I have a doubt from where can I get the client secret

paymentmethod API did not provide the clientSecret

While I call the source API I got the clientSecret

But can't able to run both source and paymentMethod API

Please guide me on the proper way to finish the integration. Thanks in advance

From Stripe Docs

clientSecret: The client secret of this PaymentIntent. Used for client-side retrieval using a publishable key. The client secret can be used to complete a payment from your frontend. It should not be stored, logged, embedded in URLs, or exposed to anyone other than the customer. Make sure that you have TLS enabled on any page that includes the client secret.

So clientSecret it's defined as property of paymentintent object.

paymentintent object (sample):

{
 "id": "pi_1FpUmEKZaRsxp2y4c9OPoTjM",
 "object": "payment_intent",
 "amount": 3000,
 "amount_capturable": 0,
   amount_received": 0,
 "application": null,
 "application_fee_amount": null,
 "canceled_at": null,
 "cancellation_reason": null,
 "capture_method": "automatic",
 "charges": {
     "object": "list",
     "data": [],
     "has_more": false,
     "url": "/v1/charges?payment_intent=pi_1FpUmEKZaRsxp2y4c9OPoTjM"
 },
 "client_secret": "pi_1FpUmEKZaRsxp2y4c9OPoTjM_secret_tv9tsgAQbAlNRYqm8MAzmYPuE",
 "confirmation_method": "automatic",
 "created": 1576307458,
 "currency": "eur",
 "customer": null,
 "description": null,
 "invoice": null,
 "last_payment_error": null,
 "livemode": false,
 "metadata": {},
 "next_action": null,
 "on_behalf_of": null,
 "payment_method": null,
 "payment_method_options": {
      "card": {
      "installments": null,
      "request_three_d_secure": "automatic"
    }
 },
 "payment_method_types": [
      "card"
 ],
 "receipt_email": null,
 "review": null,
 "setup_future_usage": null,
 "shipping": null,
 "statement_descriptor": null,
 "statement_descriptor_suffix": null,
 "status": "requires_payment_method",
 "transfer_data": null,
 "transfer_group": null
 }

As step 2 in documentationyou can retrieve your clientSecret as paymentintent.client_secret. To do in your code use:

 const clientSecret  = paymentRequest.client_secret

If others are using php don't forget to use it as a string and not as variable:

submitButton.addEventListener('click', function(ev) {
    stripe.confirmCardPayment('<?php  echo ($intent->client_secret);?>', {
        payment_method: {card: card}
    }).then(function(result) {
        if (result.error) {
            // Show error to your customer (e.g., insufficient funds)
            console.log(result.error.message);
        } else {
            // The payment has been processed!
            if (result.paymentIntent.status === 'succeeded') {
            // Show a success message to your customer
            // There's a risk of the customer closing the window before callback
            // execution. Set up a webhook or plugin to listen for the
            // payment_intent.succeeded event that handles any business critical
            // post-payment actions.
            }
        }
    });
});