JASPI Payment

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 TenPayV3Controller.

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

Reference file for this project:

/Controllers/TenPayV3Controller.cs

Frontend

Reference file for this project:

/Views/TenPayV3/ProductItem.cshtml

Effects

Open Preview (opens new window)

ProductItem Product details

Backend

Reference code: ProductItem() method under TenPayV3Controller.

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/TenPayV3Controller.cs

Front-end.

Reference file for this project:

/Views/TenPayV3/ProductItem.cshtml

Effects

This project reference file: /Views/TenPayV3/ProductItem.cshtml

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 TenPayV3Controller.JsApi() for the code.

[CustomOAuth(null, "/TenpayV3/OAuthCallback")]
public ActionResult JsApi(int productId, int hc)
{
  try

    {
        //Get the product information
        //...
        // Call JsApi to get prepayment information.
        //...

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

}

Reference file for this project:

/Controllers/TenPayV3Controller.cs

In the above code, the productId parameter is the number of the product, here as a Sample demonstration, it is a simulated list from memory and query, in the actual project, the product information is usually stored in the database, according to the productId from the data to find the product data; the hc function is to ensure the validity of the current memory information is set to the corresponding product information HashCode, you do not need to use it in the actual development project can be ignored. The hc function is set to ensure the validity of the current memory information corresponding to the product information HashCode, the actual development of the project need not be used, 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:

WeixinJSBridge.invoke(
  "getBrandWCPayRequest",
  {
    appId: "", //public name, passed in by merchant
    timeStamp: "", //timestamp
    nonceStr: "", //random string
    package: "", //extension package
    signType: "MD5", //WeChat signature type:MD5
    paySign: "", //WeChat signature
  },
  function (res) {
    if (res.err_msg == "get_brand_wcpay_request:ok") {
      //Payment successful
    }
  }
);

Reference file for this project:

/Views/TenPayV3/JsApi.cshtml

Effects