Introduction au processus de paiement et de remboursement du programme WeChat Mini

不言
Libérer: 2018-06-27 13:40:02
original
1957 Les gens l'ont consulté

Cet article présente principalement le processus de paiement et de remboursement du mini programme WeChat. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Je travaille sur un. Mini programme WeChat récemment, cela implique le processus de paiement et de remboursement du mini programme, j'ai donc lu grossièrement cet aspect encore et encore, et je vais le résumer dans cet article

Tout d'abord, permettez-moi. Expliquer, Paiement du mini-programme WeChat La logique principale est concentrée sur le backend. Le frontend n'a besoin que de transporter les données nécessaires au paiement pour demander l'interface backend, puis gérer le succès ou l'échec correspondant en fonction des résultats renvoyés. J'utilise PHP sur le backend. Bien sûr, dans ce blog, je ne vais pas publier un tas de code pour expliquer la mise en œuvre spécifique du paiement, mais je me concentrerai principalement sur l'ensemble du processus de paiement et certains détails. Par conséquent, les amis qui utilisent d’autres langages back-end peuvent y jeter un œil si nécessaire. Bien souvent, les besoins de développement et les solutions aux problèmes correspondants doivent réellement dépasser le niveau de la syntaxe du langage et être considérés du point de vue des systèmes et des processus. Bon, plus de bêtises. Allez droit au but.

1. Paiement

Le paiement est principalement divisé en plusieurs étapes :

  • Le front-end contient les données nécessaires au paiement (identifiant du produit, quantité achetée, etc.) pour lancer une demande de paiement

  • Après réception de la demande de paiement, le le back-end traite les données de paiement puis transporte les données traitées demande l'interface de commande unifiée de paiement du serveur WeChat

  • Le backend reçoit les données de retour de la demande précédente au Le serveur WeChat le traite à nouveau, puis le renvoie au front-end afin que le front-end puisse commencer à payer.

  • Le front-end effectue l'action de paiement

  • Une fois le paiement frontal terminé, le serveur WeChat enverra une notification de paiement au back-end (c'est-à-dire également que WeChat veut vous dire que le client a payé), le backend détermine que le paiement est effectué sur la base de cette notification, puis prend les actions correspondantes une fois le paiement effectué. complétés, comme la modification du statut de la commande, l'ajout de journaux de transactions, etc.

Il ressort de ces étapes que la fonction principale du backend est de transmettre les données nécessaires au paiement au serveur WeChat, puis de déterminer si le paiement est effectué basé sur la réponse du serveur WeChat .

Ce processus est assez simple à comprendre. Au sens figuré, le front-end est un client, le back-end est le magasin et l'interface de commande unifiée du serveur WeChat est comme un caissier. Le client dit au magasin qui je suis et maintenant je dois payer autant que je veux pour vous acheter ceci ou cela. Le magasin a dit au caissier : "Combien un tel doit-il payer ? Vous devez être prêt à récupérer l'argent." Après que le caissier ait reçu l'argent, il est allé dire au magasin, j'ai reçu l'argent, s'il vous plaît, donnez-lui quelque chose.
La mise en œuvre spécifique de chaque étape sera expliquée en détail ci-dessous.

1. Demande de paiement frontale

La demande de paiement frontale contient simplement les données requises pour le paiement, telles que l'identifiant de l'utilisateur, le montant du paiement, l'identifiant de l'ordre de paiement, etc. est lié à votre logique métier ** Ou aux données associées liées à ** la prochaine étape de demande de l'interface de commande unifiée de paiement du serveur WeChat **, utilisez wx.request() de l'applet WeChat pour demander l'interface de paiement back-end.

2. Le backend demande au serveur WeChat

Une fois que le backend a reçu la demande de paiement envoyée par le frontend, il peut effectuer des vérifications associées, par exemple déterminer s'il y a des problèmes avec l'utilisateur et si le montant du paiement est correct. Non, attendez.

Après avoir vérifié qu'il n'y a pas de problème et que vous pouvez demander un paiement au serveur WeChat, le backend doit utiliser le format de données spécifié par WeChat pour demander l'interface d'ordre de paiement unifiée de WeChat.

Demande de données spécifiées par WeChat :

Cela nécessite plus de code à implémenter. La quantité de données requises étant importante, elles doivent également être cryptées et envoyées au format XML.
Tout d'abord, les données suivantes sont des paramètres qui doivent être fournis au serveur WeChat lors de l'utilisation du paiement par mini-programme.

  • Mini programme app. Il n’y a probablement personne qui écrit de petits programmes qui ne le sache. . .

  • ID utilisateur openid. C'est l'identifiant du mini-programme de l'utilisateur. J'ai expliqué comment l'obtenir dans mon dernier blog.

  • Numéro de commerçant mch_id. Après avoir postulé avec succès pour la certification de marchand de paiement WeChat, l'e-mail qui vous sera envoyé par WeChat contiendra

  • numéro de commande du marchand out_trade_no. Le numéro de commande généré par le commerçant pour ce paiement

  • montant total total_fee. Le montant total de la commande, un point très important est que l'unité est en centimes, donc faites-y particulièrement attention.

  • Adresse de l'interface de notification de rappel du serveur WeChat notify_url. Une fois que WeChat aura confirmé que l'argent est arrivé, il enverra plusieurs messages à cette adresse pour vous informer que le client a payé. Vous devez renvoyer un message à WeChat pour indiquer que vous avez reçu la notification. . Cette adresse ne peut pas avoir de numéro de port et doit pouvoir accepter directement les requêtes de la méthode POST.

  • Type de transaction trade_type . La valeur de paiement de l'applet WeChat est unifiée en tant que corps d'informations sur le produit JSAPI

  • . Semblable au format de "Tencent-Game"

  • Adresse IP du terminal spbill_create_ip. Adresse IP du terminal, qui est l'adresse IP demandant le paiement.

  • Chaîne aléatoire nonce_str . Une chaîne générée aléatoirement par le backend est requise pour garantir la sécurité des données. WeChat ne nécessite pas plus de 32 bits.

  • Signe signature. Utilisez tous les paramètres ci-dessus pour traiter le cryptage et générer la signature en conséquence. (La méthode de traitement spécifique est visible dans le code ci-dessous, qui peut être réutilisé directement.)

Après avoir traité toutes les données ci-dessus, organisez les données au format XML et envoyez à l'interface de commande unifiée de paiement WeChat de la méthode POST https://api.mch.weixin.qq.com/pay/unifiedorder.

3. Le backend accepte les données renvoyées par le serveur WeChat

Après que le serveur WeChat ait reçu les données de paiement, s'il n'y a pas de problème avec les données, il le fera renvoie les données correspondantes pour le paiement, une donnée très importante est le champ de données nommé prepay_id. Ces données doivent être renvoyées au front-end afin que le front-end puisse continuer à payer.

Par conséquent, une fois que le back-end a reçu les données de retour du serveur WeChat, il doit effectuer le traitement correspondant, et enfin renvoyer les données suivantes au front-end :

  1. appid Inutile de dire

  2. timeStamp horodatage actuel

  3. chaîne aléatoire nonceStr

  4. package est celui mentionné ci-dessus, prepay_id, mais rappelez-vous que le format est "prepay_id= prepay_id_item". Sinon, une erreur en résultera.

  5. méthode de cryptage signType, doit généralement être MD5

  6. paySign traite et crypte les données ci-dessus en conséquence.

À ce stade, l'interface de paiement back-end a rempli la fonction de réception de la demande de paiement initial et de renvoi des données requises pour le paiement initial.

4. Le front-end initie le paiement

Après avoir reçu les données de retour, le front-end utilise wx.requestPayment() pour demander l'initiation du paiement. Les valeurs des paramètres d'objet requis par cette API sont les données renvoyées à l'étape précédente.

5. Le backend accepte le rappel du serveur WeChat

Une fois le paiement effectué par le frontend, le serveur WeChat confirme que le paiement a été effectué. Une notification sera envoyée à l'adresse de rappel définie lors de la première étape. Après avoir reçu la notification, l'interface de rappel de réception principale peut déterminer si le paiement est effectué et déterminer les actions ultérieures.

Il convient de noter qu'après avoir reçu la notification de rappel du serveur WeChat, il est jugé si le paiement a réussi en fonction du champ result_code de la notification. Après avoir reçu la notification réussie, le backend doit renvoyer les données de réussite au serveur WeChat pour informer le serveur WeChat que la notification de rappel a été reçue. Sinon, le serveur WeChat continuera à envoyer des messages au backend. De plus, les notifications WeChat sont envoyées au format XML, vous devez donc faire attention lors de leur acceptation et de leur traitement.

Le processus de paiement approximatif sur WeChat est le suivant. Ce qui suit est la classe de paiement WeChat de la syntaxe PHP. Vous pouvez vous référer aux étapes ci-dessus pour approfondir votre compréhension. Lorsque vous devez payer, vous pouvez directement transmettre les paramètres pour instancier cette classe, puis appeler la méthode de paiement de la classe.

//微信支付类
class WeiXinPay{
  //=======【基本信息设置】=====================================
  //微信公众号身份的唯一标识
  protected $APPID = appid;//填写您的appid。微信公众平台里的
  protected $APPSECRET = secret;
  //受理商ID,身份标识
  protected $MCHID = '11111111';//商户id
  //商户支付密钥Key
  protected $KEY = '192006250b4c09247ec02edce69f6a2d';
  //回调通知接口
  protected $APPURL =   'https://smart.afei.com/receivesuc';
  //交易类型
  protected $TRADETYPE = 'JSAPI';
  //商品类型信息
  protected $BODY = 'wx/book';
  //微信支付类的构造函数
  function __construct($openid,$outTradeNo,$totalFee){
    $this->openid = $openid; //用户唯一标识
    $this->outTradeNo = $outTradeNo; //商品编号
    $this->totalFee = $totalFee; //总价
  }
  //微信支付类向外暴露的支付接口
  public function pay(){
    $result = $this->weixinapp();
    return $result;
  }
   //对微信统一下单接口返回的支付相关数据进行处理
   private function weixinapp(){
     $unifiedorder=$this->unifiedorder();
     $parameters=array(
     'appId'=>$this->APPID,//小程序ID
     'timeStamp'=>''.time().'',//时间戳
     'nonceStr'=>$this->createNoncestr(),//随机串
     'package'=>'prepay_id='.$unifiedorder['prepay_id'],//数据包
     'signType'=>'MD5'//签名方式
       );
     $parameters['paySign']=$this->getSign($parameters);
     return $parameters;
   }
  /*
   *请求微信统一下单接口
   */
  private function unifiedorder(){
    $parameters = array(
      'appid' => $this->APPID,//小程序id
      'mch_id'=> $this->MCHID,//商户id
      'spbill_create_ip'=>$_SERVER['REMOTE_ADDR'],//终端ip
      'notify_url'=>$this->APPURL, //通知地址
      'nonce_str'=> $this->createNoncestr(),//随机字符串
      'out_trade_no'=>$this->outTradeNo,//商户订单编号
      'total_fee'=>floatval($this->totalFee), //总金额
      'open_id'=>$this->openid,//用户openid
      'trade_type'=>$this->TRADETYPE,//交易类型
      'body' =>$this->BODY, //商品信息
    );
    $parameters['sign'] = $this->getSign($parameters);
    $xmlData = $this->arrayToXml($parameters);
    $xml_result = $this->postXmlCurl($xmlData,'https://api.mch.weixin.qq.com/pay/unifiedorder',60);
    $result = $this->xmlToArray($xml_result);
    return $result;
  }
  //数组转字符串方法
  protected function arrayToXml($arr){
    $xml = "<xml>";
    foreach ($arr as $key=>$val)
    {
      if (is_numeric($val)){
        $xml.="<".$key.">".$val."</".$key.">";
      }else{
         $xml.="<".$key."><![CDATA[".$val."]]></".$key.">";
      }
    }
    $xml.="</xml>";
    return $xml;
  }
  protected function xmlToArray($xml){
    $array_data = json_decode(json_encode(simplexml_load_string($xml, &#39;SimpleXMLElement&#39;, LIBXML_NOCDATA)), true);
    return $array_data;
  }
  //发送xml请求方法
  private static function postXmlCurl($xml, $url, $second = 30)
  {
    $ch = curl_init();
    //设置超时
    curl_setopt($ch, CURLOPT_TIMEOUT, $second);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); //严格校验
    //设置header
    curl_setopt($ch, CURLOPT_HEADER, FALSE);
    //要求结果为字符串且输出到屏幕上
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    //post提交方式
    curl_setopt($ch, CURLOPT_POST, TRUE);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $xml);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 20);
    curl_setopt($ch, CURLOPT_TIMEOUT, 40);
    set_time_limit(0);
    //运行curl
    $data = curl_exec($ch);
    //返回结果
    if ($data) {
      curl_close($ch);
      return $data;
    } else {
      $error = curl_errno($ch);
      curl_close($ch);
      throw new WxPayException("curl出错,错误码:$error");
    }
  }
  /*
   * 对要发送到微信统一下单接口的数据进行签名
   */
  protected function getSign($Obj){
     foreach ($Obj as $k => $v){
     $Parameters[$k] = $v;
     }
     //签名步骤一:按字典序排序参数
     ksort($Parameters);
     $String = $this->formatBizQueryParaMap($Parameters, false);
     //签名步骤二:在string后加入KEY
     $String = $String."&key=".$this->KEY;
     //签名步骤三:MD5加密
     $String = md5($String);
     //签名步骤四:所有字符转为大写
     $result_ = strtoupper($String);
     return $result_;
   }
  /*
   *排序并格式化参数方法,签名时需要使用
   */
  protected function formatBizQueryParaMap($paraMap, $urlencode)
  {
    $buff = "";
    ksort($paraMap);
    foreach ($paraMap as $k => $v)
    {
      if($urlencode)
      {
        $v = urlencode($v);
      }
      //$buff .= strtolower($k) . "=" . $v . "&";
      $buff .= $k . "=" . $v . "&";
    }
    $reqPar;
    if (strlen($buff) > 0)
    {
      $reqPar = substr($buff, 0, strlen($buff)-1);
    }
    return $reqPar;
  }
  /*
   * 生成随机字符串方法
   */
  protected function createNoncestr($length = 32 ){
     $chars = "abcdefghijklmnopqrstuvwxyz0123456789";
     $str ="";
     for ( $i = 0; $i < $length; $i++ ) {
     $str.= substr($chars, mt_rand(0, strlen($chars)-1), 1);
     }
     return $str;
     }
}
Copier après la connexion

Ce qui précède est le processus pertinent de paiement WeChat. Après avoir clarifié les idées, le processus est relativement clair et simple. Le fait est que vous devez faire attention à certains détails, tels que le format des données, la méthode de cryptage, etc.

Parlons de la mise en œuvre spécifique du remboursement du mini programme WeChat

2 Remboursement

Remboursement du mini programme Le processus et. le paiement est similaire, mais il existe quelques différences dans les détails.

La première étape du remboursement est généralement la suivante :

  • Une fois que l'utilisateur a cliqué sur le bouton de remboursement sur le front-end, le back-end reçoit la demande de remboursement de l'utilisateur. et le présente au commerçant via le backend du centre commercial. Une fois que le commerçant a déterminé que le remboursement est autorisé, le backend lance une demande à l'interface de remboursement WeChat pour demander un remboursement.

  • Une fois que le backend a envoyé une demande à l'interface de remboursement WeChat, il obtient les informations de réponse, détermine si le remboursement est effectué, puis modifie le statut de la commande et toute autre logique métier en fonction du fait que le remboursement est terminé.

Les étapes de remboursement sont relativement simples par rapport au paiement WeChat.

Il convient de noter les deux points suivants :

1 Après avoir demandé un remboursement depuis l'interface de remboursement WeChat, c'est OK selon. la réponse reçue. Déterminez directement si le remboursement est effectué. Il n'est pas nécessaire de configurer une interface de rappel spéciale pour attendre les notifications WeChat. Bien entendu, si nécessaire, vous pouvez également mettre en place une interface de rappel sur la plateforme marchande WeChat pour accepter les rappels WeChat, mais ce n'est pas nécessaire.

2. La demande de remboursement nécessite que le certificat de sécurité fourni par WeChat soit installé sur le serveur demandeur. Autrement dit, lors du lancement d'une demande de remboursement par rapport à une demande de paiement, le mode de demande ne peut pas être réutilisé. lors de la demande, car WeChat rembourse Pour les demandes nécessitant un certificat, ce certificat peut être téléchargé depuis la plateforme marchande WeChat après avoir demandé avec succès un compte marchand WeChat. Le certificat pour l'environnement de développement PHP sous Linux doit uniquement être placé dans le certificat. dossier dans le répertoire racine du site Web. D'autres environnements de développement peuvent nécessiter des opérations d'importation.

Ce qui suit explique les étapes spécifiques du remboursement

1 L'utilisateur lance une demande de remboursement

.

L'utilisateur lance une demande de remboursement sur le front-end, et le back-end reçoit la demande de remboursement, marque la commande correspondante comme demandant un remboursement et l'affiche dans le backend après que le commerçant l'a vérifiée, s'il est d'accord. au remboursement, il effectuera l'opération correspondante. Ce n'est qu'alors que le remboursement effectif sera saisi.

2. Le commerçant initie une demande de remboursement

Après le remboursement, il effectuera l'opération correspondante. le commerçant accepte le remboursement, le backend lance une demande auprès de l'API de remboursement fournie par WeChat.

同请求微信支付API一样.退款请求也需要将需要的参数进行签名后以XML发送到微信的退款API [https://api.mch.weixin.qq.com/pay/refund](https://api.mch.weixin.qq.com/pay/refund)
退款请求需要的参数如下(多个参数在支付API请求时也有使用):

  • 小程序 appid。

  • 商户号 mch_id 。申请开通微信支付商户认证成功后微信发给你的邮件里有

  • 商户订单号 out_trade_no 。退款订单在支付时生成的订单号

  • 退款订单号 out_refund_no 。由后端生成的退款单号,需要保证唯一,因为多个同样的退款单号只会退款一次。

  • 总金额 total_fee 。订单总金额,单位为分。

  • 退款金额 refund_fee 需要退款的金额,单位同样为分

  • 操作员 op_user_id .与商户号相同即可

  • 随机字符串 nonce_str 。同支付请求

  • 签名 sign 。使用上面的所有参数进行相应处理加密生成签名。(具体处理方式与支付相同,可直接复用。)

三. 退款完成

在发起退款请求后,就可以直接根据请求的响应XML中的 result_code字段来判断退款是否成功,从而对订单状态进行处理和后续操作。不需要像支付那样等待另一个接口的通知来确定请求状态。当然如上文所说,如果需要微信服务器发送通知到后端的话,可以到微信商户平台进行设置。

退款因为流程与支付大同小异,因此退款的PHP类我选择了直接继承支付类,

代码如下,注意区分退款请求方法postXmlSSLCurl和支付请求方法postXmlCurl的区别,这也就是上文提到的退款需要的双向证书的使用。

"`
 class WinXinRefund extends WeiXinPay{
  protected \$SSLCERT_PATH = &#39;cert/apiclient_cert.pem&#39;;//证书路径
  protected \$SSLKEY_PATH = &#39;cert/apiclient_key.pem&#39;;//证书路径
  protected \$opUserId = &#39;1234567899&#39;;//商户号
function __construct($openid,$outTradeNo,$totalFee,$outRefundNo,$refundFee){
  //初始化退款类需要的变量
  $this->openid = $openid;
  $this->outTradeNo = $outTradeNo;
  $this->totalFee = $totalFee;
  $this->outRefundNo = $outRefundNo;
  $this->refundFee = $refundFee;
} 
public function refund(){
  //对外暴露的退款接口
  $result = $this->wxrefundapi();
  return $result;
}
private function wxrefundapi(){
  //通过微信api进行退款流程
  $parma = array(
    &#39;appid&#39;=> $this->APPID,
    &#39;mch_id&#39;=> $this->MCHID,
    &#39;nonce_str&#39;=> $this->createNoncestr(),
    &#39;out_refund_no&#39;=> $this->outRefundNo,
    &#39;out_trade_no&#39;=> $this->outTradeNo,
    &#39;total_fee&#39;=> $this->totalFee,
    &#39;refund_fee&#39;=> $this->refundFee,
    &#39;op_user_id&#39; => $this->opUserId,
  );
  $parma[&#39;sign&#39;] = $this->getSign($parma);
  $xmldata = $this->arrayToXml($parma);
  $xmlresult = $this->postXmlSSLCurl($xmldata,&#39;https://api.mch.weixin.qq.com/secapi/pay/refund&#39;);
  $result = $this->xmlToArray($xmlresult);
  return $result;
}
//需要使用证书的请求
function postXmlSSLCurl($xml,$url,$second=30)
{
  $ch = curl_init();
  //超时时间
  curl_setopt($ch,CURLOPT_TIMEOUT,$second);
  //这里设置代理,如果有的话
  //curl_setopt($ch,CURLOPT_PROXY, &#39;8.8.8.8&#39;);
  //curl_setopt($ch,CURLOPT_PROXYPORT, 8080);
  curl_setopt($ch,CURLOPT_URL, $url);
  curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,FALSE);
  curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,FALSE);
  //设置header
  curl_setopt($ch,CURLOPT_HEADER,FALSE);
  //要求结果为字符串且输出到屏幕上
  curl_setopt($ch,CURLOPT_RETURNTRANSFER,TRUE);
  //设置证书
  //使用证书:cert 与 key 分别属于两个.pem文件
  //默认格式为PEM,可以注释
  curl_setopt($ch,CURLOPT_SSLCERTTYPE,&#39;PEM&#39;);
  curl_setopt($ch,CURLOPT_SSLCERT, $this->SSLCERT_PATH);
  //默认格式为PEM,可以注释
  curl_setopt($ch,CURLOPT_SSLKEYTYPE,&#39;PEM&#39;);
  curl_setopt($ch,CURLOPT_SSLKEY, $this->SSLKEY_PATH);
  //post提交方式
  curl_setopt($ch,CURLOPT_POST, true);
  curl_setopt($ch,CURLOPT_POSTFIELDS,$xml);
  $data = curl_exec($ch);
  //返回结果
  if($data){
    curl_close($ch);
    return $data;
  }
  else {
    $error = curl_errno($ch);
    echo "curl出错,错误码:$error"."<br>";
    curl_close($ch);
    return false;
  }
}}
Copier après la connexion

三. 总结

以上就是关于微信支付和退款的流程及相关知识的介绍。文中的 PHP类 均封装直接可用。

因为微信支付和退款涉及的东西较为繁杂,很多人直接看官方文档可能会一头雾水,所以看过此文了解流程和要点后,再去看微信官方文档。一方面可以更清晰的了解小程序的支付和退款流程。另一方面,本文因为篇幅有限及作者能力有限,肯定有无暇顾及或有所纰漏之处。为求稳妥,还是需要多看看官方开发文档。毕竟事涉支付,出个BUG可不是小事。
最后扯点闲话吧。这篇博客本来应该在三个月前就发表的,也算当时我从一无所知到独立完成微信小程序商城前后端的总结系列的第一篇。但是公司突然出现人员和项目的变动,导致管理和项目上都混乱不堪,再加上个人的惰性,导致此篇博客一直拖到三个月后的今天才断断续续写完。这三个月我的心态因为各种事起起伏伏,也颇有一番风味。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

微信小程序中支付后调用SDK的异步通知及验证处理订单方法

关于node.js实现微信支付退款的功能

微信小程序page的生命周期和音频播放及监听的介绍

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal