JSAPI

JSAPI Payment

To use WeChat payment in WeChat public web page, you must complete the payment process with the help of JSAPI.

First of all, you need to create a product page and provide an entry point to place an order on the page, e.g. one-click purchase. (implementation omitted)

In the current example, 3 key pages are provided: ProductList, ProductItem and JsApi (JSAPI order payment).

ProductList ProductList

Backend

Reference code: ProductList() method under TenPayApiV3Controller.

public ActionResult ProductList()
{
    var products = ProductModel.GetFakeProductList();
    return View(products);
}

Reference file for this project:

/Controllers/TenPayApiV3Controller.cs

Frontend

Reference file for this project:

//Views/TenPayApiV3/ProductItem.cshtml

Effects

Open Preview (opens new window)

ProductItem Product details

Backend

Reference code: ProductItem() method under TenPayApiV3Controller.

public ActionResult ProductItem(int productId, int hc)
{
    var products = ProductModel.GetFakeProductList();
    var product = products.FirstOrDefault(z => z.Id == productId);
    if (product == null || product.GetHashCode() ! = GetHashCode() !
    hc) {
        return Content("Product information doesn't exist or was entered illegally! 2003");
    }

    // Determine if it is being microsoft
    if (Senparc.Weixin.BrowserUtility.BrowserUtility.SideInWeixinBrowser(HttpContext))
    {
        // Being on WeChat side, directly jump to WeChat payment page
        return RedirectToAction("JsApi", new { productId = productId, hc = hc });
    }
    else
    {
        // Open it on PC and provide QR code scanning for payment
        return View(product);
    }

}

Description: The above code uses SideInWeixinBrowser() method to judge the running environment of the current page, if it is opened in WeChat, it will directly enter the JsApi payment page (see the introduction of the devolved JsApi), if it is opened in a non-WeChat environment (e.g., PC), it will display the product details and provide a choice of payment methods.

Reference file for this project:

/Controllers/TenPayApiV3Controller.cs

Frontend

Reference file for this project:

/Views/TenPayApiV3/ProductItem.cshtml

Effects

Select a product from Product List (opens new window) and click on it, you can see the detail page if you are on PC:

The above Payment Method 2: "Sweep" Payment There is a QR code automatically generated according to the selected product at the bottom of the page, use WeChat on your mobile phone to sweep it, then you can enter the corresponding product order page (i.e., JsApi order page).

JSAPI order payment page

Backend

After the user clicks the order button, a prepaid order needs to be generated in the backend and registered on the page, please refer to TenPayApiV3Controller.JsApi()

[CustomOAuth(null, "/TenpayApiV3/OAuthCallback")]
public ActionResult JsApi(int productId, int hc)
{
    try
    {
        //Get the product information
        //...

        // Call JsApi to get prepayment information.
        //Request information
        TransactionsRequestData jsApiRequestData = new(TenPayV3Info.AppId, TenPayV3Info.MchId, name,
            sp_billno, new TenpayDateTime(DateTime.Now.AddHours(1), false), null, notifyUrl, null,
            new() { currency = "CNY", total = price }, new(openId), null, null, null);

        // request interface
        var basePayApis2 = new Senparc.Weixin.TenPayV3.TenPayHttpClient.BasePayApis2(_httpClient,
            _tenpayV3Setting);
        var result = await basePayApis2.JsApiAsync(jsApiRequestData);

        if (result.VerifySignSuccess ! = true)
        {
            throw new WeixinException("Error getting prepay_id result verification!") ;
        }

        // Get the UI information package
        var jsApiUiPackage = TenPaySignHelper.GetJsApiUiPackage(TenPayV3Info.AppId, result.prepay_id);
        ViewData["jsApiUiPackage"] = jsApiUiPackage;

        // Other logic
        //...

        return View();
    }
    catch (Exception ex)
    {
        //...
    }
}

Reference file for this project:

/Controllers/TenPayApiV3Controller.cs

In the above code, the productId parameter is the number of the product, which is used as a Sample to simulate the list and query from the memory, in the actual project, the product information is usually stored in the database, and the product data will be found according to the productId; the hc function is a HashCode of the corresponding product information, which is set in order to make sure the validity of the current memory information. The hc function is set to ensure the validity of the current memory information corresponding to the product information HashCode, the actual development projects do not need to use, can be ignored.

In this process, the most critical code is: var result = TenPayOldV3.Unifiedorder(xmlDataInfo), result.prepay_id is the "prepayment ID", the front-end page must rely on prepay_id in order to make the mobile phone call the ID. id in order for the mobile phone to evoke WeChat payment. At this point, the current order number has already been registered in the WeChat Payment backend.

Note: This method uses the [CustomOAuth] feature, which is used to automatically use the OAuth function of WeChat public number to identify the user's identity, and this feature belongs to the public number category, so it will not be expanded here.

Front-end

The key operation of the front-end is to execute the JS code when the user clicks the "Pay" button:

// The WeixinJSBridgeReady event is triggered when the built-in WeChat browser completes its internal initialisation.
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    // Public Payment
    jQuery('a#getBrandWCPayRequest').click(function (e) {
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            "appId":"@jsApiUiPackage.AppId", // public name, passed in by the merchant
            "timeStamp":"@jsApiUiPackage.Timestamp", // timestamp
            "nonceStr":"@jsApiUiPackage.NonceStr", //random string
            "package":"@Html.Raw(jsApiUiPackage.PrepayIdPackage)", //extension package
            "signType": "RSA", //WeChat V3 Signature Type:RSA
            "paySign": "@Html.Raw(jsApiUiPackage.Signature)" //WeChat Signature
        }, function (res) {

            //alert(JSON.stringify(res));

            if (res.err_msg == "get_brand_wcpay_request:ok") {
                if (confirm('Payment successful! Click "OK" to enter the refund process test.')) {
                    location.href = '/Docs/TenPayV3/TenpayApiV3/Refund';
                }
                //console.log(JSON.stringify(res));
            }else{
                alert(JSON.stringify(res)); }
            }
            // Using the above method to determine the front-end return, the WeChat team would like to point out that res.err_msg will return ok if the user pays successfully, but it is not guaranteed to be reliable.
            // Therefore, the WeChat team suggests that when the ok return is received, the merchant back-end should be asked if it has received a notification that the transaction has been successful; if it has received a notification, the front-end should display the successful transaction interface; if it has not received a notification, the merchant back-end should take the initiative to call the Query Orders interface to query the current state of the order, and then feed back to the front-end to display the corresponding interface.
        }).

    });

Note: WeChat Pay ApiV2 and ApiV3 have totally different difference in order interface, please pay attention if you upgrade!

Reference file for this project:

/Views/TenpayApiV3/JsApi.cshtml

effect