> 웹 프론트엔드 > JS 튜토리얼 > QR로 결제받기

QR로 결제받기

王林
풀어 주다: 2024-07-26 16:58:44
원래의
830명이 탐색했습니다.

Get paid in QR

아니요, 픽셀이 아니라 유로입니다.

아니요, 신용카드는 안됩니다.

네, 전화로요.

동기 부여

제품이나 서비스를 판매하는 경우 대가를 받는 것은 당연한 요구 사항입니다.

요즘은 신용카드가 왕이죠. 어쨌든 온라인이니까요.

신용카드, Google 또는 Apple Pay를 대신 처리할 수 있는 결제 게이트웨이가 많이 있습니다.

물론 유료입니다.

실제 매장에 가면 신용카드 단말기가 있습니다.

일부 은행에서는 휴대폰을 CC 단말기로 바꿔주는 훨씬 저렴한 Android 앱을 판매할 수 있습니다.

특히 하루에 몇 건의 결제만 처리하는 경우에는 고려해 볼 가치가 있습니다.

이러한 옵션은 일반적인 소비자 시나리오의 거의 모든 상황을 다룹니다.

사람이 온라인이나 오프라인 상점에 가서 여러 가지 제품을 구입하거나 머리를 자르는 곳입니다.

하지만 더 많은 것이 있습니다.

  1. 소액결제를 처리해야 하는 비영리단체나 시민단체라면 어떨까요.
  2. 귀하가 B2B 회사이고 고객이 직접 이체를 통한 결제를 원하는 경우
  3. 아니면 신용카드 결제 시 약 2~3%의 간접비를 지불하고 싶지 않다면 어떻게 해야 할까요?

이 모든 경우에 대한 답은 유럽 연합에서 SEPA입니다.

보다 구체적으로 SEPA 학점 이체.

또는 더 젊지만 훨씬 빠른 형제 SEPA Instant Credit Transfer.

SEPA 학점 이체

이름이 낯설더라도 걱정하지 마세요. 예전과 똑같은 계좌이체입니다.

예. 은행에 귀하의 계좌에서 돈을 인출하고 다른 사람에게 입금하라고 지시합니다.

기존에는 종이 양식을 작성했지만 요즘은 모바일 뱅킹 앱에서 몇 번의 클릭만으로 작성이 가능합니다.

하지만 이제 표준화된 국제 은행 계좌 번호인 IBAN이 있습니다.

유럽연합(EU)은 물론 전 세계 어디든 송금이 매우 쉬워졌습니다.

SEPA Instant를 사용하면 몇 초 만에 돈이 도착합니다.

근데 IBAN이 너무 길어서 겁이 날 정도입니다.

그리고 사람들이 물건 입력을 잘 못하기로 악명 높기 때문에 추가 메모는 잊어버리고 적당량만 받으면 만족할 수 있습니다.

이 모든 문제는 QR코드로 쉽게 해결됩니다.

고객은 휴대폰으로 스캔하여 금액을 확인하고 뱅킹 앱에서 결제를 클릭할 수 있습니다.

SEPA 즉시 신용 이체 제도에 가입한 은행 목록이 늘어나면 돈이 눈 깜짝할 사이에 도착할 가능성이 높습니다.

향후 블로그에서는 은행 계좌의 입금 내역을 확인하는 방법을 살펴보겠습니다.

예를 들어 송장 생성 및 전송을 자동화합니다.

슬로바키아와 체코의 QR 코드를 생성하는 방법을 보여드리겠습니다.

이 목록을 더 길게 만들고 싶으므로 귀하의 국가에서 QR 코드가 어떻게 만들어지는지 알고 계시다면 알려주시기 바랍니다.

QR 슬로바키아

슬로바키아 은행은 Pay by Square라는 공통 표준에 동의했습니다.

온라인 시나리오에서 사용할 수 있는 URL 스키마도 있습니다.

예. 사용자가 링크를 클릭하면 모든 결제 정보가 입력된 상태로 뱅킹 앱이 실행됩니다.

안타깝게도 상호 운용이 불가능합니다(2024년 기준).

NodeJS에서 QR 코드를 생성하는 방법을 보여드리겠습니다.

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);
    }
});
로그인 후 복사

생성 방법은 bysquare 라이브러리에서 가져왔습니다.

평소와 같이 npm을 사용하여 설치할 수 있습니다. npm i bysquare

브라우저나 송장 문서에서 사용할 수 있는 PNG 이미지를 얻으려면 다음과 같은 메소드를 호출합니다.

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))} />
}

로그인 후 복사

결제 시 설명 메시지를 추가하면 매우 도움이 되는 경우가 많습니다.

다음은 클라이언트 이름을 정규화하는 몇 가지 간단한 코드입니다.

이렇게 하면 발음 구별 부호가 제거되어 Ján KováčJan Kovac으로 변경됩니다.

완벽하게 읽을 수 있어야 하며 은행 시스템에서 문제가 발생하지 않도록 해야 합니다.

    const paymentMessage = customerName?.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").substring(0, 100) || "";
로그인 후 복사

QR 체코

체코나 체코는 지금까지(2024년) 유로화에 저항했지만 QR 코드 방식을 사용하고 있습니다.

그리고 우리가 사용할 수 있는 로열티 프리 코드 생성기도 있습니다.
이제 보안상의 이유로 직접 생성할 수도 있습니다.

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} />
}
로그인 후 복사

국제적인

안타깝게도 아직 국제적, 유럽적 QR 표준은 없습니다.

따라서 사용자의 국가에 따라 올바른 QR 코드를 표시해야 합니다.

체코에서 결제할 예정인 경우 체코 QR 코드는 체코 크라운(체코 통화 CZK)에서만 작동한다는 점에 유의하세요.

또는 체코 공화국에 거주하고 슬로바키아에서 결제를 받으려는 경우 QR은 유로로만 작동합니다.

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);
로그인 후 복사

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!

위 내용은 QR로 결제받기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿