Reading list Switch to dark mode

    how to create payment modules in Prestashop 1.7

    Updated 22 April 2017

    In this blog, we will learn how to develop Payment modules in Prestashop 1.7 .

    In Prestashop v1.6 we use hook displayPayment to show payment option of our payment module on the checkout page. But now it won’t work in Prestashop 1.7 .

    Now you have to use hook paymentOptions in place of hook displayPayment to show your payment module’s payment option.

    In hook paymentOptions we can set our payment module’s form and other details like the example below –

    public function hookPaymentOptions()
    {
        $newOption = new PaymentOption();
        $paymentForm = $this->fetch('module:mymodule/views/templates/hook/payment.tpl');
        $newOption->setCallToActionText($this->trans('Pay by MyModule', array(), 'Modules.MyModule.Shop'))
            ->setForm($paymentForm)
            ->setLogo(_MODULE_DIR_.'mymodule/views/img/logo-mymodule.png')
            ->setAdditionalInformation('your additional Information')
            ->setAction($this->context->link->getModuleLink($this->name, 'payment'));
        return [$newOption];
    }
    
    

    To show form when clicking on the checkbox of your payment option,

    Searching for an experienced
    Prestashop Company ?
    Read More

    use setForm($form) method of paymentOption class

    Here $form is custom HTML to display e.g. a form where a customer will fill his payment details. The HTML must not contain a submit button, as  the Core will submit the form.

    Note – The HTML must not contain a submit button, as  the Core will submit the form.

    You also can use other options provided by PrestaShop. Some are described below-

    setForm($form) – To set form on checking your payment option.

    setLogo($logo) – To set your payment logo. $logo is the path of your logo image.

    setAdditionalInformation($callToActionText) – If your module need any additional information. $callToActionText is the path of your tpl file contains additional information about your payment option.

    setAction() – Link to which you payment form will be submitted.

    Note : Please have a look to prestashop1.7/src/Core/Payment/paymentOptions.php class file for payment options provided by Prestashop.

    For your JavaScript validations, you can use:

    $(‘#payment-confirmation > .ps-shown-by-js > button’).click(function(e) {
        var myPaymentMethodSelected = $(‘.payment-options’).find(“input[data-module-name=’myModuleName’]”).is(‘:checked’);
        
        if (myPaymentMethodSelected){
        //Your validations or other checks.
        }
        
    });
    
    

    You can take a reference for paymentReturn hook code from the below code as some keys are changed in the parameter $params of this hook –

    public function hookPaymentReturn($params) 
    { 
        if (!$this->active) {
            return;
        }
        if (!isset($params['order']) || ($params['order']->module != $this->name)) {
            return false;
        }
        if (isset($params['order']) && Validate::isLoadedObject($params['order']) && isset($params['order']->valid)) {
            $this->smarty->assign(array(
                'id_order' => $params['order']->id,
                'valid' => $params['order']->valid,
                ));
        }
        if (isset($params['order']->reference) && !empty($params['order']->reference)) {
            $this->smarty->assign('reference', $params['order']->reference);
        }
        $this->smarty->assign(array(
            'shop_name' => $this->context->shop->name,
            'reference' => $params['order']->reference,
            'contact_url' => $this->context->link->getPageLink('contact', true)
            ));
        return $his->fetch('mymodule/views/templates/hook/payment_return.tpl'); 
    }

    You can take a reference for payment_return.tpl which is returned from hookPaymentReturn

    {if $valid == 1}
     // write your code what you want to show to the customer if order is valid.
    {else}
     // write your code what you want to show to the customer if some error occurred while creating order.
    {/if}
    
    

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    15 comments

  • nyko_k
    Hi,
    Thanks for this tutorial.
    Do you know if there is a way to change the display order of every payment module installed ?
    • nyko_k
      Just found it…
      Have to find the paymentOptions hook in Appearance -> Positions, but it’s an invisible hook.
  • Jota McCready
    Please I Need some help,

    The payment option I’m develping does not show up in the payment option list in the chekout,

    This is mi code:
    ************************************
    public function hookPaymentOptions($params)
    {
    if (!$this->active) {

    return;
    }

    // Check if cart has product download
    if ($this->hasProductDownload($params[‘cart’])) {
    return;
    }

    $newOption = new PaymentOption();
    $newOption->setModuleName($this->name)
    ->setCallToActionText($this->trans(‘Fastpay’, array(), ‘Modules.Fastpay.Shop’))
    ->setAction($this->context->link->getModuleLink($this->name, ‘validation’, array(), true))
    ->setAdditionalInformation($this->fetch(‘fastpay/views/templates/hook/payment.tpl’));

    $payment_options = [
    $newOption,
    ];
    return $payment_options;
    }
    **************************************************

    Should I declare or define the “Modules.Fastpay.Shop”?

    Please help!!
    Thanks in advance.

    • sumit
      Hello,

      It looks like you have set setAdditionalInformation wrongly. it should be
      ->setAdditionalInformation($this->fetch(‘module:fastpay/views/templates/hook/payment.tpl’)

      Also please make sure payment.tpl is there in the written path.
      Issue can be be because of your condition if ($this->hasProductDownload($params[‘cart’])) {

      So also try after removing this condition and then correct this condition.

      Please try with above solutions once.

  • Attila Szabo
    I am absolutely disgusted both as a programmer and as a human being, by needless, useless, payment paradigm changes made by prestashop in this version. Hundreds of modules stopped working, the documentation still sends to deprecated modules from 2011, as “example to follow”, the horrible programming practices they’ve implemented in the new payment options is staggering. Absolutely horrendous, useless modifications they’ve brought to the 1.7 payments. No wonder there are not a lot of people willing to build payment modules.
  • SnipWeb Dezone
    hello friend I have another problem, can you help me? I need to know how to redirect the customers to the order confirmation page after them got sucess wiht the payment option, I am sending the data to de payment gatway whit ajax and getting an sucess code but I am stil on the payment page… sorry my English
    • Webkul Support
      Payment is totally base on which payment gateway you are using for the payments. When the payment(transaction) is successful, create the order in prestashop or whatever required as per your requirements then redirect to the order confirmation page with required parameters by using below redirect code-Tools::redirect(‘index.php? controller=order-confirmation &id_cart=’.(int) $id_cart.’ &id_module=’.(int) $id_module.’ &id_order=’.$id_order.’ &key=’.$cart->secure_key);Set the values of variables as per your coding.
  • SnipWeb Dezone
    Please. Where can I set the value of … input[data-module-name…?
    • Webkul Support
      Hello,
      As we are checking the selected payment module with radio input’s attribute data-module-name as below –

      if ($(‘.payment-options’).find(“input[data-module-name=’myModuleName’]”).is(‘:checked’)) {
      ……
      }

      So how you can set the value of data-module-name ?
      Please remember we have set the different options for our module in the blog as below. There we did not set any value for the data-module-name but by default its value will always set to your module name ( $this->name )
      But if want to set a different value for the attribute the you have an option to set it with the calling one more function setModuleName($module_name) while setting different options of payment module and you can set it as below-

      $newOption = new PaymentOption();

      $paymentForm = $this->fetch(‘module:mymodule/views/templates/hook/payment.tpl’);

      $newOption->setCallToActionText($this->trans(‘Pay by MyModule’, array(), ‘Modules.MyModule.Shop’))

      ->setModuleName(‘my_custom_module_name’)

      ->setForm($paymentForm)
      ->setLogo(_MODULE_DIR_.’mymodule/views/img/logo-mymodule.png’)
      ->setAdditionalInformation(‘your additional Information’)
      ->setAction($this->context->link->getModuleLink($this->name, ‘payment’));

      return [$newOption];

      If you will set it then data-module-name attribute value will be my_custom_module_name now.
      So this is the process to set data-module-name and you can use it as per your requirements.
      In case of any further doubts feel free to ask.

      • SnipWeb Dezone
        Great explanation, thank you so much. It helps me alot and I will help a lot of people 🙂
        • Webkul Support
          In case of any further doubts feel free to ask.
          Thanks
  • Andresa
    Thank you very much, this helped me a lot
    • Daniele
      i dont understand how to do it uff
  • Sabelo Simelane
    Hi, where would you typically put the javascript validation? I have tried a few options and no success? Would this be in a tpl file? If I try doing that, I get an error that jquery is not defined. please assist.
    • sumit
      Hello,
      In prestashop 1.7 you can not put your javascript code in your .tpl files. So you have to create a seperate java script file at the path “views/js/jsFile.js” in your module and call that js file when you need. Prestashop has provided a hook “actionFrontControllerSetMedia” through which you can call your media files any where in the front office. So register this hook in your modules main file and use it like this-

      public function hookActionFrontControllerSetMedia($params)
      {
      $controller = Tools::getValue(‘controller’);
      if (‘order’ == $controller) {
      // Send variables to java script file like this…
      $jsDef = [
      ‘card_error’ => $this->l(‘Invalid card number.’),
      ‘exp_error’ => $this->l(‘Invalid expiration date.’),
      ‘cvv_error’ => $this->l(‘Invalid CVV.’),
      ];
      Media::addJsDef($jsDef);

      // call your media file like this
      $this->context->controller->registerJavascript(‘module-wk-js-mypayment’, ‘modules/mypaymentmodule/views/js/MyJsFile.js’);
      $this->context->controller->registerStylesheet(‘module-wk-css-mypayment’, ‘modules/mypaymentmodule/views/css/MyCssFile.css’);
      }
      }

      So in this way you can use JS. In case of any further issue please comment.

  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home