# aforms

## Allgemein

aforms ist ein Unternehmen spezialisiert auf die Erstellung und Verwaltung von digitalen\
Formularen für E-Government und E-Business. Mit der Software AFS können Behörden und Unternehmen mehrsprachige, barrierefreie und standardkonforme Formulare ohne\
Programmierkenntnisse erstellen – online, mobil oder als PDF.

### Links

* [Webseite](https://www.aforms.com/) von aforms
* [Formularerstellung](https://www.aforms.com/produkte/designer-formserver/) mit aforms

## Integration

Die folgende Anleitung zeigt Dir, wie Du Payrexx im AFS-Designer von aforms solutions & services einbindest.

{% hint style="info" %}
Bitte beachte, dass die Integration in aforms nur in den Preisplänen Standard und Premium verfügbar ist. [Weitere Informationen](https://payrexx.com/de-ch/preise)
{% endhint %}

### Konfiguration von Payrexx

{% hint style="info" %}
Bitte beachte, dass Du bei Payrexx [eingeloggt](https://login.payrexx.com/de) sein musst, bevor Du beginnst. Falls Du noch kein Konto hast, [registriere](https://signup.payrexx.com/de/email-validation/) Dich bitte bei Payrexx.
{% endhint %}

* Navigiere im Hauptmenü Deiner Händler-Administration zu **API und Integrationen**.
* Scrolle hinunter zu "API-Integration hinzufügen" und klicke auf "API-Schlüssel hinzufügen":

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2F6xx6dd2kHQpp4A2p33RN%2Fimage.png?alt=media&#x26;token=5f28cca8-5340-4f67-b831-1f7241870111" alt=""><figcaption><p>Hinzufügen eines API-Schlüssels für die Integration von aforms</p></figcaption></figure></div>

* Gib der Integration einen beliebigen Namen, zum Beispiel "aforms".
* Klicke auf "Hinzufügen":

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FnYAgN0FoJDXmk0MwaJGi%2Fimage.png?alt=media&#x26;token=b9ab6a2d-7443-4d30-80a2-7684d583809a" alt="" width="563"><figcaption><p>Klick auf "Hinzufügen", um den API-Schlüssel zu generieren</p></figcaption></figure></div>

* Du findest den neuen API-Schlüssel nun unter "Aktive Integrationen".
* Klicke auf "Kopieren", um den API-Schlüssel in die Zwischenablage zu kopieren. Du wirst ihn in einem späteren Schritt benötigen:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FM8mUW8sEC3h9bWJYCtJR%2Fimage.png?alt=media&#x26;token=c4912478-992c-4df0-ada8-aaa38784d671" alt=""><figcaption><p>Kopieren des API-Schlüssels in die Zwischenablage für die spätere Verwendung in aforms</p></figcaption></figure></div>

### Konfiguration von aforms

#### Formserver Property

* Navigiere im AFS-Designer zu **Administration > Ressourcen**:

<figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2F7CUtOMvezyHJUJVsshil%2Fimage.png?alt=media&#x26;token=89bb81bf-5ff8-4503-be3c-ed28c52933f8" alt=""><figcaption><p>Start der Konfiguration im AFS-Designer</p></figcaption></figure>

* Suche in der Ressourcenliste eine Formserver-Property oder erstelle mit dem Plus-Symbol eine neue:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FCFYNbhC4V55UUmUFaZfX%2Fimage.png?alt=media&#x26;token=36a40fe8-5832-447b-8175-8d271ada6f08" alt=""><figcaption><p>Erstellen einer Formserver-Property</p></figcaption></figure></div>

* Trage deine Properties ein und speichere mit dem Haken-Symbol:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FlkygTmfHEs50RNrSH6Ek%2Fimage.png?alt=media&#x26;token=f3e48a9d-5f02-4586-94e7-87b13711072c" alt=""><figcaption><p>Eintragen der Properties</p></figcaption></figure></div>

Beispiele Formserver-Property:

```
# Payrexx-URLcom.anecon.afs.common.extender.payrexx.url=
```

Erster Teil (bis zum ersten Punkt) der URL der Payrexx-Administration:

```
https://aforms2web.payment...com.anecon.afs.common.extender.payrexx.instanceId=xxx
```

Default API-Key aus der Payrexx-Administration:

```
com.anecon.afs.common.extender.payrexx.secret=xxx
```

{% hint style="info" %}
Ersetze "xxx" mit dem API-Schlüssel, den Du während der Konfiguration von Payrexx in die Zwischenablage kopiert hast.
{% endhint %}

Währung:

```
com.anecon.afs.common.extender.payrexx.currency=xxx
```

#### Formular, Seite und Block

* Navigiere im Menü zu **Formulare** und erstelle über das Plus-Symbol ein neues Formular:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2F08ZIYgAjNXLu2yTvQOdt%2Fimage.png?alt=media&#x26;token=f369aa64-5733-4254-962c-411c244f1e23" alt=""><figcaption><p>Erstellen eines neuen Formulars</p></figcaption></figure></div>

* Gib den Formularnamen, die General-ID und die Beschreibung des Formulars ein:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FH2ZCMUuZFw03b64GXDuA%2Fimage.png?alt=media&#x26;token=465b2663-1a27-44be-98e6-c015b3afa19e" alt=""><figcaption><p>Konfiguration des Formulars</p></figcaption></figure></div>

* Lege eine neue Formularseite an, fülle die entsprechenden Felder aus und speichere Deine Einstellungen:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2F4Q0CtGXIYPEKh4ngZBWU%2Fimage.png?alt=media&#x26;token=5dabc631-801a-4c2a-916d-436287aef9d2" alt=""><figcaption><p>Konfiguration der neuen Formularseite</p></figcaption></figure></div>

* Erstelle innerhalb der angelegten Formularseite einen neuen Block:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FjY3fj22RDZ8CTQyKkOgl%2Fimage.png?alt=media&#x26;token=63126947-4f4e-45fd-a489-b9f06507a74e" alt=""><figcaption><p>Erstellen eines neuen Blocks</p></figcaption></figure></div>

* Füge dem neu erstellen Block die erforderlichen Felder hinzu:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2F69LnljpAMsHlod6UnKRR%2Fimage.png?alt=media&#x26;token=67f14f36-b3a9-4179-b80f-50ac6ae8f1c5" alt=""><figcaption><p>Konfiguration des Blocks</p></figcaption></figure></div>

* Erstelle das Layout des Blocks automatisch per Klick auf das Tabellen-Symbol, benenne die Feldnamen und Leittexte für das Layout und speichere den Block:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2F0e8bMoMoUcQHnjUkUF9k%2Fimage.png?alt=media&#x26;token=7ceb2f78-ab14-4272-b813-5ba0e49222b8" alt=""><figcaption><p>Erstellen des Layouts für den Block</p></figcaption></figure></div>

* So sieht der angelegte Block aus:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FchCz7U0xMDekp3gdeZHY%2Fimage.png?alt=media&#x26;token=8312bd24-3d16-46ca-93cb-0ad14f9cd376" alt=""><figcaption><p>Anzeigen des Blocks</p></figcaption></figure></div>

* Platziere den neu erstellten Block auf der ersten Seite des Formulars:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2F8jQM7LCNUQX3mosxO78b%2Fimage.png?alt=media&#x26;token=6db8a8f2-be8d-4380-81cb-d154a21379d4" alt=""><figcaption><p>Platzieren des Blocks</p></figcaption></figure></div>

* Speichere die Seiten- und Formulardetails per Klick auf das Haken-Symbol. Formular, Seite und Block sind nun bereit für die Anbindung an Payrexx.

#### Erstellen und Konfigurieren des Extenders

{% hint style="info" %}
Mit dem Payrexx-Extender kannst Du den Nutzern des Formulars die Möglichkeit bieten, direkt beim Absenden eine Zahlung vorzunehmen. Die Kommunikation zwischen AFS und Payrexx erfolgt über REST-Webservices. Diese Funktion steht Dir auf Formularebene zur Verfügung.
{% endhint %}

* Erstelle mittels Klick auf das Plus-Symbol einen neuen Extender auf Formularebene:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2F6mbCx6JbFZCjQJmNmNU4%2Fimage.png?alt=media&#x26;token=4ba7f80b-bde4-4fa3-aa17-c3a3a25f2161" alt=""><figcaption><p>Erstellen eines Extenders</p></figcaption></figure></div>

* Wähle in der Auswahl der Extender die Option "Formular: Payrexx":

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FvlbvNWunJE61jLDe9qC5%2Fimage.png?alt=media&#x26;token=e7cfa746-1264-4c88-a02d-8c261f71c63e" alt=""><figcaption><p>Erstellen eines Extenders vom Typ "Formular: Payrexx"</p></figcaption></figure></div>

* Konfiguriere den Extender gemäss Deinen Anforderungen und speichere ihn per Klick auf das Haken-Symbol:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FlP1LHecpDnPTnunKlAgf%2Fimage.png?alt=media&#x26;token=924485e5-6e94-4a4a-8682-4ee68244460f" alt=""><figcaption><p>Konfiguration des Extenders</p></figcaption></figure></div>

* Mittels der Bedingung =#V1=="1" (SpeL-Ausdruck) wird der Extender nur ausgeführt, wenn im Formular die Zahlungsmethode "Kreditkarte" gewählt wurde:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FlhMX1zy6OtHswQRczKcw%2Fimage.png?alt=media&#x26;token=19295df8-f6d6-44cc-8425-ca58c5622357" alt=""><figcaption><p>Ausführung des Extenders auf Bezahlart "Kreditkarte" beschränken</p></figcaption></figure></div>

* So sieht die Auswahl der Zahlungsmethode im Formular aus:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2F9gej7WwsAMYfUSkXRaed%2Fimage.png?alt=media&#x26;token=96927459-b7ab-4551-935d-4fd03ed87e5e" alt="" width="231"><figcaption><p>Auswahl der Zahlungsart</p></figcaption></figure></div>

{% hint style="info" %}
Bitte beachte, dass die Zahlungsart "Kauf auf Rechnung" immer angezeigt wird.
{% endhint %}

* Über den Formularbaum können die Felder im Extender zugeteilt werden:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FlVnxdgoYfWFxHGq9vgGy%2Fimage.png?alt=media&#x26;token=86b0ad32-4fb6-40fc-9ba3-0244e49b2558" alt=""><figcaption><p>Zuteilung der Felder im Extender</p></figcaption></figure></div>

**Verwendung der Felder:**

* **Zahlungsvermerk:** Der Zahlungsvermerk setzt sich aus der Reference-ID und dem Formulartitel zusammen und dient der Identifikation der Zahlung in der Inbox/APF.
* **Reference-ID:** Die Reference-ID ist eine Unique ID, über die die Zahlung identifiziert werden kann.
* **Betrag:** Transaktionsbetrag
* **Vorname:** Vorname des Antragstellers
* **Nachname**: Nachname des Antragstellers
* **E-Mail-Adresse für Zahlungsbestätigung:** An diese E-Mail-Adresse werden die Rechnung und die Zahlungsbestätigung versandt.

**Verwendungszweck in der Rechnung (Produktbeschreibung):**

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FfrMLXM1f8ImFbtOwmWnr%2Fimage.png?alt=media&#x26;token=5eae53c4-c1e5-47c5-83f9-064580f2658d" alt=""><figcaption><p>Rechnung mit Verwendungszweck (Produktbeschreibung)</p></figcaption></figure></div>

#### Formularsammlung übertragen

* Mit einem Klick auf das Pfeilsymbol wird die Formularsammlung an den Formserver übermittelt und dadurch online verfügbar gemacht:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2F94vTb3ZgrArq3HWMxoyy%2Fimage.png?alt=media&#x26;token=3aa68cee-a280-4860-b291-2af74bef4096" alt=""><figcaption><p>Übermittlung der Formularsammlung an den Formserver</p></figcaption></figure></div>
