Ihre zuverlässige Kryptoverarbeitung
Registrieren
Anmelden
Anmelden
Registrieren
Ihre zuverlässige Kryptoverarbeitung
WIX
So richten Sie das Ammer Pay-Plugin ein.
Der erste Schritt bei der Einrichtung Ihres neuen Plugins besteht darin, es Ihrer Website hinzuzufügen. Dabei wird im Bereich „Service-Plugins“ der Code-Seitenleiste ein neuer Ordner erstellt, der die Dateien für Ihren Code enthält.

Schritt 1: Neues Zahlungsanbieter-Plugin erstellen

  1. Aktivieren Sie den Wix-Entwicklermodus und klicken Sie in der Code-Seitenleiste auf „Öffentlich & Backend“.
  2. Scrollen Sie nach unten zu „Service-Plugins“.
3. Bewegen Sie den Mauszeiger über „Service-Plugins“ und klicken Sie auf „+“.
4. Wählen Sie „Zahlung“ aus.
5. Geben Sie den Namen „AmmerPay“ ein und klicken Sie auf „Code hinzufügen & bearbeiten“.

Schritt 2: Plugin implementieren

Im vorherigen Abschnitt wird im Bereich „Service-Plugins“ der Code-Seitenleiste ein Ordner mit dem Namen „payment-provider“ erstellt. Darin befindet sich ein weiterer Ordner mit dem Namen des von Ihnen eingerichteten Plugins. Dieser Ordner enthält zwei Dateien: „-config.js“ und „.js“. Benennen Sie diese in „AmmerPay-config.js“ und „AmmerPay.js“ um.
Schritt 3: Plugin-Dateien füllen ​AmmerPay-config.js

Kopieren Sie den untenstehenden Code und fügen Sie ihn in AmmerPay-config.js ein
export function getConfig() {
    return {
        title: 'Ammer Pay',
        paymentMethods: [{
            hostedPage: {
                title: 'Ammer Pay',
                billingAddressMandatoryFields: ['CITY'],
                logos: {
                    white: {
                        svg: 'https://media.ammer.io/icons/ammer_pay_logo.svg',
                        png: 'https://media.ammer.io/icons/ammer_pay_logo.png'
                    },
                    colored: {
                        svg: 'https://media.ammer.io/icons/ammer_pay_logo.svg',
                        png: 'https://media.ammer.io/icons/ammer_pay_logo.png'
                    }
                }
            }
        }],
        credentialsFields: [{
                simpleField: {
                    name: 'merchantId',
                    label: 'Merchant id'
                },
            },
            {
                simpleField: {
                    name: 'cashRegisterId',
                    label: 'Cash register id'
                }
            },
            {
                simpleField: {
                    name: 'deviceId',
                    label: 'Device id'
                }
            },
            {
                simpleField: {
                    name: 'invoiceCurrency',
                    label: 'Invoice currency'
                }
            },
            {
                simpleField: {
                    name: 'locationId',
                    label: 'Location id'
                }
            }
        ]
    };
}
AmmerPay.js

Kopieren Sie den unten stehenden Code und fügen Sie ihn in AmmerPay.js ein.
Denken Sie daran, Hostname und Sitename in Ihre eigenen Werte zu ändern (diese Daten erhalten Sie von WIX).
import { ammerPayRequest } from 'backend/ammerPayAPI.js';

export const connectAccount = async (options, context) => {
    return {
        'accountId': 'Ammer Pay',
        'credentials': {
            'merchantId': options.credentials.merchantId,
            'cashRegisterId': options.credentials.cashRegisterId,
            'deviceId': options.credentials.deviceId,
            'invoiceCurrency': options.credentials.invoiceCurrency,
            'locationId': options.credentials.locationId
        }
    }
};

export const createTransaction = async (options, context) => {
    try {
        let checkoutSession = await createCheckoutSession(options);

        return checkoutSession;
    } catch (error) {
        return error;
    }
};

// Creates a new checkout session using the Ammer API.
export async function createCheckoutSession(transactionRequest) {
    try {
        const hostName = "exampleHost";
        const siteName = "exampleName";

        // Set the callback URL to this site's 'updateCheckoutSession' HTTP endpoint.
        const callbackUrl = `https://${hostName}.wixsite.com/${siteName}/_functions/updateTransaction?wixTransactionId=${transactionRequest.wixTransactionId}`;
        const returnUrl = transactionRequest.order.returnUrls.successUrl;

        const body = {
            merchantId: transactionRequest.merchantCredentials.merchantId,
            cashRegisterId: transactionRequest.merchantCredentials.cashRegisterId,
            deviceId: transactionRequest.merchantCredentials.deviceId,
            invoiceCurrency: transactionRequest.merchantCredentials.invoiceCurrency,
            locationId: transactionRequest.merchantCredentials.locationId,
            netTotal: transactionRequest.order.description.totalAmount,
            redirectUrl: returnUrl,
            callbackUrl: callbackUrl,
        };

        const response = await ammerPayRequest(body);

        const paymentUrlArray = response.paymentUrl.split('/');

        const txId = paymentUrlArray[paymentUrlArray.length - 1];

        if (response.paymentUrl) {
            return {
                pluginTransactionId: txId,
                redirectUrl: response.paymentUrl,
            };
        } else {
            const errorObject = {
                reasonCode: 6000,
                errorCode: 'GENERAL_ERROR',
                errorMessage: 'Something went wrong with the transaction request',
            };

            return errorObject;
        }
    } catch (error) {
        console.error('Error completing checkout request: ', error);

        return error;
    }
}

export const refundTransaction = async (options, context) => {};
AmmerPayAPI.js

Sie müssen außerdem zwei Backend-Dateien erstellen: ammerPayAPI.js und http-functions.js
Kopieren Sie den folgenden Code und fügen Sie ihn in ammerPayAPI.js ein
import { fetch } from 'wix-fetch'

export async function ammerPayRequest(body) {
    const options = {
        method: 'POST',
        headers: {
            'X-DEVICE-KEY': body.deviceId,
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams(body).toString()
    }

    try {
        const response = await fetch('https://apimerchant.ammer.io/merchants/api/service/invoice/createAndRedirect?application=WIX', options);

        const formattedResponse = await response.json();

        return formattedResponse;
    } catch (err) {
        console.log('The request to the AmmerPay API failed.', err);

        return err;
    }
}
http-functions.js

Kopieren Sie den folgenden Code und fügen Sie ihn in http-functions.js ein.
import wixPaymentProviderBackend from 'wix-payment-provider-backend';
import { ok, badRequest } from 'wix-http-functions';

// This endpoint is used to update the status of a checkout session transaction.
export async function post_updateTransaction(request) {
    const transactionRequestBody = await request.body.json()

    const response = {
        'headers': {
            'Content-Type': 'application/json'
        }
    };

    // If the payment was received by Ammer update the transaction status on the site.
    if (transactionRequestBody.state === 'Payment_Received') {
        const queryParamId = request.query['wixTransactionId'];

        try {
            await submitTransactionUpdate(queryParamId, transactionRequestBody.txId);

            response.body = {};

            return ok(response);
        } catch (err) {
            response.body = {
                'error': err
            };

            return badRequest(response);
        }
    } else {
        return badRequest(response);
    }
}

// Use the submit event function to update a transaction's status.
export async function submitTransactionUpdate(wixTransactionId, pluginTransactionId) {
    try {
        const response = await wixPaymentProviderBackend.submitEvent({
            'event': {
                'transaction': {
                    'wixTransactionId': wixTransactionId,
                    'pluginTransactionId': pluginTransactionId
                }
            }
        });

        return response;
    } catch (error) {
        console.log('Error updating the transaction status: ', error)

        return error;
    }
}
Schritt 4: Plugin bereitstellen

Sie sollten eine Struktur wie diese erhalten.

Sobald Ihre Codedateien fertig sind, müssen Sie Ihr Plugin bereitstellen und im Dashboard Ihrer Website aktivieren.

  1. Speichern und veröffentlichen Sie Ihre Website.
  2. Gehen Sie im Dashboard Ihrer Website zu den Einstellungen für „Zahlungen akzeptieren“.
  3. Suchen Sie in der Liste der Zahlungsmethoden nach dem Namen „Ammer Pay“. Er befindet sich wahrscheinlich unter „Weitere Zahlungsoptionen anzeigen“.
4. Klicken Sie auf Verbinden und konfigurieren Sie anschließend das Plugin
Schritt 5: Plugin-Konfiguration

  1. Gehen Sie zu merchants.ammer.io
  2. Gehen Sie zur Seite „Standorte“
  3. Erstellen Sie einen Standort oder wählen Sie einen bestehenden aus
  4. Öffnen Sie die Standortdetails und klicken Sie auf „Zahlungskanal hinzufügen“
5. Wählen Sie Kanaltyp: eCommerce und Zahlungs-Plugin: WIX und richten Sie alle erforderlichen Informationen ein
6. Nach dem Erstellen des Zahlungskanals wird der Konfigurationsbildschirm für das Plugin angezeigt
Denken Sie daran, dass Ihr Plugin nicht mehr funktioniert, wenn Sie den Zahlungskanal oder den Speicherort des Zahlungskanals löschen. Sie müssen dann die Daten des Zahlungskanals in den Plugin-Einstellungen aktualisieren.

Folge uns

© 2025 Ammer Pay

Made on
Tilda