React Native 中的 PayPal 集成和支付状态

Posted 2023-02-22

【中文标题】React Native 中的 PayPal 集成和支付状态

【英文标题】：PayPal Integration and payment status in react native

【发布时间】：2021-05-25 10:09:11

【问题描述】：

我正在尝试将 PayPal 作为一种支付方式集成到我的 react-native 应用程序中。我通过点击https://api.sandbox.paypal.com/v1/oauth2/token API 获得了访问令牌，但是当我尝试将访问令牌传递给支付 API 时，https://api.sandbox.paypal.com/v1/payments/payment 得到了状态码 400 或 500 的响应，两者都不同。

我的代码是

  let currency = '100 INR'
currency.replace("INR", "")

const dataDetail = 
    "intent": "sale",
    "payer": 
        "payment_method": "paypal"
    ,
    "transactions": [
        "amount": 
            "total": currency,
            "currency": "INR",
            "details": 
                "subtotal": currency,
                "tax": "0",
                "shipping": "0",
                "handling_fee": "0",
                "shipping_discount": "0",
                "insurance": "0"
            
        
    ],
    "redirect_urls": 
        "return_url": "https://example.com",
        "cancel_url": "https://example.com"
    

fetch('https://api.sandbox.paypal.com/v1/oauth2/token',  
    method: 'POST',
    headers:  
         'Accept': 'application/json', 
         'Accept-Language': 'en_US',
         'Content-Type': 'application/x-www-form-urlencoded',
         'Authorization': 'Basic ' + btoa('AUrtJxcHfMUlDjHgV2FHMOUnzMkUeu86_km7h67uEHzH5b5RN7Vo-q8AYPtcdz7Iaioc46xW0H9JQZmT:EMbbJ-YqQLT6liuPtJURq2pAgh9WuUTDKmV355_VIeADst0BMlnUNKiHVLK7itCyZFXrEQOex9p93WO8')
    ,
    body: 'grant_type=client_credentials'
).then(response => response.json())
  .then(async (data) => 
    console.log(data.access_token)
    this.setState(accessToken:data.access_token)
    // console.log(JSON.stringify(dataDetail))
    fetch ('https://api.sandbox.paypal.com/v1/payments/payment',
    
        method: 'POST', 
        headers: 
            'Content-Type': 'application/json',
            'Authorization': 'Bearer '+(this.state.accessToken)
        ,
        body:dataDetail
    
)
    .then(response => 
        console.log('response=====',response)
        // const  id, links  = response.data
        // const approvalUrl = links.find(data => data.rel == "approval_url")

        // this.setState(
        //     paymentId: id,
        //     approvalUrl: approvalUrl.href
        // )
    ).catch(err => 
        console.log( ...err )
    )
).catch(function (error) 
    let edata = error.message;
    console.log('Error:', edata)

)

有人可以帮忙吗？ 回应

 "_bodyBlob": "_data": "__collector": [Object], "blobId": "f2d967a5-2700-4f03-b2ac-2e4ec22f10e4", "offset": 0, "size": 232, "_bodyInit": "_data": "__collector": [Object], "blobId": "f2d967a5-2700-4f03-b2ac-2e4ec22f10e4", "offset": 0, "size": 232, "bodyUsed": false, "headers": "map": "cache-control": "max-age=0, no-cache, no-store, must-revalidate", "content-language": "*", "content-length": "232", "content-type": "application/json", "date": "Tue, 23 Feb 2021 07:20:25 GMT", "paypal-debug-id": "27bb91ae40c3a", "ok": false, "status": 400, "statusText": undefined, "type": "default", "url": "https://api.sandbox.paypal.com/v1/payments/payment"

参考链接PAYPAL INTEGRATION IN REACT-NATIVE

【问题讨论】：

"得到状态码 400 或 500 的响应都不同。"如果您需要帮助，请在您的问题中发布完整的响应 JSON 数据

张贴请帮助@PrestonPHX

你添加的是响应对象，不是很有用。您需要获取它的 text() 或 json() 然后重新字符串化。还有助于记录请求的数据，以防它与您期望代码发送的内容之间存在一些差异。

以 JSON 格式发布响应

不，那是响应对象，不是 JSON 数据。无论如何，下面的更新答案添加了此日志记录并解决了 2 个问题

【参考方案1】：

https://api.sandbox.paypal.com/v1/payments/payment

v1/payments 是 deprecated API。您应该整合当前的 v2/checkout/orders。

Here is some documentation -- 你想要“创建订单”和“捕获订单”API 调用。

---

但是，如果您想了解您的 v1 代码存在的问题，可以在这里修复它们并使用适当的请求+响应数据记录

问题：

currency 变量未设置为没有空格的有效数字 您需要 JSON.stringify() 您的请求正文。

<script>
let currency = '100 INR';
currency = currency.replace("INR", "").trim() ; //this was a problem line, replace() is not in-place. And also extra space to trim
let accessToken = '';

const dataDetail = 
    "intent": "sale",
    "payer": 
        "payment_method": "paypal"
    ,
    "transactions": [
        "amount": 
            "total": currency,
            "currency": "INR",
            "details": 
                "subtotal": currency,
                "tax": "0",
                "shipping": "0",
                "handling_fee": "0",
                "shipping_discount": "0",
                "insurance": "0"
            
        
    ],
    "redirect_urls": 
        "return_url": "https://example.com",
        "cancel_url": "https://example.com"
    


fetch('https://api.sandbox.paypal.com/v1/oauth2/token',  
    method: 'POST',
    headers:  
         'Accept': 'application/json', 
         'Accept-Language': 'en_US',
         'Content-Type': 'application/x-www-form-urlencoded',
         'Authorization': 'Basic ' + btoa('AUrtJxcHfMUlDjHgV2FHMOUnzMkUeu86_km7h67uEHzH5b5RN7Vo-q8AYPtcdz7Iaioc46xW0H9JQZmT:EMbbJ-YqQLT6liuPtJURq2pAgh9WuUTDKmV355_VIeADst0BMlnUNKiHVLK7itCyZFXrEQOex9p93WO8')
    ,
    body: 'grant_type=client_credentials'
).then(response => response.json())
  .then(async (data) => 
      console.log(data.access_token)
      accessToken=data.access_token

    // console.log(JSON.stringify(dataDetail))

    let createRequest = 
        method: 'POST', 
        headers: 
            'Content-Type': 'application/json',
            'Authorization': 'Bearer '+(accessToken)
        ,
        body:JSON.stringify(dataDetail)
    
    console.log('Request body string',createRequest.body);
    console.log('Request body (formatted)', JSON.stringify( JSON.parse(createRequest.body) ,null,4) );
    fetch ('https://api.sandbox.paypal.com/v1/payments/payment',createRequest
)
    .then(function(response) 
        console.log('Response object', response);
        return response.json()
    )
    .then(async(data) => 
        console.log('Response data',data);
        console.log('Response data (formatted)', JSON.stringify(data,null,4) );
    ).catch(err => 
        console.log( ...err )
    )
).catch(function (error) 
    let edata = error.message;
    console.log('Error:', edata)
)
</script>

【讨论】：

在更改 v2 状态码时找不到 404 页面

v2/payments 不是一个东西，除了退款等。你需要整合 v2/checkout/orders

v2/payments/payment 不存在，因此 404。要使用 v2/checkout/orders，您需要使用不同的端点和不同的请求语法。