joy048278 | Stripe Developers | Page 1

fathom tapirBOT Oct 10, 2023, 8:11 AM

#

lusty beacon Oct 10, 2023, 8:11 AM

#

Hello! What is the pi_xxx ID?

sharp ingot Oct 10, 2023, 8:12 AM

#

pi_1NzaxwJAJfZb9HEBwvSUVltu

#

Error message
"You cannot confirm this PaymentIntent because it's missing a payment method. You can either update the PaymentIntent with a payment method and then confirm it again, or confirm it again directly with a payment method."

lusty beacon Oct 10, 2023, 8:14 AM

#

Error seems pretty verbose to me. You're trying to con firm a PI without proving a payment_method

sharp ingot Oct 10, 2023, 8:16 AM

#

How to provide element in payment method

#

My ui element create code
async initializeStripe() {
debugger
let emailAddress = '';
const stripe = await loadStripe('pk_test_51BTUDGJAJfZb9HEBwDg86TN1KNprHjkfipXmEDMb0gSCassK5T3ZfxsAbcgKVmAIXF7oZ6ItlZZbXO6idTHE67IM007EwQ4uN3');
let elements;
// elements = stripe.elements({ clientSecret: 'pi_1Gt0BZ2eZvKYlo2Csy3fRI7j_secret_e22r74CaZwXbZK1ARYUkuv5AL' });
elements = stripe.elements({ clientSecret: this.secretCodeStrip, appearance: { theme: 'stripe', } });

// const linkAuthenticationElement = elements.create("linkAuthentication");
// linkAuthenticationElement.mount("#link-authentication-element");

// linkAuthenticationElement.on('change', (event: any) => {
//   emailAddress = event.value.email;
// });
const paymentElementOptions = {
  layout: "tabs",
};
// {
//   paymentMethodOrder: ['apple_pay', 'google_pay', 'card', 'klarna']
// }
const paymentElement = elements.create("payment", paymentElementOptions, { payment_Method: ['card'] });
paymentElement.mount("#payment-element");

}

lusty beacon Oct 10, 2023, 8:19 AM

#

Where's the code that calls confirmPayment?

sharp ingot Oct 10, 2023, 8:19 AM

#

Will share

#

async handleSubmit(event: any) {
console.log(event.target.value);

if (event.target.id === 'payment-form') {
  // Prevent the default form submission behavior
  event.preventDefault();
  this.setLoading(true);
  // this.checkStatus();
  this.checkStatus();

  const stripe = await loadStripe('pk_test_51BTUDGJAJfZb9HEBwDg86TN1KNprHjkfipXmEDMb0gSCassK5T3ZfxsAbcgKVmAIXF7oZ6ItlZZbXO6idTHE67IM007EwQ4uN3');

  const { error } = await stripe.confirmPayment(
    {
      elements: this.elements,
      clientSecret: this.secretCodeStrip,
      confirmParams: {
        return_url: 'https://example.com',
      }


    }
  );

  if (error.type === "card_error" || error.type === "validation_error") {
    alert()
    this.showMessage(error.message);
  } else {
    this.showMessage("An unexpected error occurred.");
  }

  this.setLoading(false);
}

}

lusty beacon Oct 10, 2023, 8:27 AM

#

My guess is your this.eleements var is not what you expect it to be. Can you log that value in your handleSubmit function?

#

Also, you seem to intialise an Elements group with a client secret and then also pass it on confirmation, which is a mix of 2 integration flows

#

If you're doing a non-deferred flow (i.e. create the intent before you render the Element) you can omit the the clientSecret param in confirmPayment

sharp ingot Oct 10, 2023, 8:31 AM

#

Ok

#

I am using below documentation .net and html htmlcode am using angular application

#

https://stripe.com/docs/payments/quickstart

Custom payment flow

Learn how to embed a custom Stripe payment form in your website or application. Build a checkout form with Elements to complete a payment using various payment methods.

lusty beacon Oct 10, 2023, 8:36 AM

#

Ok, great. But you can see the confirmPayment call there doesn't include a clientSecret parameter

sharp ingot Oct 10, 2023, 8:38 AM

#

Am try but facing console error

#

core.js:6498 ERROR Error: Uncaught (in promise): IntegrationError: stripe.confirmPayment(): expected either elements or clientSecret, but got neither.
IntegrationError: stripe.confirmPayment(): expected either elements or clientSecret, but got neither.

lusty beacon Oct 10, 2023, 8:41 AM

#

Yep, and as I stated your this.elements variable is likely undefined (so the parameter is being removed)

#

You need to figure out why that is

sharp ingot Oct 10, 2023, 8:44 AM

#

Ok

#

Element chang added below error happen
ERROR Error: Uncaught (in promise): IntegrationError: stripe.confirmPayment(): expected either elements or clientSecret, but got neither.
IntegrationError: stripe.confirmPayment(): expected either elements or clientSecret, but got neither

lusty beacon Oct 10, 2023, 8:55 AM

#

Inside of your handleSubmit function, before you call confirmPayment add this line:
console.log(this.elements)

#

And then share the output here

sharp ingot Oct 10, 2023, 8:56 AM

#

Ok

#

#

lusty beacon Oct 10, 2023, 9:31 AM

#

Hmm, are you able to upload your full code/project somewhere so we can reproduce the issue? It's very difficult to understand the problem without the full context of your application

sharp ingot Oct 10, 2023, 9:32 AM

#

Sure will share the code

#

This is my backend nodejs code
const express = require("express");
const app = express();
const cors = require("cors")
// This is a public sample test API key.
// Don’t submit any personally identifiable information in requests made with this key.
// Sign in to see your own test API key embedded in code samples.

// const corsOptions = {
// origin: function (origin, callback) {
// if (!origin || whitelist.indexOf(origin) !== -1) {
// callback(null, true)
// } else {
// callback(new Error("Not allowed by CORS"))
// }
// },
// credentials: true,
// }
app.use(cors())
// const stripe = require("stripe")('');

const stripe = require("stripe")('sk_test_tR3PYbcVNZZ796tH88S4VQ2u');
app.use(express.static("public"));
app.use(express.json());

const calculateOrderAmount = (items) => {
// Replace this constant with a calculation of the order's amount
// Calculate the order total on the server to prevent
// people from directly manipulating the amount on the client
return 1400;
};

app.post("/create-payment-intent", async (req, res) => {
const { amount } = req.body;
console.log(amount);
// Create a PaymentIntent with the order amount and currency
const paymentIntent = await stripe.paymentIntents.create({
// amount: calculateOrderAmount(items),
amount: 20,
currency: "usd",
payment_method_types:['card'],
// In the latest version of the API, specifying the automatic_payment_methods parameter is optional because Stripe enables its functionality by default.
// automatic_payment_methods: {
// enabled: true,
// },
});

res.send({
    clientSecret: paymentIntent.client_secret,
    data:paymentIntent
});

});

app.listen(4242, () => console.log("Node server listening on port 4242!"));

#

html
<form class="mt-2" id="payment-form" (submit)="handleSubmit($event)">

                        <div id="link-authentication-element">
                            <!--Stripe.js injects the Link Authentication Element-->
                        </div>
                        <div id="payment-element" #paymentElement>
                            <!-- Stripe.js will inject the card element here -->
                        </div>
                        <div>&nbsp;</div>

                        <!-- Add a checkbox for saving payment method -->
                        <div class="form-group">
                            <input type="checkbox" id="save-payment-method" />
                            <label for="save-payment-method">Save this card for future purchases</label>
                        </div>


                        <button id="submit" [disabled]="isLoading">
                            <div [hidden]="!isLoading" id="spinner" class="spinner"></div>
                            <span [hidden]="isLoading" id="button-text">Pay now</span>
                        </button>

                        <div #paymentContainer id="payment-message" [hidden]="!messageText">
                            {{ messageText }}
                        </div>

                    </form>

#

async initializeStripe() {
let emailAddress = '';
const stripe = await loadStripe('pk_test_51BTUDGJAJfZb9HEBwDg86TN1KNprHjkfipXmEDMb0gSCassK5T3ZfxsAbcgKVmAIXF7oZ6ItlZZbXO6idTHE67IM007EwQ4uN3');
let elements;
// elements = stripe.elements({ clientSecret: 'pi_1Gt0BZ2eZvKYlo2Csy3fRI7j_secret_e22r74CaZwXbZK1ARYUkuv5AL' });
elements = stripe.elements({ clientSecret: this.secretCodeStrip, appearance: { theme: 'stripe', } });

// const linkAuthenticationElement = elements.create("linkAuthentication");
// linkAuthenticationElement.mount("#link-authentication-element");

// linkAuthenticationElement.on('change', (event: any) => {
//   emailAddress = event.value.email;
// });
const paymentElementOptions = {
  layout: "tabs",
};
// {
//   paymentMethodOrder: ['apple_pay', 'google_pay', 'card', 'klarna']
// }
const paymentElement = elements.create("payment", paymentElementOptions, { paymentMethodOrder: ['card'] });
paymentElement.mount("#payment-element");

}
Element loading

#joy048278