English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
odeJs para el desarrollo de funciones del公众号, el lado móvil H5Llamar a la función de pago de WeChat en la página.5Llamar a la función de pago de WeChat en la página para completar la necesidad de pago. Ahora volvemos a repasar el proceso de desarrollo para ayudar a más desarrolladores a completar con éxito el desarrollo de la función de pago de WeChat. (WeChat no ha proporcionado aún la función de pago de node)
I. Solicitar CODE
El objetivo de solicitar el code es obtener el openid (la identificación única del usuario en relación con el公众号) y access_token, la API de solicitud: https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
Este api necesita prestar atención a varios parámetros:
1. appid, el appid del公众号, se puede ver en el公众号
2. redirect_uri, la dirección de retroalimentación de WeChat personalizada, WeChat se desplazará a la dirección redirect_uri definida después de que solicites la dirección anterior, llevando el code, aquí redirect_url necesita **url_encode** *php*Si tu programa es node,则需要使用 **encodeURLComponent(url)**Codificación
3. response_type=code, no hay mucho que decir, es fijo response_type=code, para obtener detalles, consulte las instrucciones en la página web oficial de WeChat
4. scope=snsapi_userinfo, se escribe de manera fija, para obtener detalles, consulte las instrucciones en la página web oficial de WeChat
5. state=STATE se escribe de manera fija, para obtener detalles, consulte las instrucciones en la página web oficial de WeChat
6. wechat_redirect se escribe de manera fija, para obtener detalles, consulte las instrucciones en la página web oficial de WeChat
ps: enlace de la página web oficial:
II. Obtener access_token y openid a través de code
El primer paso ya ha obtenido el valor de code, por lo tanto, a continuación, es necesario obtener el valor de access_token y openid a través de code, la api de solicitud
API https://api.weixin.qq.com/sns/oauth2/access_token#63;appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
Aquí está la explicación de los parámetros del api:
1. appid El id de la cuenta oficial de WeChat, se obtiene en la interfaz de administración de la cuenta oficial de WeChat
2. secret La clave de la cuenta oficial de WeChat, se obtiene en la interfaz de administración de la cuenta oficial de WeChat
3. code， primer paso para obtener el código utilizado
4. grant_type=authorization_code está fijado
3. Llamar a la interfaz a través de access_token
El access_token puede hacer funciones posteriores, puede referirse a los ejemplos oficiales:
https://open.weixin.qq.com/cgi-bin/showdocument#63;action=dir_list&t=resource/res_list&verify=1&id=open1419316518&lang=zh_CN
4. API de pago invocado desde el lado de la página web
¿No te sientes que está casi terminado, solo tienes que llamar a la función de pago de WeChat desde el lado de la página web y está hecho? No, falta un poco más
Abrir H en el navegador WeChat:5Ejecutar JS de pago en la página web. El formato de datos de entrada y salida de la interfaz es JSON.
Atención: el objeto interno WeixinJSBridge no es válido en otros navegadores.
Ejemplo de código:
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": "wx2421b1c4370ec43", //Nombre del公众号, proporcionado por el comerciante
"timeStamp": " 1395712654", //marca de tiempo, desde197segundos desde
"nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //secuencia aleatoria
"package" : "prepay_id=u802345jgfjsdfgsdg888",
"signType" : "MD5", //Manera de firma de WeChat:
"paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //Firma de WeChat
},
function(res){
if(res.err_msg == "get_brand_wcpay_request：ok" ) {} // El uso de la forma anterior para determinar el retorno del frontend, el equipo de WeChat solemnemente advierte: res.err_msg se retornará después de que el usuario pague con éxito, pero no garantiza que sea absolutamente confiable.
}
);
}
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {}}
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
Viendo el código anterior, si se desea llamar a la función de pago de WeChat, se deben transmitir parámetros,
{
"appId": "wx2421b1c4370ec43", //Nombre del公众号, proporcionado por el comerciante
"timeStamp": " 1395712654", //marca de tiempo, desde197segundos desde
"nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //secuencia aleatoria
"package" : "prepay_id=u802345jgfjsdfgsdg888",
"signType" : "MD5", //Manera de firma de WeChat:
"paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //Firma de WeChat
}
Descripción de los parámetros:
1. appId //Nombre del公众号, proporcionado por el comerciante
2. timeStamp //marca de tiempo, desde1970 años en segundos, aquí hay que prestar atención especialmente, debe ser un formato de timestamp de cadena, es decir, debe estar entre comillas dobles "
3. nonceStr //secuencia aleatoria 32de dígitos, se proporcionará el método más adelante
4. signType // Método de firma de WeChat: MD5
5. paySign //Firma de WeChat, luego hablemos
6. **package** //Esto es lo más importante, ¿dónde se obtiene? Vamos a hablar de eso a continuación.
ps: Descripción de la interfaz oficial
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php&63;chapter=7_7&index=6
Cinco. Obtener package, Obtener prepay_id desde el interfaz de pedido unificado de WeChat
API oficial:
https://api.mch.weixin.qq.com/pay/unifiedorder
Hay muchos parámetros de solicitud, pero algunos no son obligatorios, a continuación se muestra los parámetros obligatorios
{
appid : APPID,
attach : ATTACH,
body : BODY,
mch_id : MCH_ID,
nonce_str: NONCE_STR,
notify_url : NOTIFY_URL,// Dirección de callback de pago de WeChat
openid : OPENID,
out_trade_no : OUT_TRADE_NO ,//new Date().getTime(), //Número de pedido
spbill_create_ip : SPBILL_CREATE_IP , //IP del cliente
total_fee : TOTAL_FEE, //Precio del producto, aquí hay que prestar atención de que este precio se calcula en centavos, por lo que generalmente es en yuanes, necesitas convertirlo a yuanes RMB
trade_type : 'JSAPI',
}
El interfaz de pedido unificado de WeChat requiere que se transmita datos en formato xml, y los datos también necesitan estar firmados, por lo que primero firmamos los datos.
La regla de firma puede referirse a la regla de firma proporcionada por WeChat (el método de firma se proporcionará más adelante)
Regla de firma oficial de WeChat:
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php&63;chapter=4_3
Después de generar la firma, necesita compilar los datos en el formato xml:
var body = '<xml> " + <appid>"+config.wxappid+</appid> " + <attach>"+obj.attach+</attach> " + <body>"+obj.body+</body> " + <mch_id>"+config.mch_id+</mch_id> " + <nonce_str>"+obj.nonce_str+</nonce_str> " + <notify_url>"+obj.notify_url+</notify_url>" + <openid>"+obj.openid+</openid> " + <out_trade_no>"+obj.out_trade_no+</out_trade_no>"+ <spbill_create_ip>"+obj.spbill_create_ip+</spbill_create_ip> " + <total_fee>"+obj.total_fee+</total_fee> " + <trade_type>"+obj.trade_type+</trade_type> " + <sign>"+obj.sign+</sign> " + // Es obligatorio llevar la firma aquí, de lo contrario WeChat no pasará la verificación de datos. </xml>';
A continuación, es necesario solicitar el valor de prepay_id a través de la api, enviar los datos xml obtenidos anteriormente a la api siguiente y WeChat verificará los datos sin problemas y devolverá el valor que desea.
api: https://api.mch.weixin.qq.com/pay/unifiedorder
Señal. Si se obtiene prepay_id, ¿se puede hacer en h5 ¿Puedo llamar directamente a la función de pago de WeChat? La respuesta es que aún no es posible.
Si se obtiene prepay_id, ahora h5 Los parámetros para invocar la función de pago de WeChat son así:
{
"appId": "wx2421b1c4370ec43", //Nombre del公众号, proporcionado por el comerciante
"timeStamp": " 1395712654", //marca de tiempo, desde197segundos desde
"nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //secuencia aleatoria
"package" : "prepay_id=u802345jgfjsdfgsdg888",
"signType" : "MD5", //Manera de firma de WeChat:
}
Con estos parámetros,还需要对所有参与的参数进行签名。签名规则与上面相同，生成签名后需要将签名的参数 paySign 赋值给h5 Parámetros para invocar la función de pago de WeChat (es decir, la firma de WeChat no participa en la generación de la firma)
Los parámetros finales son así:
{
"appId": "wx2421b1c4370ec43", //Nombre del公众号, proporcionado por el comerciante
"timeStamp": " 1395712654", //marca de tiempo, desde197segundos desde
"nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //secuencia aleatoria
"package" : "prepay_id=u802345jgfjsdfgsdg888",
"signType" : "MD5", //Manera de firma de WeChat:
"paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //Firma de WeChat
}
Si todos tus enlaces no tienen problemas, puedes llamar normalmente a la función de pago de WeChat después de obtener estos parámetros, no hay diferencia con la función nativa, (probablemente estás muy contento en este momento, sin aplicación puedes usar la función de aplicación, es así de mágico).
Siete. Retroalimentación después del pago completado
Después de pagar con WeChat, se encontrará en h5 La función de retroalimentación de pago de la página coloca valores devueltos,
res.err_msg == "get_brand_wcpay_request：ok" , así es que es exitoso, ¿pero ¿eso es todo? No, ¿por qué? ¿WeChat realmente recibió el dinero? ¿El dinero recibido es el valor que transmitiste a WeChat? Necesitas escribir el resultado del pago en la base de datos, etc., todo esto es desconocido. ¿Recuerdas que en la interfaz de pedido unificado hay un parámetro obligatorio llamado notify_url : NOTIFY_URL?,// La dirección de retroalimentación después del pago de WeChat, esta dirección es la que el usuario transmite a WeChat. Después de recibir el pago del usuario, WeChat solicitará este interfaz de forma POST. WeChat transmitirá la información del pago del usuario, pero es en formato XML.
Este es un formato xml de clase:
<xml> <appid><![CDATA[wx2421b1c4370ec43b]]></appid> <attach><![CDATA[支付测试]]></attach> <bank_type><![CDATA[CFT]]></bank_type> <fee_type><![CDATA[CNY]]></fee_type> <is_subscribe><![CDATA[Y]]></is_subscribe> <mch_id><![CDATA[10000100]]></mch_id> <nonce_str><![CDATA[5d2b6c2a8db53831f7eda20af46e531c]]></nonce_str> <openid><![CDATA[oUpF8uMEb4qRXf22hE3X68TekukE]]></openid> <out_trade_no><![CDATA[1409811653]]></out_trade_no> <result_code><![CDATA[SUCCESS]]></result_code> <return_code><![CDATA[SUCCESS]]></return_code> <sign><![CDATA[B552ED6B279343CB493C5DD0D78AB241]]></sign> <sub_mch_id><![CDATA[10000100]]></sub_mch_id> <time_end><![CDATA[20140903131540]]></time_end> <total_fee>1</total_fee> <trade_type><![CDATA[JSAPI]]></trade_type> <transaction_id><![CDATA[1004400740201409030005092168]]></transaction_id> </xml>
Analiza estos datos en formato xml según tu lógica de negocio.
Atención: aquí, después de obtener los datos, WeChat necesita recibir tu respuesta. Si no respondes a WeChat continuamente, WeChat solicitará tu respuesta varias veces. Esto podría indicar que hay un problema con tu lógica, por lo que necesitas devolver una respuesta en formato xml a WeChat.
<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> </xml>
Pitfall:node, express framework de desarrollo, si no obtienes ningún valor xml en el callback de pago exitoso de WeChat, entonces necesitas instalar un componente: body--xml, puedes usar npm install body--xml --save Instalar, en app.js require('body--xml
// Solucionar el callback de notificación de pago de WeChat
app.use(bodyParser.xml({
limit: '2MB', // Rechazar la carga útil mayor que 1 MB
xmlParseOptions: {
normalize: true, // Recortar los espacios en blanco dentro de los nodos de texto
normalizeTags: true, // Transformar las etiquetas en minúsculas
explicitArray: false // Sólo coloque nodos en el array si >1
}
});
De esta manera, puedes obtener datos xml de WeChat de manera normal.
Método de uso:
pay.getAccessToken({
notify_url : 'http://demo.com/', //Callback después de que el pago WeChat se complete
out_trade_no : new Date().getTime(), //Número de pedido
attach : 'Nombre',
body : 'Información de compra',
total_fee : '1', // Este valor es en centésimos
spbill_create_ip : req.connection.remoteAddress,
}, function (error, responseData) {
res.render('payment', {
title : 'Pago WeChat',
wxPayParams : JSON.stringify(responseData),
//userInfo : userInfo
});
});
Hasta aquí, siento que está bastante bien. Si hay algo incorrecto, por favor corrijan.
Adjunto mi propio código:https://git.oschina.net/anziguoer/wechatPay
Este artículo ha sido organizado en 'Resumen de técnicas de desarrollo de WeChat en JavaScript', bienvenidos a aprender y leer.
Recomiendo un tutorial de mini programa de WeChat con alta atención actual: 'Tutorial de desarrollo de mini programa de WeChat'. El editor lo ha organizado con esmero, espero que les guste.
Esto es todo el contenido del artículo, espero que sea útil para su aprendizaje y que todos apoyen y alaben el tutorial.
Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado un procesamiento editorial humano y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.