Stripe for VirtueMart 2 & 3 / Joomla 2.5 & 3.x

We provide free documentation for our extensions, accessible for everyone to read. Please make sure that your question is not answered in the documentation below before submitting a ticket for support. It will save you time! Feel free to suggest us any improvements, or detail missing.

Instructions and first set-up

1. Install the Stripe plugin for VirtueMart like any Joomla extension
2. Enable it in Joomla plugin manager
3. Go to VirtueMart > Payment methods
4. Click New and select VM - Payment, Stripe
5. Name it like "Credit Card or Debit Card via Stripe secure server" and Save to enable the configuration tab
6. In the Configuration tab, add your Stripe settings and Save
   Please note both Stripe Test Secret Key and Stripe Test Publishable Key are required to test a transaction. It will failed otherwise.
7. Publish the Payment Method and Save & Close

Configuration

Here is an overview of the available Configuration settings. All descriptions are available in the tooltips of the options.

Credit card form Styling and CSS

The plugin is using the regular VirtueMart credit card form. The rest depends on the Joomla/VM template to render fields, form, buttons, etc.. So we suggest to use a custom CSS file, with all the style overrides. There is probably one with the template, that you may have already used for further customisations. You should use a browser inspector to help.

Please note that these are only general suggestions on HTML and CSS design. Further customisation are out of the scope of our plugin support.

How to change the style and CSS for the inputs (credit card number, expiration date, CVV) ?

You can add some CSS like this:

.vmpayment_cardinfo { your CSS rules;}

this is from the VirtueMart file vm-ltr-site.css, and you can style down the following tags:

.vmpayment_cardinfo table tr td label, select, input, etc...

How to hide the card form when the Stripe payment method is not selected?

It is possible to hide the input area, but not directly within the plugin settings. It is on our todo list though. You may try some CSS as well, like suggested by one of our clients:

#payment_id_XX + label + br + div + span {
   display: none;
}
#payment_id_XX:checked + label + br + div + span {
   display: block;
}

where payment_id_XX should be replaced by the payment ID of your website.

Why are the labels and entry fields not aligned?

The style really depends on the template first, and on the VirtueMart default styling. Alignment can be done with CSS again.

Why is the CVV image Tooltip not visible?

The CVV image should be visible, but the tooltip style depends on a JavaScript injected by VM in the of the page. There could be several reasons why it is not the case, according to your set up.

SSL/TLS and Stripe

This information is taken from Stripe.com help section. Please read it carefully here https://stripe.com/help/ssl

SSL (Secure Sockets Layer) and TLS (Transport Layer Security) are mechanisms for safely transmitting data.

Do I need to use SSL/TLS on my payment pages?

Yes, for a couple of reasons:

• It's more secure. In particular, it significantly reduces your risk of being exposed to a man-in-the-middle attack.
• Users correctly feel more comfortable sharing their payment information on pages visibly served over HTTPS. Your conversion rate is likely to be higher if your pages are served over SSL/TLS, too.

What if I don't want to set up SSL/TLS yet?

• You can test your page--but not live transactions--before installing your SSL/TLS certificate. You don't need to enable HTTPS until you're ready to go live.
• To test live transactions without your own SSL/TLS certificate, you could host your site with a provider that provides a secure subdomain.

For more details, please logon to https://stripe.com/help/ssl.

Troubleshooting

Please read our page Troubleshooting Stripe for VirtueMart & Joomla!.