Почему выдает ошибку при POST запросе в Юкассу по API?

Question

[Alis_06]

Приветствую! В React Native(expo) пытаюсь создать платеж по API в юКассе, но приходит ошибка "[Unhandled promise rejection: TypeError: Network request failed]". Хотя, тот же запрос в Postman возвращает ответ с данными. Буду признателен за помощь. Уже неделю как застрял на этом...

Код страницы и запроса.

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View, StatusBar, Button } from "react-native";

export default function Rate() {
  const [data, setData] = useState([]);
  async function pay() {
    fetch("https://api.yookassa.ru/v3/payments", {
      method: "POST",
      headers: {
        Authorization:
          "Basic " +
          "OD***********Rlc3RfYnc3*********************M05pdmhGRGw4Skx**********************",
        idempotenceKey: "6f2cc4b0-e9ae-4108-90e9-c3b6722b02ad",
      },
      body: JSON.stringify({
        id: "35964144-1e6b-4d20-92e8-591752aecea6",
        amount: {
          value: "120.00",
          currency: "RUB",
        },
        description: "Заказ №7200",
        payment_method_data: {
          type: "bank_card",
          card: {
            number: "5555555555554477",
            expiry_month: "07",
            expiry_year: "2023",
            csc: "123",
            cardholder: "Dev",
          },
        },
        confirmation: {
          type: "redirect",
          return_url: "https://www.google.com/",
        },
        test: "true",
      }),
    })
      .then((res) => res.json())
      .then((data) => setpayData(data));
  }

  return (
    <View style={styles.container}>
      <Text>текст</Text>
      <Button title="Click" onPress={() => pay()} />
      <StatusBar />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Answer 1

[Антон Шаманов]

используй sdk если не можешь скопировать запрос без ошибок

curl https://api.yookassa.ru/v3/payments \
  -X POST \
  -u <Идентификатор магазина>:<Секретный ключ> \
  -H 'Idempotence-Key: <Ключ идемпотентности>' \
  -H 'Content-Type: application/json' \
  -d '{
        "amount": {
          "value": "2.00",
          "currency": "RUB"
        },
        "payment_method_data": {
          "type": "bank_card"
        },
        "confirmation": {
          "type": "redirect",
          "return_url": "https://www.merchant-website.com/return_url"
        },
        "description": "Заказ №72"
      }'

Comments

[Alis_06]

У них sdk неофициальное для node js. Но оно тоже выдает ошибку. Даже в get запросах(которые у меня работают) Проблема именно в POST запросе. Подскажите пожалуйста, в чем моя ошибка. Я пытаюсь именно по API сделать

[Антон Шаманов]

Alis_06, я тебе написал полную структуру запроса -u user -H headers -d data

[Alis_06]

Антон Шаманов, ты просто скинул код с офф сайта, который в данном контексте совсем не к месту. Более того, если я говорю что несколько дней мучаюсь над этим вопрос, то как минимум перелопатил весь офф сайт и форумы в поисках ответа. Если бы я хотел использовать SDK, то в вопросе написал бы, что хочу реализовать данный функционал через SDK, а не через API.

[Alis_06]

Проблему решил. Если кому-либо понадобится, то я передал запрос в fetch через константу. Прилагаю код ниже. Код ниже:

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View, StatusBar, Button } from "react-native";


export default function Rate() {
  const [data, setData] = useState([]);
  async function payment() {
    const requestOptions = {
      method: "POST",
      headers: {
        Authorization:
          "Basic ODg******************3Sy12U**********************pdmhGRG*******************6Zw==",
        "Content-Type": "application/json",
        "Idempotence-Key": "8bc1290d-19af-4e56-9b6a-e5cc434335d9",
      },
      body: JSON.stringify({
        id: "35964144-1e6b-4d20-92e8-591752aecea7",
        amount: {
          value: "120.00",
          currency: "RUB",
        },
        description: "Заказ №7200",
        payment_method_data: {
          type: "bank_card",
          card: {
            number: "5555555555554477",
            expiry_month: "07",
            expiry_year: "2023",
            csc: "123",
            cardholder: "Dev",
          },
        },
        confirmation: {
          type: "redirect",
          return_url: "https://www.google.com/",
        },
        test: true,
      }),
    };
    fetch("https://api.yookassa.ru/v3/payments", requestOptions)
      .then((response) => response.json())
      .then((data) => console.log(data));
  }

  return (
    <View style={styles.container}>
      <Text>текст</Text>
      <Button title="Click" onPress={payment} />
      <StatusBar />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

[Антон Шаманов]

Alis_06, sdk использует то же api, запос корректный - мой плагин оплаты работает без проблем

[Антон Шаманов]

Alis_06, ты как-то забыл упомянуть про то что в начальном запросе твоем были другие заголовки)