Replacing credit card form with own

[steven99]

I am developing a module for Stripe that uses the Elements Stripe.js version that would require less PCI requirements and support of other Stripe payment features.  The WHMCS stripe module uses Stripe.js v2 which requires more PCI requirements and it is deprecated.  Stripe uses "off site tokenization" by using their own forms.   There is a request to switch to Elements but has been there for a year and not ETAs as well as only supporting cards and not other stripe payment options (beyond apple pay) 

 

I need to replace the credit card form that WHMCS uses with my own form / Stripe's Elements form so that the information is saved at Stripe and the token saved in WHMCS.  Using WHMCS's form for cards wont work here as it needs to use Stripe's.  I found _remoteinput in WHMCS doc,, but that does not fire in 7.6 and support has said it is no longer available and sent me this direction for further help.  However, WHMCS's own Stripe module replaces the form with the Stripe.js form so it must be using that function or another hidden one.   _storeremote wont work because it uses WHMCS's form .

 

Does anyone know of a way to replace the WHMCS credit card form in the admin area and orders pages?  The remoteupdate function appears to still work for the manage credit card page, though waiting on a confirmation it wont be removed later on. 

[bellafronte]

Hello @steven99

I have tested the _remoteinput function and these appear to be fired on the input pages

[steven99]

I found that _remoteinput was on the credit card checkout page only and remoteupdate was on the manage card page and both only fire on the client side.  However, remoteinput does not work for me as it includes the 3dsecure stuff even when _3dsecure() is not given.  This causes the 3dsecure iframe to post to the stripe card enter form before any card information is done and thus causes an error that no card was given.  Do you know of a switch to prevent that behavior or should I just presume such request is for the 3dauth without a flag? 

[bellafronte]

In 2016 I have questioned the WHMCS team about this function, I found the reply:

 

Quote

That option is not mentioned in the codebase once. It appears there might have been some desire to implement it, but its never been used. Right now we don’t use the metadata array you highlighted to control this, instead we look to see if the module has implemented one of two different functions:

• modulename_remoteupdate - returns a chunk of html to be insert into the page via the clientareacreditcard.tpl. If the function is defined and does not return anything, we populate the $remoteupdatecode variable with the language string defined for that client with the key: creditcardupdatenotpossible. In english the message is: "Credit Card Details cannot be updated at the current time. Please try again later."
• modulename_remoteUpdateWithTemplate - if you implement this function you need to return an array w/key value pairs we map into Smarty variables. We then load modules/gateways/templates/module_name/creditcard.tpl and display the page with that template instead of the themes template page. This allows you to use templates to make your code easier to maintain.

I would recommend using the second function.

If we can be of any more assistance, please don't hesitate to get back in contact.

 

[steven99]

I think I will stick with the documented function for now but thanks. 

[kdhosting]

Hi,

I'm trying to do same thing of getting stripe elements working with WHMCS.

I've managed to get elements to work adding and updating card details when placing an order but can get manage card details to work, pages reloads token is fetched but nothing happens.

Have you managed to get this working?

[steven99]

Which part are you having problems?  (your post isn't 100% clear as you say you got both working).

What I did with manage card details is use _remoteupdate for showing the form and processing the posting of the form.  Using javsacript to inject the token in to the form and then submitting it.  You need to use your own form but piece of object.  I had more problems with the checkout part with 3dauth getting in the way when it shouldn't be there.  Were you able to disable the WHMCS 3dauth posting on the order checkout? 

[kdhosting]

Sorry - not best at explaining things.

What I have working:

• Add/update card at checkout 
• Use existing card at checkout
• Recurring billing

I edited to template for checkout to have Elements inputs instead of default WHMCS inputs.

What I don't have working:

• Add/Update card using 'Manage Credit Card'

I have used _remoteUpdateWithTemplate to use a custom creditcard.tpl with Elements inputs, the page reloads as if submitted and token is generated but nothing else happens, as if the code doesn't exist.

How would I use _remoteinput to show the form? 

I hope that makes a little more sense! 🙂 

[bellafronte]

I try to display a new smarty template with _remoteinput but doesn't work.

 

I believe that if override the default creditcard.tpl to your template file will works?

[steven99]

On 3/11/2019 at 4:32 PM, kdhosting said:

I have used _remoteUpdateWithTemplate to use a custom creditcard.tpl with Elements inputs, the page reloads as if submitted and token is generated but nothing else happens, as if the code doesn't exist.

How would I use _remoteinput to show the form?

 

47 minutes ago, bellafronte said:

I try to display a new smarty template with _remoteinput but doesn't work.

I believe that if override the default creditcard.tpl to your template file will works?

For both _remoteinput and _remoteupdate, return only HTML -- so just a string.   So if you return "blah", only "blah" should show where the card form used to be .  This completely overrides WHMCS form, except for the 3dauth stuff on the credit card checkout page.    Also for both functions, have the form set to return to the proper file -- so _remoteinput should post to creditcard.php and _remoteupdate post to clientarea.php?action=creditcard.  Then in both functions process the posting as needed.  For remoteupdate, attach the card to the customer.  For remoteinput, attach the card and then charge the invoice via capture API.   (of course, you would check if $_POST has content and validate as needed.

Are both of you only returning HTML / string?  If not, there is your problem.  Template changes are not needed for this, thankfully as I dislike doing so. 

What I did was use smarty to generate the HTML via its fetch function and return that.  WHMCS happily spits out the HTML, though it mucks with the credit card checkout form because of 3dauth. 

Let me know if you continue to hit a wall on this as I know I was hitting my head on that wall a bit. 

[Craig@2Checkout]

On 3/15/2019 at 9:00 PM, steven99 said:

 

For both _remoteinput and _remoteupdate, return only HTML -- so just a string.   So if you return "blah", only "blah" should show where the card form used to be .  This completely overrides WHMCS form, except for the 3dauth stuff on the credit card checkout page.    Also for both functions, have the form set to return to the proper file -- so _remoteinput should post to creditcard.php and _remoteupdate post to clientarea.php?action=creditcard.  Then in both functions process the posting as needed.  For remoteupdate, attach the card to the customer.  For remoteinput, attach the card and then charge the invoice via capture API.   (of course, you would check if $_POST has content and validate as needed.

Are both of you only returning HTML / string?  If not, there is your problem.  Template changes are not needed for this, thankfully as I dislike doing so. 

What I did was use smarty to generate the HTML via its fetch function and return that.  WHMCS happily spits out the HTML, though it mucks with the credit card checkout form because of 3dauth. 

Let me know if you continue to hit a wall on this as I know I was hitting my head on that wall a bit. 

Thanks for your input on this. I'm running into the same issue with the _remoteinput automatic form submission into the "3dauth" iframe before the client an fill in any fields. I was wondering what you did to get around this as I can't seem to find any documentation on how to disable it. Maybe _remoteinput just wasn't intended to be used to collect input from the client.

[steven99]

I removed the target of the payment form, which stopped it from doing a post:

$("#payment-form").removeAttr('target');

Have not upgraded module yet for 7.9 and so could be different now. 

[bellafronte]

On 3/15/2019 at 10:00 PM, steven99 said:

 

For both _remoteinput and _remoteupdate, return only HTML -- so just a string.   So if you return "blah", only "blah" should show where the card form used to be .  This completely overrides WHMCS form, except for the 3dauth stuff on the credit card checkout page.    Also for both functions, have the form set to return to the proper file -- so _remoteinput should post to creditcard.php and _remoteupdate post to clientarea.php?action=creditcard.  Then in both functions process the posting as needed.  For remoteupdate, attach the card to the customer.  For remoteinput, attach the card and then charge the invoice via capture API.   (of course, you would check if $_POST has content and validate as needed.

Are both of you only returning HTML / string?  If not, there is your problem.  Template changes are not needed for this, thankfully as I dislike doing so. 

What I did was use smarty to generate the HTML via its fetch function and return that.  WHMCS happily spits out the HTML, though it mucks with the credit card checkout form because of 3dauth. 

Let me know if you continue to hit a wall on this as I know I was hitting my head on that wall a bit. 

I haven't been able to make the WHMCS display anything other than the standard fields at checkout. When I define _remoteinput nothing is displayed or returned.

[steven99]

Once the "complete order" button is hit, it should then direct them to the invoice payment page for them to enter the details, like it does with paypal.  If you want to show stripe stuff before hand, you would need a ClientAreaPage hook and do javascript to move the form in to place, then post to a callback type file with all the details in the form.  Though on complete order it will still redirect to the invoice page.  

EDIT: in the clientareapage hook, you would return the stripe javascript, javascript to move it in place, etc. 

Edited July 13, 2020 by steven99

[bellafronte]

16 hours ago, steven99 said:

Once the "complete order" button is hit, it should then direct them to the invoice payment page for them to enter the details, like it does with paypal.  If you want to show stripe stuff before hand, you would need a ClientAreaPage hook and do javascript to move the form in to place, then post to a callback type file with all the details in the form.  Though on complete order it will still redirect to the invoice page.  

EDIT: in the clientareapage hook, you would return the stripe javascript, javascript to move it in place, etc. 

Finally I understand! Thank you so much for this explanation @steven99