Maison > interface Web > js tutoriel > Soyez payé en QR

Soyez payé en QR

王林
Libérer: 2024-07-26 16:58:44
original
814 Les gens l'ont consulté

Get paid in QR

Non, pas en pixels, en euros.

Non, pas avec carte de crédit.

Oui avec téléphone.

Motivation

Si vous vendez des produits ou des services, être payé est une exigence évidente.

De nos jours, la carte de crédit est reine, enfin en ligne en tout cas.

Vous disposez d'une multitude de passerelles de paiement, qui géreront les cartes de crédit, Google ou Apple Pay pour vous.

Moyennant des frais, bien sûr.

Dans un magasin physique, vous disposeriez d'un terminal de carte de crédit.

Certaines banques peuvent vous vendre une application Android beaucoup moins chère qui transforme votre téléphone en terminal CC.

Cela vaut la peine d’y réfléchir, surtout si vous ne traitez que quelques paiements par jour.

Ces options couvrent presque toutes les situations dans des scénarios de consommation typiques.

Où une personne va en ligne ou dans un magasin physique et achète un tas de produits ou se fait couper les cheveux.

Mais il y a bien plus encore.

  1. Que se passe-t-il si vous êtes une organisation à but non lucratif ou citoyenne qui doit traiter de petits paiements.
  2. Et si vous êtes une entreprise B2B et que vos clients souhaitent payer par virement direct.
  3. Ou que se passe-t-il si vous ne voulez tout simplement pas payer les frais généraux d'environ 2 à 3 % pour les paiements par carte de crédit.

Dans tous ces cas, la réponse, dans l'Union européenne, est le SEPA.

Plus précisément le virement SEPA.

Ou son frère plus jeune, mais beaucoup plus rapide, le virement de crédit instantané SEPA.

Virement SEPA

Si vous ne connaissez pas le nom, ne vous inquiétez pas, c'est le même vieux virement bancaire.

Par exemple. vous dites à votre banque de retirer de l'argent de votre compte et de le placer sur quelqu'un d'autre.

Ce qui était historiquement un formulaire papier à remplir, c'est aujourd'hui quelques clics dans votre application bancaire mobile.

Mais nous disposons désormais de numéros de comptes bancaires internationaux standardisés - les IBAN.

Il est donc très facile d'envoyer de l'argent partout dans l'UE ou même dans le monde entier.

Et avec SEPA instant, votre argent arrive en quelques secondes.

Mais, mais les IBAN sont tellement longs qu'ils sont presque effrayants.

Et les gens sont notoirement mauvais pour saisir des choses, vous pouvez donc être heureux si vous obtenez le bon montant, oubliez les notes supplémentaires.

Tous ces problèmes sont facilement résolus avec les codes QR.

Vos clients peuvent les scanner avec leur téléphone, vérifier le montant et cliquer sur payer dans leur application bancaire.

Avec la liste croissante des banques participant au système de virement instantané SEPA, il y a de fortes chances que votre argent arrive en un clin d'œil.

Dans un prochain blog, nous verrons comment surveiller les paiements entrants sur votre compte bancaire.

Pour automatiser la génération et l'envoi de factures par exemple.

Laissez-moi vous montrer comment générer des codes QR pour la Slovaquie et la République tchèque.

Je souhaite allonger cette liste, donc si vous savez comment les codes QR sont créés dans votre pays, faites-le moi savoir.

QR Slovaquie

Les banques slovaques se sont mises d'accord sur une norme commune appelée Pay by Square.

Il existe même un schéma d'URL qui peut être utilisé dans des scénarios en ligne.

Par exemple. l'utilisateur clique sur un lien et son application bancaire est lancée avec toutes les informations de paiement renseignées.

Malheureusement, ceux-ci ne sont pas interopérables (en 2024).

Laissez-moi vous montrer comment générer le code QR dans NodeJS.

app.get("/api/paybysquare", mustAuth, async (req, res, next) => {
    try {
        const body = req.query.content as string;
        const model = JSON.parse(body);
        const content = await generate(model);
        const qrStream = new PassThrough();
        const result = await toFileStream(qrStream, content,
            {
                type: 'png',
                width: 200,
                errorCorrectionLevel: 'H'
            }
        );

        qrStream.pipe(res);
    } catch (ex) {
        next(ex);
    }
});
Copier après la connexion

La méthode generate provient de la bibliothèque bysquare.

Vous pouvez l'installer avec npm comme d'habitude npm i bysquare

Pour obtenir une image PNG que nous pouvons utiliser dans le navigateur ou dans un document de facturation, nous appelons la méthode comme ceci.

interface IBySquareModel {
    IBAN: string;
    Amount: number;
    CurrencyCode: string; // must be "EUR",
    VariableSymbol: string;
    Payments: number; // must be 1,
    PaymentOptions: number; // must be 1,
    BankAccounts: number; // must be 1,
    PaymentNote?: string; // optional note
}

const BySquareQR = (payModel: IBySquareModel) => {
    return <img style={{ width: "120px", height: "120px" }} src={"/api/paybysquare?content=" + encodeURIComponent(JSON.stringify(payModel))} />
}

Copier après la connexion

Il est souvent très utile d'ajouter un message descriptif au paiement.

Voici un code simple qui normalisera les noms des clients.

Cela supprimera les signes diacritiques, transformant Ján Kováč en Jan Kovac.

Doit être toujours parfaitement lisible et garantira que les systèmes bancaires ne gâchent pas les choses.

    const paymentMessage = customerName?.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").substring(0, 100) || "";
Copier après la connexion

QR République tchèque

Même si la République tchèque ou la Tchéquie ont jusqu'à présent (2024) résisté à l'euro, elles ont elles aussi un système de code QR.

Et ils ont même un générateur de code libre de droits que nous pouvons utiliser.
Désormais, pour des raisons de sécurité, vous souhaiterez peut-être toujours le générer vous-même.

const czQrLink = "https://api.paylibo.com/paylibo/generator/image?iban=" + iban + "&amount=" + 
czkPrice + "&currency=CZK&vs=" + vsym + 
"&message=" + message;

const CzQrImage = (czQrLink: string) => {
    return <img style={{ width: "120px", height: "120px" }} src={czQrLink} />
}
Copier après la connexion

International

Malheureusement, il n'existe pas encore de norme QR internationale ou européenne.

Vous devrez donc afficher le bon code QR en fonction du pays de votre utilisateur.

Si vous attendez des paiements depuis la République tchèque, gardez à l'esprit que les codes QR tchèques ne fonctionnent qu'en couronnes tchèques (monnaie tchèque CZK).

Ou si vous résidez en République tchèque et que vous attendez des paiements depuis la Slovaquie, le QR ne fonctionne qu'en euros.

The code below can help you calculate the right currency amount.

First we get the current reference exchange rate from the central bank.

Then we calculate the euro and czk prices, depending on the product price and currency.

const getExchangeRate = async () => {
    const now = new Date();
    const dt = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1).toISOString().substring(0, 10);

    const url = "https://nbs.sk/export/sk/exchange-rate/" + dt + "/xml";
    const dat  = { url: url }
    const opts = {
        headers: {
            'Content-Type': 'application/json'
        },
        method: "POST",
        body: JSON.stringify(dat)
    }

    const resp = await fetch("/api/httpfetch", opts);
    const xml = await resp.text();

    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xml, "text/xml");
    const node = xmlDoc.querySelector("Cube [currency='CZK']");
    if (node) {
        const attr = node.getAttribute("rate");
        if (attr) {
            const num = attr.replace(/\s/, "").replace(",", ".");
            return +num;
        }
    }
    return undefined;
}

    // basePrice is the amount to be paid, for the products or services
    // currencyCode is the currency the products or services are sold in.
    const czkRate = await getExchangeRate();

    const eurPrice = currencyCode === "EUR" ? basePrice : (Math.ceil(basePrice / czkRate * 100) / 100).toFixed(2);
    const czkPrice = currencyCode === "CZK" ? basePrice : (Math.ceil(basePrice * czkRate * 100) / 100).toFixed(2);
Copier après la connexion

Get Paid

Trying to read badly printed IBANs from invoices or even typing in the horribly long IBANs is super annoying.

That you have to be very careful and check three times, because it is money, makes it even more so.

We make software to make our lives easier, and QR codes for payments fit this goal nicely.

I hope you found the information useful, and if you have some pointers about your national QR code schemes, please shoot them my way.

Happy hacking!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal