Introduction

Infradox websites on version 32.19 or later can use Stripe for online payments of download orders (in addition to PayPal).
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.

In addition to paying online for download orders, it is also possible to pay online for invoices – with version 32.31 or later. You can use this for example to receive payments for subscription invoices and other invoices not directly related to file orders.

View the below screen recording to see online payments with Stripe in action (no audio)

On the Stripe.com website

Whether you want to enable online payments for download orders, for invoices or both, the steps that you need to take on the stripe.com website are the same.

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 (www.mywebsite.com must be replaced with your own website name)
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

On your own website

Configuring your website to accept payments for download orders

This section describes what you need to do if you want to enable online payments for download orders. With this function users can create an order and pay online to enable download permissions.

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):

o.stripe = Stripe("pk_test_89XRBbDA0XZt2YpzLoBoGnB7G1wj0W3CXxTvXT4WfaOnLSLLs8CErY8NqGYFa62p8l1Wbxb80z1xY5LAkYLfnywlZ00grY96roD");

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:

const return_url="https://www.xsdevelop.com/order/payment/"+p.pgid.replace(/{/,"").replace(/}/,"")+"/"+p.user+"/"+p.order+"/"+p.session+"/data";

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.

$("
<h1>Thank you for your payment!</h1>
").appendTo(div);

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

$("
<h1></h1>
").appendTo(div);

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:

$("You will receive an invoice by e-mail.").appendTo(div);
$("Your invoice will also appear on your invoice overview that you can access via 'My account'.").appendTo(div);
$("Note that this may take a few minutes.").appendTo(div);

Finish the code editor script file

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

Required CSS

1. Go to the Code editor in backoffice and select template “294: Cart/Order page CSS”
2. Click on “Load example” in the toolbar
3. Click on the radio button in front of “onlinepayments-css.txt”
4. Click “Use code” to load the ready made file into the editor
5. Save it

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.

Currency settings

If you want online payments to use your currency always – regardless of the client’s currency – then tick the “Use website currency for online payments” checkbox in the “Invoicing and Currency” section of the Online payments 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.

Configuring your website to accept payments for invoices

This section describes how you can enable online payment of invoices.

Staff members can change whether or not an invoice can be paid online when saving an invoice. It is also possible to pay an invoice without having to be logged in.

Your Secret key

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. If you use both online payments for download orders and for invoices then you can use a single secret key. It is also possible to use two separate Stripe accounts with separate secret keys if you want.

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 “399: Pay invoice script”
2. Click on “Load example” in the toolbar
3. Click on the radio button in front of “invoicepayment-js.txt”
4. Click “Use code” to load the ready made file into the editor

You’ll see a Javascript objects in the file:
xsstripe – this executes on the invoice payment 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):

o.stripe = Stripe("pk_test_89XRBbDA0XZt2YpzLoBoGnB7G1wj0W3CXxTvXT4WfaOnLSLLs8CErY8NqGYFa62p8l1Wbxb80z1xY5LAkYLfnywlZ00grY96roD");

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:

const return_url="https://www.xsdevelop.com/invoice/payment/"+p.pgid.replace(/{/,"").replace(/}/,"")+"/"+p.id+"/"+p.session+"/data";

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

Required CSS

1. Go to the Code editor in backoffice and select template “295: Invoice payment pages CSS”
2. Click on “Load example” in the toolbar
3. Click on the radio button in front of ” invoicepayments-css.txt”
4. Click “Use code” to load the ready made file into the editor
5. Save it

Backoffice 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.
Online payments for invoices are possible only if Stripe is enabled.

Currency settings

If you want amounts for online payments in your own currency always (regardless of the user’s currency) then tick the “Use website currency for online payments” checkbox.
You’ll find this setting in the “Invoicing and currency” section on the “Online payments” page in backoffice.

E-mail notifications

Go to Site configuration, E-mail configuration. The setting “Online payments and automatic invoices” must be on to receive notifications about paid invoices.
The template that is used to notify you of online payments for invoices is “admininvoicepaidnotification.txt”.

Enable online payments of invoices

Finally go to Site configuration > Invoice settings and tick the “Enable online payment of invoices” checkbox in the Online payments section.