Setting up the TWINT integration

The TWINT integration makes it possible to scan the QR code on a QR-bill with a TWINT app. In addition, a link can be added above the payment section to enable TWINT payments in the browser. This is particularly helpful if the user opens the QR-bill PDF on the mobile device and is therefore unable to scan it with the TWINT app.

The following is required for the TWINT integration:

  • Free account for the TWINT portal: https://portal.twint.ch
  • Access to the API of mame (valid license required).
  • Access to the mame app: https://mamedev.app

 

1. Access to the API of mame

A valid plugin license is required to use the API.

You will find the access data for the mame API shortly after purchasing the plugin in your account at mamedev.ch under “API credentials”. This information must be entered in the WordPress backend under “QR bill > Settings > API Settings”. Then click on “Connect” to establish a connection.

Then log in to your mame app (https://mamedev.app) account and go to “Profile” to find the Webhook Key. Copy this and enter it in the plugin settings.

 

2. Settings in the TWINT-Portal

Log into your account in the TWINT portal at https://portal.twint.ch.

Two stores can be added to the portal for the integration of TWINT:

  • A store for payments by scanning the QR code.
  • A store for payment via link on the QR-bill (optional).

 

2.1 Store for payments by scanning the QR code

Click on the “Integrate TWINT” button under “Cash register or payment terminal” on the home screen.

Important: Do not select “Online shop” for this store.

On the next screen (Basic Information), provide all the required information about your online shop and click “Next”.

In the next screen (connection), “mame” must be selected under “Manufacturer” and “Sales and Support”.

After the store is added, the Store UUID is displayed. The Store UUID is needed in step 3 in the mame App.

 

2.2 Store for payment via link on the QR-bill (optional)

Click on the “Integrate TWINT” button under “Online shop” on the home screen.

Fill in the basic information and in the second step (connection) select the integration “Shop plug-in” and “WordPress WooCommerce”.

When adding the first store, a certificate must also be created, which is required for the setup in the mame App. To do this, set a password under “Order certificate” and remember it or save it in a safe place. Important: The password will be required again later and can no longer be viewed after the certificate has been created.

If special characters are used for the password, only the following may occur: ~!@#%^*_+-={}[]:,./

The previously added bank account must be selected under “Credit account”.

After the registration in the last step the UUID will be displayed. Keep this value somewhere for later steps. To display the UUID again go to “Stores” and edit the settings of your shop.

On the same page you can also download the certificate, which will later be required for the settings in the mame App.

 

3. Activation of the service in the mame App

As soon as you have received the information for the mame API, you can log in to the mame App at mamedev.app.

You can find the username and password for the app in your account at mamedev.ch.

After logging in, the “QR-Bill TWINT Integration” service can be added under Services.

In the first step, the information for the shop is required for which the integration is to take place.

  • In the “QR-Bill Store UUID (TWINT)” field, the UUID of the store from step 2.1 must be entered.
  • The Notification URL is the URL for the JSON REST API of the WordPress site. Usually this is made up of the page URL and the ending “/wp-json”.

 

Optional: If a link should appear on QR-bills for payments via TWINT in the browser, the toggle “Add TWINT payment link to QR-bills?” to be activated:

  • The UUID from step 2.2 must be inserted under “QR-Bill Payment Link Store UUID (TWINT)”.
  • Upload the certificate file you downloaded in step 2.2. You can download it again in the TWINT portal under “Settings”.
  • The certificate password was either set in step 2.2 or earlier if a store had already been added to the TWINT portal.
  • The store logo (optional) is displayed on the payment page and must have the dimensions 800 (width) x 400 (height) pixels.

In the second step, a payment method must be specified.

After clicking on “Subscribe to service” the setup is complete. The service can be edited under “Services” and additional stores can be added.

 

4. Settings in the WordPress backend

After the service has been added, the store must be added to the plugin settings in the WordPress backend.

To do this, go to the “QR-Bill > Settings” page and click on “Synchronize” under “TWINT > Store ID”. After that you can select the store and save the settings.

If the synchronization fails, the API connection has not yet been set up correctly. Enter the appropriate data under API settings and click “Connect” after saving (see step 1).