CODEWITHSUNDEEP
firebasestripe-payments
Sanjay Verma
Sanjay Verma

Reputation: 1626

Stripe Checkout: Something went wrong

I'm trying to integrate Stripe checkout (one time payment) into my angular application (deployed on firebase, with server backend on firebase functions), but my checkout gets stuck on stripe checkout page:

Something went wrong
You might be having a network connection problem, or the payment provider cannot be reached at the moment.

enter image description here

Here is my firebase functions code:

import * as functions from 'firebase-functions';

export const createStripeSessionTest = functions.https.onRequest(async (request, response) => {
  const STRIPE_SECRET_KEY = functions.config().stripe.test.secret;

  await execute(request, response, STRIPE_SECRET_KEY);
});

const execute = async (request: any, response: any, stripeSecretKey: string) => {
  const body = JSON.parse(request.body);

  const STRIPE_PRICE_ID = body.priceId
  const session = await createStripeSession(body, stripeSecretKey, STRIPE_PRICE_ID);

  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Methods', '*');
  response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");

  response.send(session);
}

const createStripeSession = async (body: any, secretKey: string, priceId: string) => {

  const stripe = require('stripe')(secretKey);

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [{
      price: priceId,
      quantity: 1,
    }],
    mode: 'payment',
    success_url: body.success_url, //'https://example.com/success?session_id={CHECKOUT_SESSION_ID}',
    cancel_url: body.cancel_url, //'https://example.com/cancel',
  });

  return session;
}

I can confirm from firebase functions logs that I don't get any error there. Also, all the request parameters, e.g. priceId, are correctly populated (confirmed with console.log).

But I do see something on browser logs for stripe checkout page:

api.stripe.com/v1/payment_pages/cs_test_asdhfjkasfui32uhaisd:1 Failed to load resource: the server responded with a status of 401 ()

Any suggestions will be greatly appreciated. I've triple checked my keys and they all seem correctly configured.

Upvotes: 4

Views: 8433

Answers (4)

Paulo Ricardo
Paulo Ricardo

Reputation: 31

I solve this problem in NextJS using in .env NEXT_PUBLIC before the name of variable, and not use "" after =.

Upvotes: 3

Shamil Jamion
Shamil Jamion

Reputation: 206

I had the same issue and just needed to add the correct publishable key from https://dashboard.stripe.com/test/apikeys to get it to work.

Upvotes: 2

Octave
Octave

Reputation: 444

Stripe support said that a lot of these issue that are reported to them are indeed due to people using wrong publishableKey-secretKey combinations.

Yes, that is correct. When you get this screen, first thing is to check that you are using the appropriate secret/publishable keys.

Especially in a platform setup based on Connect, for which it is easy to use the platform key instead of the connected account key, or the other way around.

Upvotes: 4

Sanjay Verma
Sanjay Verma

Reputation: 1626

I managed to fix it. Turns out, I was using NgxStripe library to initialize stripe, and was using stripe-js library directly in the application to invoke the checkout process.

Due to this the stripePublishableKey was never seen by stripe-js, which led to this key mismatch issue. (Hence the 401 - unauthorized error).

Passing stripePublishableKey directly into loadStripe(..) method (on client side) fixed the issue:

loadStripe('pk_test_mystripekey').then(
  stripe => this.stripe = stripe
).then(
  () => this.createStripeSession()
)

Stripe support said that a lot of these issue that are reported to them are indeed due to people using wrong publishableKey-secretKey combinations.

Upvotes: 4

Related Questions