WeChat 결제 액세스 구현을 위한 5분 튜토리얼

실제로 결제를 웹사이트나 앱 서비스에 연결하는 것은 어렵지 않습니다. 두려워하지 않고 전체 결제 상호작용 과정을 주의 깊게 이해한다면 실제로 구현하는 데 최대 30분밖에 걸리지 않습니다. 이 기사는 Ping++를 사용하여 결제 기능을 통합하여 WeChat 결제를 구현하는 것을 기반으로 하며, 소요 시간은 약 5분입니다.

어제 신청한 위챗페이 접속 신청이 오늘 아침에 위챗페이에 연결되었다는 위챗 알림을 받았습니다. 이전에 Ping++를 사용하여 Alipay의 즉시 결제 서비스에 액세스한 적이 있으므로 이를 기반으로 WeChat 결제 액세스를 추가하는 것은 몇 분이면 됩니다.

Ping++ 백엔드 구성

신청한 WeChat 결제가 승인되면 매우 중요한 네 가지 정보를 받게 됩니다.

구성이 올바른 후에는 백엔드에서 결제를 시작하기 위한 코드를 수정하기만 하면 됩니다. Ping++ 시스템의 Alipay와 WeChat 결제 사이에는 미묘한 차이가 있기 때문입니다. 특히 추가 매개변수의 차이는 다음과 같습니다. 즉시 결제, 추가 부분에서는 Success_url을 동기 점프로 전달해야 하고 WeChat 결제는 추가 필드에 product_id를 전달해야 합니다. 이 부분의 코드는 다음과 같습니다.

switch ( $channel ) {    case 'alipay_pc_direct' :      
 $extra['success_url'] = url('/payment/done');       
  break;    case 'wx_pub_qr':       
   $extra['product_id'] = $this->wechatOrder();    
       break;    default:      
         //more extra comes here}

이 부분인 것 같습니다. 1분 안에 가능해요!

프런트엔드 코드 수정

이때 실제로 프론트엔드는 2분밖에 남지 않았지만 이 정도면 충분합니다. 이전에는 Vuejs를 사용하여 결제 구성 요소를 재구성했기 때문에 WeChat을 추가한 후 몇 가지 조건만 추가하여 판단했는데, 한 가지 특별한 주의가 필요한 점은 WeChat 결제가 스캔 코드만 지원하고 점프 링크가 없다는 점입니다. 개념이므로 QR 코드를 처리하기 위한 라이브러리가 필요합니다. 여기서는 이전에 권장했던 vue-qrcode를 직접 사용할 수 있습니다.

then((response) => {
    if(this.channel === 'wx_pub_qr') {
      this.status = 'paying';
      this.qrcodeUrl = 
           response.data.credential.wx_pub_qr;
      this.timeId = setInterval(() => {
          if (this.status == 'success') {
              clearInterval(this.timeId);
          }
          this.checkPaymentDone(response.data.id);
       }, 5000)
    }
 }
 
checkPaymentDone(chargeId) {
    axios.post('/payment/check', {
        chargeId: chargeId
    }).catch(error => {
        this.status = 'exception';
    }).then(response => {
        if (response.data.finished) {
            this.status = 'success';
        }
    })
},

이렇게 하면 QR 코드를 표시할 때 다음과 같이 될 수 있습니다.

<div v-show="status == &#39;paying&#39;">
    <p v-show="channel == &#39;wx_pub_qr&#39;">
        <qrcode 
         :value="qrcodeUrl"
         v-if="qrcodeUrl"
        :options="{ size: 170 }">
        </qrcode>
    </p>
    <p>请使用微信扫码支付</p>
</div>

이렇게 하면 사용자는 WeChat 결제를 선택할 때 WeChat 결제용 QR 코드를 올바르게 볼 수 있습니다! 두 분!

위 내용은 WeChat 결제 액세스를 구현하는 5분 튜토리얼 방법에 대한 내용입니다. 모두에게 도움이 되기를 바랍니다.

관련 권장 사항:

h5를 사용하여 WeChat 결제 프로세스를 구현하는 단계

WeChat 결제 기능을 통합하는 Thinkphp에 대한 자세한 설명

WeChat 애플릿 개발 결제 기능 오류 요약

위 내용은 WeChat 결제 액세스 구현을 위한 5분 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!