uniapp does not encapsulate H5 payment uni.requestPayment(OBJECT) | uni-app official website (dcloud.net.cn)
This time, let’s talk about Alipay’s H5 payment first, and we will talk about WeChat later when we have time.
H5 adjusts Alipay payment. At present, the project is mainly carried out through the form returned by the back-end interface. The back-end will generate the form and compile it into a string and return it to the front-end. What the front-end needs to do is to render the returned form to the page. , Initiate Alipay payment by submitting the form form.
The form form is roughly like this, here I found it from elsewhere
<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=UTF-8&method=alipay.trade.wap.pay&sign=DEpMkI**********************eWUs6EW3QKlt9OHYv%2FqkporO8Sr5%2Bay5VA9dpx3pAbIiPPajQ2gEcWHvz5bm*******kxH8ZvHUXahQL9S69p9wKNXpXOxYadlsxE8QKGUc4cO5rrgGq08%2BpiOq%2FOz4fLogEBWANXILUMWXNzJn8YryNifZ416Pd%2BxkKgXs%2Fo%2FQDcqEUg*********VXXPRq7IGRGQg%2FpZkOhxCH%2Fq%2B9hnWEncAfQLlAXfPqjdcQTNJ0TJdVr1X1ENOdAr5LQkydWw2EQ8g%3D%3D&return_url=+https%3A%2F%2**********¬ify_url=+https%3A%2F%*********Fpub%2Fapi%2Fv1%2F********allback1&version=1.0&app_id=20********57&sign_type=R***×tamp=2019-0******55&alipay_sdk=al*******.49.ALL&format=json">
<input type="hidden" name="biz_content" value="{"body":"","enable_pay_channels":"balance,moneyFund,bankPay,debitCardExpress,creditCardExpress,creditCard,pcredit,pcreditpayInstallment,coupon,point,voucher,mdiscount,honeyPay","out_trade_no":"132ecf937ad84487aa6cbaeb2ec157fe","product_code":"13","subject":"SpringBoot 2.x微信支付在线教育网站项目实战","timeout_express":"20m","total_amount":"98"}">
<input type="submit" value="立即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>front end:
// 获取支付参数
pay({
// 这里可以传回调地址给后端（支付完成后会返回这个页面地址）
}).then(res => {
// 支付宝支付，这里只要提交表单
let form='后端返回的支付宝表单数据'
const div = document.createElement('formdiv');
div.innerHTML = form;
document.body.appendChild(div);
//document.forms[0].setAttribute('target', ' self');
document.forms[0].submit();
div.remove();
})Notice:
At the beginning, I wrote the target of the window. Later, I found that Alipay payment (WeChat and Safari browser) could not be launched in the IOS system. If other browsers such as Chrome are installed on the IOS system, payment can be made, but Unable to call back.
1. Cancel the target, check the information and say that the Safari security policy has blocked the webpage and open a new window, and ios should not wake up the Alipay app in the new window.
2. A sentence on the official document: Note: In the iOS system, after the Alipay App is activated to complete the payment, it will not automatically return to the browser or merchant APP. The user can manually switch back to the browser or the merchant's APP; the Alipay H5 cash register will automatically jump back to the page specified by the merchant's return_url.
Regarding the issue that IOS cannot be called back, since this requirement is not necessary for this project, it has not been studied in depth. But I saw the introduction in other articles https://blog.csdn.net/weixin_39972567/article/details/111483775
H5 payment cannot open Alipay ios_iOS Alipay H5 payment cannot return to APP solution
The first part of this article talks about how the landlord solved this problem and the troubles encountered in the middle. Students who are in a hurry can directly look at the final final solution.
Before discussing, let's take a look at a sentence in the official document: Note: In the iOS system, after the Alipay App is activated to complete the payment, it will not automatically return to the browser or merchant APP. The user can manually switch back to the browser or the merchant's APP; the Alipay H5 cash register will automatically jump back to the page specified by the merchant's return_url.
what? Did the official tell us about GG? The landlord is not reconciled, but still wants to try.
Drawing on the previous experience that iOS WeChat H5 payment cannot return to the APP solution, let's try it on the parameter return_url first.
The difference between Alipay and WeChat is that Alipay's return_url does not need to be filed (filled in) in the Alipay management background, while WeChat's redirect_url is required.
first try
webView intercepts the request https://mapi.alipay.com/gateway.do, modifies the return_url parameter to its own URLScheme, such as URLEncode(A.company.com://), but fails, and enters the Alipay error reporting page. After carefully looking at the other parameters of the request, there is actually a sign! The Alipay document also has this parameter, and the parameter signature has been verified. Well, the client’s plan to tamper with the parameter has failed!
second attempt
Since it cannot be tampered with, just fill it in when placing the order, and ask the students in the background to help, and change the return_url parameter to URLEncode(A.company.com://) when placing the order, but it still fails. The classmate in the background reminded me that the return_url must start with HTTP/HTTPS, which is stated in the Alipay document.
third attempt
Then add http to try, and I asked the background students to change the return_url to URLEncode(httpA.company.com://), and at the same time change the URLSchemes of the APP to httpA.company.com, try again, and call Alipay to open when it returns Safari, the error page of our payment center is displayed in Safari, and the return_url scheme has completely failed!
Or forget it, tell the product that Alipay cannot realize the payment and then jump back to the APP, anyway, it is written in Alipay's official documents.
Although I thought so, I continued to look through Alipay's documents, hoping to find some clues.
Alipay document
schemeStr, this keyword caught my eye.
Mobile website payment to Native payment: Alipay means that we provide an SDK, and you can easily realize the transition from the H5 cash register (that is, pay by entering the Alipay account password on the web) to the Alipay APP cash register after you connect it.
If you are a "regular" APP developer, your problem can be solved so far. According to the Alipay document, you can connect to the Alipay SDK, and you can realize the H5 payment callback APP.
However, this is not the solution the author wants. Due to work needs, the author does not want to and dare not accept Alipay’s SDK, for fear of being reviewed and scanned by Apple’s father. If your APP "should" use Apple Pay, even if you don't use Alipay's functions, but it includes Alipay's SDK, it may be rejected if the audit is found.
Keep looking for a solution.
I downloaded Alipay's Demo, and after trying it, I can indeed jump back to the APP.
The landlord is thinking, since the SDK can realize this function, it means that Alipay still supports the function of returning to the APP after the H5 payment is completed, not to the document. Go to the browser or merchant APP. Users can manually switch back to the browser or merchant APP", but Alipay is unwilling to disclose it.
Then take this Alipay Demo as the starting point. Although there is a parameter schemeStr in the SDK, the SDK is a black box, and you don't know what it does in it. /**
* Payment interface
*
* @param orderStr order information
* @param schemeStr The scheme registered in info.plist by the calling payment app
* @param completionBlock Payment result callback Block, used for wap payment result callback (non-jump wallet payment)
*/- (void)payOrder:(NSString *)orderStr
fromScheme:(NSString *)schemeStr
callback:(CompletionBlock)completionBlock;
Tracing back to the source, the Alipay APP will eventually open [UIApplication sharedApplication] openURL:]
I searched in the Demo project, but there is nothing. But I am sure there must be in the SDK!
whatever —— Method Swizzling#import #import @implementation UIApplication (TrackTimer)+ (void)load
{ static dispatch_once_t oneToken; dispatch_once(&oneToken, ^{
SEL mySelector = NSSelectorFromString(@"my_openURL:");
SEL orginalSelector = NSSelectorFromString(@"openURL:");
Method myMethod = class_getInstanceMethod([self class], mySelector);
Method orginalMethod = class_getInstanceMethod([self class], orginalSelector); BOOL didAddMethod = class_addMethod([self class], orginalSelector, method_getImplementation(myMethod), method_getTypeEncoding(myMethod)); if (didAddMethod) {
class_replaceMethod([self class], mySelector, method_getImplementation(orginalMethod), method_getTypeEncoding(orginalMethod));
} else {
method_exchangeImplementations(myMethod, orginalMethod);
}
});
}
- (void)my_openURL:(NSURL*)url
{ NSLog(@"%@",url);
[self my_openURL:url];
}
The print result is as follows
URLDecodealipaymatrixbwf0cml3://alipayclient/?{
"fromAppUrlScheme" : "alisdkdemo",
"requestType" : "SafePay",
"dataString" : "trade_no="2018041921001001270586523089"&pay_phase_id=""&biz_type="trade"&biz_sub_type="TRADE"&app_name="tb"&extern_token="1fc77c67c70ef70d58e2bf7c513d91a5"&appenv=""&pay_channel_id="alipay_sdk"&bizcontext="{"av":"1","sc":"h5tonative","ty":"ios_lite","appkey":"2014052600006128","sv":"h.a.3.5.3","an":"com.antfin.AliSDKDemo"}""
}
Why is there a little garbled code in front, alipaymatrixbwf0cml3, don't care about it. fromAppUrlScheme, is it a surprise?
Does Alipay H5 payment have this parameter? The landlord quickly tried it with his own project, webView will eventually have an alipay:// request, intercept it, and look at the parameters after URLDecode (I have blocked some fields)
alipay://alipayclient/?{"dataString":"h5_route_token="xxxxxxxxxxxxx"&is_h5_route="true"","requestType":"SafePay","fromAppUrlScheme":"alipays"}
There is also the parameter fromAppUrlScheme, and the default is URLScheme: alipays of Alipay APP.
After comparison, it is found that the schemeStr parameter passed in the SDK corresponds to the fromAppUrlScheme field in alipay://.
From this, the poster guessed that when Alipay is opened at alipay://, the fromAppUrlScheme is passed in, and after the payment is completed, it will jump to the corresponding APP.
In the end, the landlord verified the above guess in his own project.
sum it up
final solution
Option One
Connect to the SDK provided by Alipay, and pass the schemeStr parameter into the URLScheme of your APP. Specific mobile website payment transfer to Native payment
Option II
No need to connect to SDK, no need to add Alipay whitelist, webView intercepts alipay://alipayclient request, add or modify the parameter fromAppUrlScheme to your own URLScheme value (this step is not that simple, do it yourself, laughing), generate a new NSURL, and then use [[UIApplication sharedApplication] openURL:] to open it.
2018.5.24 update (you don't need to read the following paragraph if you understand it above)
People always send me private messages asking me how to add fromAppUrlScheme. It may be the "webView interception" I said, so that beginners don't understand it, just mention it briefly.
Intercept the URL of the request in the webView "Proxy method for initiating a request", that is, if the request starts with alipay://alipayclient, it means that the request will jump to Alipay's request. Replace the value of fromAppUrlScheme with your own scheme value. (Of course, if it is more rigorous, it should be judged whether the key fromAppUrlScheme exists, replace its value if it exists, and append it if it does not exist). Generate an NSURL with the replaced string, and use [[UIApplication sharedApplication] openURL:newURL] to jump to Alipay. The proxy method returns NO, which means the request is terminated.
————————————————
Copyright statement: This article is an original article of CSDN blogger "weixin_39972567", following the CC 4.0 BY-SA copyright agreement, please attach the original source link and this statement for reprinting .
Original link: https://blog.csdn.net/weixin_39972567/article/details/111483775