New H5 Intermediate Page Payment Flow Solution

2024-09-03 07:03

Introduction

To provide a safer, more reliable, and convenient payment experience, AlipayHK will be upgrading the WAP interface payment process. Currently, the WAP interface offers two methods: H5 page login payment and intermediate page redirection to AlipayHK Wallet payment. After the upgrade, the WAP interface will only offer the intermediate page redirection to AlipayHK Wallet payment, and the H5 page login payment will be discontinued.

AlipayHK payment - In-App Cashier

The customer chooses AlipayHK as the payment channel on the checkout page to make payment.
Below landing page, which we called as Middle-Page, will pop up

System will auto launch AlipayHK wallet (Andriod) or customer chooses “Open this page in "AlipayHK"” and opens the AlipayHK App (iOS). If the system fails to launch the AlipayHK wallet, users can manually click the "Pay using AlipayHK" button or copy the link into another browser to complete the payment.

The customer can continue the payment process in AlipayHK app safely

Actions Required

Merchants can refer to the following table to see the impact:

Merchant scenario	Pay method	Impact
Web site payment	H5 page login payment	H5 page will be taken down and updated to Intermediate page redirection payment. Merchants do not need to make any modifications.
Web site payment	Intermediate page redirection to AlipayHK Wallet payment	No impact
App payment	H5 page login payment Intermediate page with H5 page login payment	H5 page will be taken down and updated to Intermediate page redirection payment. Merchants need to evaluate and possibly modify their apps.
App payment	Intermediate page redirection to AlipayHK Wallet payment	No impact

If the merchant uses web page integration, no changes or modifications are needed to upgrade to the new payment process.

If the merchant uses an app to place orders and logs into the payment through an H5 page, we recommend that the merchant quickly modify the app as per the following method to avoid affecting the payment process and user experience.

App Integration WAP Sample

If the merchant encounters a situation where the app does not launch AlipayHK wallet during payment, the app can be modified according to the sample code to support end-to-end payment.

IOS -WKWebview

copy
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    __weak APWebViewController* wself = self;
    NSString * reqUrl = navigationAction.request.URL.absoluteString;
    if ([reqUrl hasPrefix:@"alipays://"] || [reqUrl hasPrefix:@"alipay://"] || [reqUrl hasPrefix:@"alipayhk://"]) {
        // NOTE: Redirect to Alipay / AlipayHK App
        BOOL bSucc = [[UIApplication sharedApplication]openURL:navigationAction.request.URL];
        // NOTE: If failed, will redirect to iTune for AlipayHK app downloading
        if (!bSucc) {
            UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"Notice"
                                  message:@" Can't detect AlipayHK APP, please install and try again."
                                  delegate:wself
                                  cancelButtonTitle:@"Install Now"
                                  otherButtonTitles:nil];
            [alert show];
        }
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
{
    // NOTE: Redirect to Apple Store to download AlipayHK App
    NSString* urlStr = @"https://apps.apple.com/hk/app/alipayhk-%E6%94%AF%E4%BB%98%E5%AF%B6%E9%A6%99%E6%B8%AF/id1210638245";
    NSURL *downloadUrl = [NSURL URLWithString:urlStr];
    [[UIApplication sharedApplication]openURL:downloadUrl];
}

IOS-UIWebview

copy
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    // NOTE: ------ handling alipay related scheme -------
    // NOTE: If find scheme related to AlipayHK，then Redirect to AlipayHK App
    NSString* reqUrl = request.URL.absoluteString;
    if ([reqUrl hasPrefix:@"alipays://"] || [reqUrl hasPrefix:@"alipay://"] || [reqUrl hasPrefix:@"alipayhk://"]) {
        // NOTE: Redirect to Alipay / AlipayHK App
        BOOL bSucc = [[UIApplication sharedApplication]openURL:request.URL];
        // NOTE: If failed, will redirect to iTune for AlipayHK app downloading
        if (!bSucc) {
            UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"Notice"
                      message:@" Can't detect AlipayHK APP, please install and try again."
                      delegate:self
                      cancelButtonTitle:@"Install Now"
                      otherButtonTitles:nil];
            [alert show];
        }
        return NO;
    }
    return YES;
}
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
{
    // NOTE: Redirect to Apple Store to download AlipayHK App
    NSString* urlStr = @"https://apps.apple.com/hk/app/alipayhk-%E6%94%AF%E4%BB%98%E5%AF%B6%E9%A6%99%E6%B8%AF/id1210638245";
    NSURL *downloadUrl = [NSURL URLWithString:urlStr];
    [[UIApplication sharedApplication]openURL:downloadUrl];
}

Android

copy
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView = findViewById(R.id.web);
    webView.loadUrl("xxxxx");
    WebSettings settings = webView.getSettings();
    //Allow WebView to use JS
    settings.setJavaScriptEnabled(true);
    webView.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if(url.startsWith("alipays:") || url.startsWith("alipay") || url.startsWith("alipayhk:")) {
                try {
                    startActivity(new Intent("android.intent.action.VIEW", Uri.parse(url)));
                } catch (Exception e) {
                    new AlertDialog.Builder(context)
                    .setMessage("Can't detect AlipayHK APP, please install and try again.")
                    .setPositiveButton("Install Now", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            Uri alipayhkUrl = Uri.parse("https://play.google.com/store/apps/details?id=hk.alipay.wallet");
                            context.startActivity(new Intent("android.intent.action.VIEW", alipayhkUrl));
                        }
                    }).setNegativeButton("Cancel", null).show();
                }
                return true;
            }
            if (!(url.startsWith("http") || url.startsWith("https"))) {
                return true;
            }
            view.loadUrl(url);
            return true;
        }
    });
}

Contact Us

For any questions about this upgrade or payment flow, please contact the Alipay Hong Kong Integration Team at hk_integration_support_case@service.alipay.com.