Configuring Stripe for online payments

Introduction

Infradox websites on version 32.19 or later can now use Stripe for online payments.
For detailed information about Stripe, visit www.stripe.com. With a Stripe account you can accept payments using almost any current payment method, including all major credit cards, Ideal, Google Pay, Apple Pay, Klarna and so on.

On the Stripe.com website

Create an account

If you haven’t already done this, go to www.stripe.com and create an account. Follow all the instructions, the Stripe website will guide you through the process.

Important: The account must be fully configured but it must remain in “Test mode”.
To make sure that it is, go to dashboard.stripe.com – the switch “Test mode” on the top right must be on.

Get the test keys

On the Stripe dashboard page, in the side bar on the right you’ll find a “Publishable key” and a “Secret key”. Copy both keys, you’ll need those keys in the following steps.

Configure the Web hooks in your Stripe dashboard

On the Stripe dashboard page, click on “Developers” on the top right. You can now configure a Web hook with the following steps:

  1. Click on “Web hooks” in the menu on the left
  2. Click on “Add endpoint” on the top right
  3. Enter your domain name starting with https:// and add /stripe at the end. For example: https://www.mywebsite.com/stripe
  4. Click on the “Select events” button
  5. Scroll down in the list to “Payment intent” and click on it
  6. Then click on “Select all Payment Intent events”
  7. Click on the “Add events” button underneath the events list
  8. Finally click on the “Add endpoint” button to save your changes

Configuring your website to accept payments

Your Secret key

For security reasons, the “Secret key” can’t be edited or seen via your website. You’ll need to send your key to support. Note that you won’t be able to test online payments until after the Secret key is stored for you on the web server.

Code editor changes

This step requires you to be logged in to your website with an admin account with permissions for the code editor. You don’t need any coding skills for this step, there’s a ready made file that you can simply copy into the editor. You do however need to replace the “return url” and the “publishable key” which is explained next.

  1. Go to the Code editor in backoffice and select template “299: Order script”
  2. Click on “Load example” in the toolbar
  3. Click on the radio button in front of “onlinepaymentswithstripe.txt”
  4. Click “Use code” to load the ready made file into the editor

You’ll see two Javascript objects in the file:
xspayment which executes on the page that loads after a succesful (or failed payment) and,
xsstripe which executes on the confirmed order page to initialise an online payment and to load all configured payment options.

Enter your Publishable key

In the xsstripe object, find the line that looks like this (the key will be different):

Replace the key with your own “Publishable key” that you copied from the Stripe dashboard.

Enter your Return URL

In the xsstripe object find the line that looks like this:

Replace “https://www.xsdevelop.com” with your own domain name (must include https://).

Optional: change the text in the xspayment object

If you want, you can change the text that is injected into the HTML.

For example, you may want to change the text “Thank you for your payment!” to something else.

Or you may want to localise the text. For example:

The xspayment object also prints text about invoices. If you don’t use the finance module or if you don’t want an invoice to be automatically created, then remove the following lines:

Finish the code editor script file

Save the file when you’ve made the above changes, you are almost ready to start testing.

Backoffice configuration settings

For the next steps you need to be logged in to your website with an account that has permissions to use the code editor, and to make changes to the Site configuration settings.

Enable Stripe

Go to Site configuration and click on “Online payments”. Click on the Stripe icon to enable it. Note that you can either use PayPal or Stripe. You can’t support both at the same time.
Remember to click Save at the bottom or save your changes after you’ve made other changes on the Online payments configuration page.

Automatic invoices

If you are using the Finance module, you can automatically generate and send an invoice for any order that was paid with Stripe. To enable this function, open the section “Invoicing and currency” and select the radio button “Automatically create invoice for paid orders”.

E-mail notifications

Go to Site configuration, E-mail configuration and select the notifications that you want to receive regarding online payments.

Then scroll down to the section “User notification e-mails”. If you want to send users an e-mail about “Abandoned payments” then select this option and configure its settings. An abandoned payment is a confirmed order for which an online payment has not been made. Note that users can also cancel such orders.

To change the text of the e-mail templates that are used by the process, go to “E-mail templates”.

User account considerations

New users

Whether or not a user must pay online to enable download permissions is configured for each user account separately. You can set up the defaults for “New users” via Site configuration > New user defaults.

Bulk updating existing accounts

If your website has been online for some time before you decided to start accepting online payments, then you’ll have to change the settings for user accounts who you want to pay online. To make this process easy, you can click on “Permissions” in the toolbar on the User management page to open a dialog that lets you specify the criteria of all accounts that you want to update (e.g. to change the settings to “Must pay online”). The dialog lets you fetch a count first, before actually changing any account.

To make the process for new users easier, you can configure the settings for New users (Site configuration, New user defaults) to immediately enable new accounts. I.e. without sending an activation link that the user must click to activate their account. The downside of not using the account activation procedure is that you won’t know if the e-mail address that the user entered is real. You may therefore get more fake user accounts.

Requesting downloads without having to pay online

Note that you can still give your clients the option to order files without paying online – even though their accounts settings do require online payment for download permissions. To enable this, go to Site configuration > Cart page > Cart page settings, and tick the box “Make paying online optional – allows users to place order without going to the payment page next”.

Start testing

You can now start testing online payments. Visit stripe.com/docs/testing for a list of credit card numbers that you can use for testing – as long as your Stripe account is in “Testing mode”.

One simple first test is to create an order with your own account and then find the order in Order management. Then click “Request online payment” at the bottom and save the order. You can now look up the order again via the client facing pages to see if the payment options will appear. You can use this method to test the payment process with any account, regardless of its payment settings.

Once this all works, it is suggested to go through the entire process by registering a new account, creating an order and paying for it with of the test credit cards.

Production mode / going live

When you are ready to go live, you need to disable “Testing mode” in your Stripe dashboard (on the Stripe.com website).
Remember that you need to contact support to replace the “Secret key” on the server, so make sure that you have contacted us beforehand – we will schedule a time to go live and you will receive instructions from support about the process.
Your “Publishable key” must be changed in template 299 (order script) at the same time when your “Secret key” is being replaced on the server.