When a customer lands on the Payment checkout page, the redirect form pointing to the off-site payment service appears just waiting to be clicked on. We should implement a small bit of JavaScript to hide the form from view and automatically submit it - naturally, this will gracefully degrade as it already works via manual form submission. The easiest example module is PayPal WPS in Commerce PayPal.

Comments

svendecabooter’s picture

Can we assume that the "Off-site payment redirect" item is the only one on the "Payment" pane?
I tested with adding both the "Payment" and "Off-site payment redirect" items on the same "Payment" pane (see http://grab.by/9QTC)
But that doesn't seem to really work, as selecting another payment method doesn't change the button redirect target.
If that's not supposed to work, then I could go ahead and try to fix this.
If you're supposed to be able to change the payment method at that point, it might get tricky...

rszrama’s picture

Yeah, only the off-site redirect pane should be on the Payment page. We'll have to make this a documentation thing, as there isn't any way to lock it down. I'm hesitant to add any sort of validation to prevent putting panes here by end users, because I don't want to hose developers trying to add additional behavior to this page.

I just had a thought - it would probably be good to make the JS redirect be based on a checkout pane setting so it can be easily turned off.

hunziker’s picture

The JS redirect approach is the usual trick for off-site payments, if you need a "POST" request. (e.g. Magento does it in this way.)

BenK’s picture

Subscribing

rszrama’s picture

Aww, bummer. I really meant to get this in for the beta3 but forgot about it till I was just testing PayPal updates for the beta3. D'oh.

hunziker’s picture

It is not a problem, because the integration leads perhaps anyway to a negative behavior. The following case describe the reason why:

External payment service provider (PSP) like Ogone, PayPal and others exist, because of the payment card industry (PCI) certification (http://en.wikipedia.org/wiki/Payment_Card_Industry_Data_Security_Standard). This certification is required to store and process payment information (credit card number, card holder ...). This certification is really expensive, so many online stores outsource this. The outsourcing partner in this case is a PSP.

Normally the credentials (credit cart informations) are entered on the PSP website. The other case is you create a form on your site which collects the information. But the form must be send directly to the PSP. This means you have an URL of your PSP in the "action" attribute of the form.

In this special case the javascript redirect would be a problem, because on the payment page you need some additional fields. The JS redirection prevents the customer from entering the data. The JS redirection should be optional, this allows also the handling of more complex PSP's.

rszrama’s picture

Yeah, it should be optional, but it's worth noting that the way the Payment page is supposed to work is that the user inputs necessary information on the previous page(s). When they get to the Payment page, there a form is constructed that passes all the necessary information to the payment service when submitted. So the JS redirect would actually be a JS form submission resulting in the redirect. If you have a PayPal sandbox account, you can test this out w/ the PayPal WPS module.

hunziker’s picture

The problem is the storage of the credit card information on your side is not allowed. If you collect them on previous pages you need to store them in a way. For example in a cookie, in the session or in database. This is not allowed. In Switzerland (my most known market) there exists only one payment service provider, which allows the above described scenarios (Datatrans). The others are very similar to Ogone.

aidanlis’s picture

hunziker: Collecting information on previous pages can easily persist that information without storing it in a session. For example, the credit card information is entered into a form which is then posted to another form, which issues the javascript redirect.

hunziker’s picture

@aidanlis: This completely wrong. If you post any form, the data is sent to the server. If now the server loads the data again (for putting into the next form), you have stored it already in your memory. The PCI restrictions are here very clear, you are not allowed to do that things.

svendecabooter’s picture

If you are using an external (off-site) payment provider, you are most likely not storing credit card information anyway, because as hunziker points out, storing it (unencrypted) is not allowed in most countries AFAIK.

But I don't understand the problem that hunziker points out in #6 (http://drupal.org/node/1110334#comment-4383464). Can you elaborate?

The way I see it:
On the 1st (checkout) page you enter your full name, address, etc...
On the 2nd (payment) page you have a form which has these values from the previous page as hidden form elements, and one visible "Proceed with payment" button. When the button is clicked, the form is submitted to the payment provider (such as Ogone, Paypal, etc..) because the "action" attribute of the form is set to that external site.
Now what the functionality as described in this issue would do is, through JS, automatically submit that form on the 2nd page.
I don't see what that has to do with credit card info or the like... It's just to avoid a blank page with one button...

Or am I missing something?

Sven

hunziker’s picture

@svendecabooter: In most cases you are absolutely correct. But there exists payment providers which allows you as store owner to submit in the parameters the credit card information. You replace some of the hidden fields to normal text fields. The customer can then enter the credit card information on your side. The processing is then only a redirect to the PSP and back. Normal user see no difference with a processing in the background. Therefore we should make the js redirection optional, so the payment module can control the redirection. This is my point, nothing more.

svendecabooter’s picture

Alright i get it...
Making it optional makes sense.
Now let's make sure there is some functionality, so we can actually make it optional ;)

rszrama’s picture

This is really a moot point, as redirected payment services are used precisely so you can redirect to a third party service for the secure entering / processing of credit card data. There's no possibility of any sort of credit card storage on our end. There's a payment checkout pane used for entering CC data and having it processed immediately, but that's not what the "Payment" page is for - this is solely a redirect and return point for redirected payment services.

[Edit: no need to respond to this. I cross-posted with other comments b/c I didn't refresh before commenting.]

damien tournoud’s picture

I am on @hunziker side here. This should be factored out in core, but called *by* the payment driver implementation.

rszrama’s picture

I'm not sure what hunziker's side is. : )

Way back in comment #2 I already mentioned this being an optional feature. What do you think should be factored out in core?

hunziker’s picture

I'm not sure what my side is, but I am happy about your assistance.

For the moment I think its enough if we make this optional. All other problems with the described integration, we can consider if we get to the point we get stuck.

rszrama’s picture

Oh, I think it clicked for me earlier. Perhaps what Damien was suggesting is we provide the JS to automatically submit the form, but we let individual payment method modules determine when to include that via the #attachments array on the redirect form.

ldweeks’s picture

sub

rszrama’s picture

Issue tags: +rcblocker

Tagging.

amateescu’s picture

How about this approach: we provide the JS to automatically submit the form and we give it as an option for payment method implementations?

guillaumev’s picture

#21 works... but at least on my site, you have time to see the button "Proceed to Paypal". I believe people will probably have the possibility to click on the button before the Javascript submit, which might create some issues...

amateescu’s picture

There are no issues if a user submits the form before it is automatically submited. The only thing that we can do about it is to change the message and inform the user about this.

Something like.. "If the page doesn't automatically redirect within 10 seconds, use the button below to proceed to the payment server."

guillaumev’s picture

amateescu > I agree with you. The same patch as yours, which changes the help message if needed...

rszrama’s picture

We can actually hide the button on pageload if JS is enabled; then it shouldn't be visible at all prior to submission. I do kind of wonder if we should have a back button on this page in the event that someone doesn't have JS enabled, though, and decides to continue shopping prior to payment. :-/

guillaumev’s picture

I thought about hiding the button too but in the end, I think it's better to leave it (along with a message explaining that the user will be redirected) so that users who don't have JS enabled can still proceed to the payment page...

gebjohn’s picture

Category: feature » task
Priority: Normal » Minor

Guys - thanks for your work on this. Guillaumev, your patch doesn't include the .js file at the moment - is it meant to?

guillaumev’s picture

gebjohn > I forgot to include the js file in fact, here is a new patch with the file included...

ahimsauzi’s picture

Maybe I am missing something here but is there a reason why the submit to external payment cannot be on the checkout page? Submitting to external payment requires a particular payment method such as Paypal WPS. Can't the existence of a given payment method add a field to the checkout form?

rszrama’s picture

The reason is that every payment gateway requires a different set of parameters to be passed, including different names for the same type of data. These names will hardly (if ever) match up with the name of form elements submitted from the checkout form. Hence an intermediate page is necessary that the integration module uses to translate the order object into expected fields by the gateway.

If you really wanted to, you could use JavaScript to create / update such a form as you go in the place of the "Continue" button at the bottom of the checkout form. However, for the basic functionality, we're targeting an intermediate page with automatic redirection.

ahimsauzi’s picture

Makes total sense, thank you again.

mikejoconnor’s picture

Status: Needs review » Reviewed & tested by the community

Works as expected, both with auto redirect enabled, and disabled in the payment method info hook.

rszrama’s picture

Status: Reviewed & tested by the community » Fixed
Issue tags: +dcsprint6

Woohoo. Thanks for the great patch and review. This is exactly what we needed. : )

Are you @guillaumev on Twitter? I like to follow patch contributors with the @drupalcommerce account.

svendecabooter’s picture

This extra setting probably still needs extra documentation for people implementing payment method modules (e.g. on http://www.drupalcommerce.org/specification/info-hooks/payment and the likes)

rszrama’s picture

Good call - added it in.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Peterjames229’s picture

Title: Automatically submit the payment redirect form on the Payment checkout page » Online Payment Options For Freelancers

[spam deleted]

WorldFallz’s picture

Title: Online Payment Options For Freelancers » Automatically submit the payment redirect form on the Payment checkout page

reverting title, spammer blocked, spam deleted.

rszrama’s picture

Thanks. : )