2checkout 付款授权在 React 中失败

问题描述

我一直在使用 2checkout 支付网关。我正在使用 2checkout 提供的脚本文件。首先，我使用 version: '3.5' services: traefik: image: traefik:v2.2 container_name: traefik restart: always command: - "--api.insecure=true" - "--providers.docker=true" networks: - traefik_network ports: - "80:80" - "8080:8080" volumes: - /var/run/docker.sock:/var/run/docker.sock labels: - "traefik.enable=true" - "traefik.docker.network=traefik_network" - "traefik.http.services.traefik.loadbalancer.server.port=80" - "traefik.http.routers.traefik.rule=Host(`traefik.local.host`)" - "traefik.http.routers.traefik.middlewares=traefik" - "traefik.http.middlewares.traefik.basicauth.users=test:$$apr1$$1pmerTx$$qsMzjTuYTHyEn12LKmteghC." - "traefik.http.middlewares.traefik.basicauth.removeheader=true" networks: traefik_network: name: traefik_network 将它导入到我的 index.html 文件中，它给了我一个 CORBS 错误。所以我下载了脚本并放在本地文件中。 现在，它按预期工作。它通过 2checkout 为我提供授权令牌。以下是我用来获取令牌表单服务器的组件。

<link></link>

因此，它为我提供了在 Postman 中用于测试 2checkout api 的控制台令牌。 https://www.2checkout.com/checkout/api/1//rs/authService

我一直在使用以下有效负载向此 api 发送 POST 请求。

import React,{ useEffect,useState } from 'react';

const Form = (props) => {
  const [ card,setCard ] = useState({
    sellerId: <my-seller-id>,publishableKey: <my-publishable-key>,ccNo: '',expMonth: '',expYear: '',cvv: ''
  });
  const [ returnToken,setReturnToken ] = useState(null);

  useEffect(() => {
    window.TCO.loadPubKey('sandBox');
  },[]);

  const submitted = (e) => {
    e.preventDefault();
    var payWithCard = (data) => {
      console.log(data.response.token.token);
    };

    var error = (error) => {
      console.log(error);
    };

    try {
      window.TCO.requestToken(payWithCard,error,card);
    } catch (error) {
      setTimeout(() => {
        window.TCO.requestToken(payWithCard,card);
      },3000);
    }
  };

  const change = (e) => {
    setCard({
      ...card,[e.target.name]: e.target.value
    });
  };

  return (
    <form id="tcoCCForm" onSubmit={submitted}>
      <input id="sellerId" type="hidden" value={card.sellerId} />
      <input id="publishableKey" type="hidden" value={card.publishableKey} />
      <div>
        <label>
          <span>Card Number</span>
          <input
            id="ccNo"
            name="ccNo"
            type="text"
            value={card.ccNo}
            autoComplete="off"
            required
            onChange={(e) => change(e)}
          />
        </label>
      </div>
      <div>
        <label>
          <span>Expiration Date (MM/YYYY)</span>
          <input
            type="text"
            size="2"
            id="expMonth"
            name="expMonth"
            value={card.expMonth}
            required
            onChange={(e) => change(e)}
          />
        </label>
        <span> / </span>
        <input
          type="text"
          size="4"
          id="expYear"
          name="expYear"
          value={card.expYear}
          required
          onChange={(e) => change(e)}
        />
      </div>
      <div>
        <label>
          <span>CVC</span>
          <input
            id="cvv"
            name="cvv"
            type="text"
            value={card.cvv}
            autoComplete="off"
            required
            onChange={(e) => change(e)}
          />
        </label>
      </div>
      <input type="submit" />
    </form>
  );
};

export default Form;

虽然我每次得到的回应是：

{
    "sellerId": <seller_id>,"privateKey": <private_key>,"merchantOrderId": "123","token": "N2Y5MDFmNTItYzcxms00OGQ5LTk2MmItOGJlMjAzYWQwNDFl","currency": "USD","demo": true,"lineItems": [
        {"name": "Package A","price": 10,"quantity": 1,"type": "product","recurrence": "1 Month","duration": "Forever"}  ],"billingAddr": {"name": "Wasi Ullah","addrLine1": " village Bharaj P/O Lakhanwal","city": "Gujrat","state": "Pubjab","zipCode": "50700","country": "Pakistan","email": "[e-mail]","phoneNumber": "[phone]"} 
    }

}

即使我在演示模式下也提供了原始卡和所有信息。但仍然存在同样的问题。

解决方法

我得到了这个问题的解决方案。我想分享它。可能对你有帮助。 如果您正在测试 2checkout，请不要忘记检查测试订单的文档： https://knowledgecenter.2checkout.com/Documentation/09Test_ordering_system/01Test_payment_methods

此外，我没有在 api 中根据此测试顺序添加名称，这就是为什么它说我卡授权失败的原因。