0

Estoy realizando un pequeño ecommerce y estoy utilizando Stripe como método de pago. Me quede trabado en la peticion ya que me arroja este error:

"You did not provide an API key. You need to provide your API key in the Authorization header, using Bearer auth (e.g. 'Authorization: Bearer YOUR_SECRET_KEY'). See https://stripe.com/docs/api#authentication for details, or we can help at https://support.stripe.com/."

Este es mi codigo:

Back:

const router = require("express").Router();
const stripe = require("stripe")(process.env.STRIPE_KEY);

router.post("/payment", (req, res) => {
  stripe.charges.create(
    {
      source: req.body.tokenId,
      amount: req.body.amount,
      currency: "usd",
    },
    (stripeErr, stripeRes) => {
      if (stripeErr) {
        res.status(500).json(stripeErr);
      } else {
        res.status(200).json(stripeRes);
      }
    }
  );
});

module.exports = router;

Front:

 const publicToken = "pk_test..."
  const secretKey = "sk_test_..."
  const cart = useSelector(state => state.cart)
  const navigate = useNavigate();

  const [stripeToken, setStripeToken] = useState(null)
  const onToken = (token) => {
    setStripeToken(token)
  }

  useEffect(() => {
    const makeRequest = async () => {
      try{
        const res = await userRequest.post("/checkout/payment",{
          tokenId: stripeToken.id,
          amount: 500,
        }, {headers: { 'Authorization': 'Bearer ' + publicToken }})
        navigate("/success", {data:res.data})
      } catch{}
    }
    stripeToken && makeRequest();
  }, [stripeToken, cart.total, navigate])

Intenté pasarle la autorización de mil maneras y me sigue arrojando el mismo error.

Alguna sugerencia?

Muchas gracias.

2
  • Ojo, no pongas tu secret key en el frontend! Solo la public key puede estar en el frontend, secret keys no debieran salir nunca del backend.
    – jlhonora
    Commented el 14 feb. 2023 a las 15:16
  • @Cesar-Andres-Abadia-Davila no destruyas la pregunta intentando responder. Para responder, está la zona de respuestas.
    – padaleiana
    Commented el 17 feb. 2023 a las 14:22

1 respuesta 1

0

debes usar el metodo que te provee la libreria @stripe/stripe-js llamado loadStripe:

const stripePromise = loadStripe(STRIPE_PUBLIC_KEY);

por lo general se recomienda que la public key que te provee stripe la uses en el frontend desde una variable de entorno.

Luego de ello debes usar el comoponente que viene desde @stripe/react-stripe-js y pasarle como propiedad la constante que alamcenó la ejecucion de loadStripe.

luego de allí debes encerrar tu formulario de compra dentro del componente asi:

<Elements stripe={stripePromise}>
  <Form/>
</Eelements>

luego dentro del componente utilizas el hook useStripe y useElements que viene desde @stripe/react-stripe-js y los inicializas dentro de tu componente como cualquier otro hook de react asi:

const Form = () =>{
  const elements = useElement()
  const stripe = useStripe()
}

luego desde el metodo que ejecutas para procesar la compra utilizas el metodo que viene dentro de la variable stripe que creaste en el paso anterior y deberia quedarte algo asi:

const handleSubmit = async ()=>{ 
  try{
    const { error, paymentMethod } = await stripe.createPaymentMethod({
    type: 'card',
    card: elements.getElement(CardNumberElement),
  });
  }catch(error){
    console.log(error)
  }
}

es importante que uses los componentes que te provee stripe para capturar el numero de tarjeta, en este caso usas para obtener el número de la tarjeta del usuario. Este componente lo poner en tu JSX. puedes leer la documentacion aqui: stripe

por ultimo en el fronted lo que debes hacer es validar que no exista un error en la respuesta de createPaymentMethod y si no la hay recoges la respuesta en paymentMethod y la mandas mediante axios o fetch al backend. En esa respuesta paymentMethod hay mucha informacion que te puede ser util como el id de la compra.

Luego pasas al Backend y y allí debes hacer uso de stripe primero instalandolo:

pnpm i stripe 
npm i stripe

Te creas un archivo de configuración e intancias estripe asi:

const stripe = new Stripe(env.STRIPE_KEY, { apiVersion: '2022-11-15' });

el primer parámetro es la secret key de tu cuenta en stripe y el segundo parámetro es un objeto que le dice a stripe con que api debe procesar la data. La última version al día de hoy es la de '2022-11-15'

luego de hacer esto debes ir al servicio que crees para procesar los pagos y hacer eso de la variable que creaste anteriormente instanciando stripe. Un ejemplo puede ser este:

 const { status: state, id: idPayment } = await stripe.paymentIntents.create({
    currency: 'USD',
    payment_method: id,
    amount
  });

En este caso el id es el mismo que te devuelve la consulta a stripe en el frontend. Revisa el objeto Payment_method y ahi lo encontraras.

como extra:

Si lo dejas así como te lo propongo y no tienes problemas con el amount en cuanto al formato que te pide stripe vas a encontrar en el dashboard de stripe la venta con un status "sin fianlizar" debido a que el enfoque que te propongo es para que luego de que hagas el "paymentIntents" y proceses tu base de datos exitosamente confirmes la orden asi:

const { status } = await stripe.paymentIntents.confirm(idPayment);

el idPayment es lo que te vuelve el paymentIntents si todo fue OK. lo usas para confirmar la orden posterior a hacer otros procesos que tu lógica de negocio necesite antes de confirmar la orden.

Si quieres confirmar la orden directamente en el paymentIntents debes pasarle otro campo de configuración al segundo parámetro te quedaría algo así:

 const { status: state, id: idPayment } = await stripe.paymentIntents.create({
    currency: 'USD',
    payment_method: id,
    amount
    confirm: true
  });

Eso es todo. Cheers!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.