Болезненный и сладкий путь оплаты WeChat

задняя часть внешний интерфейс WeChat
Ничто не легко, когда дело доходит до денег. Это мой первый контакт с платежом WeChat, и я обнаружил, что многие студенты все еще просят помощи в Интернете. Что мне делать, если я получу XXX? Что случилось с ХХХ? Чтобы помочь большему количеству друзей выбраться из «моря горечи», я решил написать эту поездку, чтобы помочь большему количеству людей.

представлять

Способы оплаты WeChat делятся на оплату картой, оплату официального счета, оплату скан-кодом, оплату через приложение, оплату H5 и оплату небольшой программы.

Давайте сначала поговорим о сценариях применения, чтобы мы могли быстро определить, какой платеж выбрать.

  • Оплата кредитной картой: использование сканирующего оборудования (сканирующего пистолета) чаще встречается в супермаркетах и ​​магазинах шаговой доступности.
  • Оплата официального аккаунта: страница H5, встроенная в официальный аккаунт
  • Оплата скан-кодом: пользователь открывает «WeChat Scan», сканирует QR-код продавца и платит.
  • Оплата APP: внешнее приложение APP, когда пользователь инициирует платеж, перейдите в WeChat для завершения платежа.
  • Платеж H5: встроенный браузер, отличный от WeChat, запрашивает платеж WeChat
  • Оплата мини-программы: пользователи используют WeChat Pay в мини-программах WeChat.

задний план

Наша компания подает заявку на учетную запись службы WeChat, и нам нужен WeChat для оплаты веб-страницы, встроенной в учетную запись службы.Поэтому, согласно введению, мы должны выбрать «Оплата через публичный счет».

Шаги развития

Прежде всего, не пугайтесь развития WeChat Pay, на самом деле это очень просто. Во-первых, внимательно прочитайте документы, оплачиваемые официальным аккаунтом.Если не понимаете, прочитайте несколько раз.Если все-таки не понимаете, пробуйте и пробуйте.

В этом документе:
Боюсь, что есть. WeChat.QQ.com/wiki/doc/AP…

  • Шаг 1: Сделайте заказ вместе

Следите за документацией, давайте по крупицам, и разбирайтесь, зачем каждый шаг, чтобы не запутаться и не запутаться.

Во-первых, это интерфейсЗа кулисамиЧто нужно сделать, цель этого интерфейсаПолучить prepay_id., который является удостоверение личности обратного вызова транспортировки. Передайте Prepaway_ID на стойку регистрации, а передняя стойка звонит JS-SDK, которая принадлежит к области шага 2, и я расскажу об этом позже.

ссылка на интерфейс
URL-адрес:API.Name.WeChat.QQ.com/Боюсь иметь/унифицированный…

В документе указано, что метод post должен использоваться для запроса ссылки на интерфейс, предоставленной WeChat, входящие данные также должны быть в формате xml, а возвращаемые данные также в формате xml. пьяный? Не напивайтесь, WeChat такой, а Alipay такой. Улыбнитесь вручную и примите это.

Ну давай же.

Простой и грубый код:

// '/addOrder'是留给前台的调用接口
router.post('/addOrder',(req,res)=>{    
const addOrderUrl = 'https://api.mch.weixin.qq.com/pay/unifiedorder';    
var client_ip = "";    
client_ip = req.body.ipaddr;    
var appid = "1234567890"; // 服务号|公众号的appid    
var body = "商品简单描述-测试"; // 商品简单描述    
var mch_id= "1234567890"; // 商户号，申请微信支付，腾讯给的商户号    
// var device_info = "WEB";  
var nonce_str = getRanId(32); // 随机字符串 
var out_trade_no = "" +new Date().getTime() + Math.floor( Math.random() * 10 ); //商户订单号
var total_fee = req.body.total_fee; //支付金额，单位：分    
var sign = "";    
var notify_url = "http://123.456.789"; //异步接收微信支付结果通知的回调地址    
var trade_type = "JSAPI"; // 交易类型    
var openid = req.session.openId;    
console.log(openid);    
var stringA = `appid=${appid}&body=${body}&mch_id=${mch_id}&nonce_str=${nonce_str}&notify_url=${notify_url}&openid=${openid}&out_trade_no=${out_trade_no}&spbill_create_ip=${client_ip}&total_fee=${total_fee}&trade_type=${trade_type}`;    
var stringSighTemp = stringA+"&key=****#####jiaoyuguihuayuan----***"; //32位的商户key,自定义的，这里为了隐私，我用的特殊符号给你们展示   
sign = md5(stringSighTemp).toUpperCase();    
var xml = `<xml>      
<appid>${appid}</appid>      
<body>${body}</body>      
<mch_id>${mch_id}</mch_id>      
<nonce_str>${nonce_str}</nonce_str>      
<notify_url>${notify_url}</notify_url>     
<openid>${openid}</openid>     
<out_trade_no>${out_trade_no}</out_trade_no>    
<spbill_create_ip>${client_ip}</spbill_create_ip>     
<total_fee>${total_fee}</total_fee>  
<trade_type>${trade_type}</trade_type>    
<sign>${sign}</sign>    
</xml>`;
var Res = res;axios({  
    method: 'post',   
    url: addOrderUrl,   
    data: xml,   
    responseType: 'text/xml',   
    headers: {     
       'Content-Type': 'text/xml' 
    }
 }).then( res=>{   
    console.log(res)  
    Res.send(res.data)
 }).catch( err=>{   
    console.log( err)})
})

иллюстрировать

Параметр client_ip — это IP-адрес клиента.Первоначально я получил IP-адрес клиента в фоновом режиме, поскольку мы использовали прокси-сервер nginx, а req.ip возвращает ::ffff:127.0.0.1, который представляет собой строку в IPV6. формат. В Интернете есть ответ, который объясняет это:stackoverflow.com/questions/2…

Здесь я использую онлайн-скрипт, чтобы вывести его на передний план, http://pv.sohu.com/cityjson?ie=utf-8
Использование: window.ipaddr = returnCitySN['cip'];
Остальные параметры прописаны с привязкой к требованиям оплаты WeChat.

произошла ошибка

XMLневерный формат

И глядя на документацию, причина в этом


Я: #&(%#@+%), не надо подробно объяснять...

Такого рода ошибка требовала «прозрения», и я внезапно нашел свою ошибку. Я неправильно понял! Я добавил в тег body, что привело к неправильному форматированию моего xml.На самом деле, нужно добавлять только тогда, когда есть поле подробностей, а другие делают нет.

Я: кхм, ошибка низкого уровня. Обратите внимание на документацию и следуйте требованиям, не добавляя ни больше, ни меньше.

После того, как я удалил , я обнаружил, что это было причиной, и ошибка формата XML больше не возникала.Однако было слишком рано радоваться, потому что он сообщил об ошибке подписи. хехе~

Ошибка подписи


Подсчет подписи в документации очень строгий:
Первый шаг, предоставленный для отправки или получения всех наборов данных M, аргумент не является нулевыми значениями в наборе параметра имя параметра M в соответствии с кодом ASCII в порядке возрастания (лексикографический), используя формат URL Ключ (т. Е. Ключ1 = VALUE1 и Key2 = значение2 ...) Собран в строку Stringa.

Обратите особое внимание на следующие важные правила:
Первый шаг - установить все отправленные или полученные данные как набор M, отсортировать параметры ненулевых значений параметров в наборе M в соответствии с кодом ASCII имени параметра от меньшего к большему (лексикографический порядок) и использовать ключ URL формат пары значений (т. е. ключ1 = значение1&ключ2=значение2...), вставленный в строку stringA.

◆ Код ASCII имени параметра в порядке возрастания (лексикографический порядок);
◆ Если значение параметра пустое, он не участвует в подписи;
◆ Название параметра чувствительно к регистру (официальный платеж по аккаунту пишется строчными буквами)
◆ Когда вызов проверки возвращается или WeChat активно уведомляет о подписи, переданный параметр знака не участвует в подписи, и сгенерированная подпись проверяется на соответствие значению знака.
◆ Интерфейс WeChat может добавлять поля, а дополнительные расширенные поля должны поддерживаться при проверке подписи.

Второй шаг — объединение ключа в конце строки A для получения строки stringSignTemp, выполнение операции MD5 над stringSignTemp, а затем преобразование всех символов полученной строки в верхний регистр для получения знакового значения signValue.

◆ Путь настройки ключа: WeChat Merchant Platform (pay.weixin.qq.com) —> Настройки учетной записи —> Безопасность API —> Настройки ключа

Здесь я проверил некоторую информацию и увидел, что есть несколько подобных ситуаций с ошибками:
Ключ неверный, здесь должен быть написан ключ мерчанта, а этот ключ задается пользователем вручную и состоит из 32 цифр. Примечание. Сохраните копию самостоятельно, так как ее нельзя будет открыть и просмотреть после ее установки.


Есть еще одна ошибка, которую я считаю возмутительной.Китайского в теле быть не может.Однако я поменял текст в теле на английский и обнаружил, что это не меняет статус-кво.На самом деле можно использовать китайский язык .

…

В общем, все ошибки, которые я нашел, были бесполезны в моем случае!

Затем для этого требуется «прозрение».Исходная строкастрокаЯ использовал новую строку для разделения длинных символов, что привело к преобразованию новой строки в \n в коде Ascall и записи в подпись, поэтому знак был неправильным, поэтому Либо, удалите все символы новой строки или используйте "" для подключения и сброса. После того, как я удалил все новые строки, ошибок подписи не было.

дан дан дан ~


Наконец выполнили первый шаг, фон успешно вернул нужный нам prepay_id

В целях безопасности сравнивайте возвращенный знак с отправленным и возвращайте результат на стойку регистрации только после того, как они полностью сравняются.

  • Шаг 2. Вызов интерфейса WeChat js-sdk

WeChat Pay

Инициировать запрос платежа WeChat

Стойка регистрации получает данные в формате xml, вы должны сначала проанализировать их, чтобы получить prepay_id

Затем позвоните в WeChat, чтобы оплатить js-sdk. Чтобы избежать каких-то обходных путей, я сначала напишу правильный путь. Ключевые шаги следующие:

var {prepay_id,appid} = getInfo(res.data); //从后台数据中获取appid 和 prepay_id
nonceStr = getRanId(32);
timeStamp = new Date().getTime();
var stringA = "appId="+appid+"&nonceStr="+nonceStr+"&package=prepay_id="+prepay_id+"&signType=MD5&timeStamp="+timeStamp;
var stringSignTemp = stringA+"&key=****#####jiaoyuguihuayuan----***";
paySign = md5(stringSignTemp).toUpperCase();
window.wx.chooseWXPay({    
timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符    
nonceStr: nonceStr, // 支付签名随机串，不长于 32 位    
package: "prepay_id=" + prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）    
signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'    
paySign: paySign, // 支付签名 
success: function (res) {        
// 支付成功后的回调函数        
    console.log(res)   
 },   
fail: function(err){     
    console.log(err)  
}});

Примечания: prepay_id получается через унифицированный интерфейс заказа платежа WeChat, а paySign принимает унифицированный метод генерации подписи платежного знака WeChat.Обратите внимание, что appId здесь также участвует в подписи, а appId и config передаются в AppId непротиворечив, то есть последними параметрами, участвующими в подписи, являются appId, timeStamp, nonceStr, пакет, тип знака.

Обратите внимание, я хочу поговорить о пит-пойнте~

При вызове js-sdk поля в подписи пишутся мелким верблюжьим шрифтом, timeStamp пишется так, а в wx.config timestamp все строчные, так что уважаемый, не ошибитесь, тут я в ловушке некоторое время.

После написания подписи, когда вы используете инструмент веб-разработчика WeChat для тестирования, вы увидите, что «Не поддерживает симуляцию». На этот раз, не стесняйтесь, перейдите прямо к реальной машине для тестирования, это не наша программа.

маленькие советы: На реальной машине мы не можем видеть некоторую отладочную информацию из консоли, поэтому, если мы хотим найти способ, мы можем использовать оповещение или вывести отладочную информацию на экран. Я выбираю вывод ее на экран. Здесь можно сказать несколько вещей.Документы, предоставляемые WeChat, не столь полны, а некоторые руководствуются только их пробами.Например, функции успеха и сбоя в wx.config и способ печати информации о параметрах на самом деле разрешены. .errMsg и err.errMsg.

Вы заметили, что я сказал выше, но если вы все еще не можете мобилизовать элементы управления платежами WeChat, может возникнуть проблема с конфигурацией разработки торговой платформы WeChat. Центр продуктов – Конфигурация разработки – Конфигурация оплаты – Оплата через официальный аккаунт При настройке обязательно перейдите в каталог последнего уровня, например, если я хочу сделать оплату WeChat на странице cms.123.456/book/list/index.html, то ваша конфигурация должна быть cms.123.456/book/list/

Ну в основном все ямки в разработке упомянуты, что исходя из того, что ваша конфигурация не ошибается. Затем посмотрите, можете ли вы на самом деле заплатить.

Заканчивать



Все готово, это напомнило мне недавно популярную фразу, надоедливый гоблин, платеж WeChat!

Надеюсь, это поможет вам~


Добавить Автора
Ссылка: https://juejin.cn/post/1
Источник: Самородки
Авторские права принадлежат автору. Для коммерческих перепечаток, пожалуйста, свяжитесь с автором для получения разрешения, а для некоммерческих перепечаток, пожалуйста, укажите источник.




Категории