Vue PC에서 Alipay 결제 - 프론트 엔드에서 해야 할 일

1. 먼저 PC에서 Alipay 결제 방법의
공식 포털을
이해합니다. 이는 주로 백엔드를 구성할 때 읽어야 할 문서 입니다
. 우리가 주의해야 할 것은 qr_pay_mode입니다.

PC에서 Alipay로 결제할 때 두 가지 상황이 있습니다.
1. 생성 페이지에 대한 QR 코드 여기에서 사용자는 QR 코드를 스캔하여 결제------프론트 엔드 모드

2. Alipay 페이지로 이동하고 사용자는 QR 코드를 스캔하여 ----- 점프 모드로 결제합니다.

프런트 엔드 모드에서 결제 구현

단계

1. 백엔드에서 제공하는 인터페이스를 통해 Alipay의 데이터를 얻습니다 - Alipay의 양식 데이터를 얻기 위해 인터페이스를 호출합니다(주문 번호를 반환하는 것이 가장 좋습니다).
2. iframe을 사용하여 페이지에 양식 데이터 배치 - QR 코드 생성
3. 사용자가 코드를 스캔합니다.
4. 표시 후 결제 결과를 요청하는 타이머를 설정합니다. 백엔드는 결제 결과를 쿼리하고 그에 따라 처리하는 인터페이스를 제공합니다.

실제 작동

1. Alipay에서 반환된 데이터를 얻기 위해 인터페이스를 요청하는 것은 일반적으로 다음과 같습니다.

2. 페이지에서 iframe을 사용하여 양식 값을 페이지에 렌더링합니다.

		<iframe
            :srcdoc="form数据"
            frameborder="no"
            border="0"
            marginwidth="0"
            marginheight="0"
            scrolling="no"
            width="200"
            height="200"
            style="overflow: hidden"
          >
          </iframe>

표시가 가능하며,

QR코드가 나오면 타이머를 연결해야 결제결과 조회가 시작됩니다.

	// 查询支付状态
        this.timer = setInterval(() => {
    
    
          that.getStatus(res.data.out_trade_no);
        }, 2000);

//获取订单状态
getStatus(out_trade_no) {
    
    
      czstatus({
    
    
        out_trade_no,
      }).then((res) => {
    
    
        if (res.data.isok == 1) {
    
    
          this.$message.success("充值成功");
          //成功之后的相关请求
          this.getye();
          this.close();
        }
      });
    },

성공한 후에는 타이머를 지우고 관련 작업을 수행하면 됩니다.

참고: 타이머 삭제에 주의하세요(페이지를 닫을 때, 결제 수단을 전환할 때 등).

프런트 엔드 모드에서 결제 구현

단계

1. 첫 번째 방법과 마찬가지로 양식 데이터를 얻기 위해 인터페이스를 요청합니다.
2. 알리페이 결제 페이지로 이동
3. 사용자가 코드를 스캔하여 결제
4. 원래 페이지로 다시 전화
5. Alipay 콜백을 통해 전달된 값을 받아 결제 결과 인터페이스에 요청하여 작업을 수행합니다.

실제 작동

1. Alipay에서 반환한 데이터를 얻기 위한 인터페이스를 요청하는 방법은 일반적으로 다음과 같습니다.

2. 값을 얻은 후 Alipay 결제 페이지로 이동합니다.

//xxxxx为请求到的form数据
 document.querySelector("body").innerHTML = xxxxx;
 document.forms[0].submit();

Alipay 페이지로 이동합니다.

사용자가 결제를 스캔한 후 이전 주소로 다시 이동합니다. 이 콜백 주소는 Alipay 백엔드에서 구성되어야 합니다.
반환된 링크에 out_trade_no 매개변수가 있습니다. 이 매개변수를 결제 상태를 쿼리하는 백엔드 매개

변수를 받습니다.

	created() {
    
    
    if (this.$route.query.out_trade_no) {
    
    
      this.getStatus(this.$route.query.out_trade_no);
    }
  },

getStatus는 첫 번째 상황과 일치하는 결제 상태를 획득하고 해당 처리를 수행하도록 백엔드에 요청하는 것입니다.

팔로우로 응원해주세요