Render QR Code

Apart from in-place rendered payment methods, you can render a QR code allowing the customer to finalize the payment using their mobile device.

You can either prepare your own landing page or use our default one.

In order to render the QR code on Merchant's frontend side, you need to use injectQR method of IAltaPay session object. This method accepts <div> or <img> HTML element as a parameter, where the QR code will be rendered, and the URL to the page where the user will be redirected after scanning the QR code.

paymentSession.injectQR(
    document.getElementById('qr-code'),
    "https://example.com/qr-page"
);

If you don't specify the URL, we will generate QR code pointing our default landing page:

paymentSession.injectQR(
    document.getElementById('qr-code')
);

In order to retrieve the QR code for a specific session using your backend service, you need to make a POST request to /checkout/v1/api/session/{sessionId}/link endpoint with JWT token in the header.

You can specify here:

Field Type Description Mandatory
url URL Provide your payment page URL if you want to use your custom website. Otherwise AltaPay's default payment page will be used. no
size int QR Code size in pixels. Default is 500px no
validityTime int Time in minutes when the link will be accessible for the customers. Default 14 days. no
activationTime int Time in minutes when link will be active once opened by the customer. Default 10 minutes. no 
 curl --location --request POST 'https://{checkout-api-url}.altapaysecure.com/checkout/v1/api/session/{sessionId}/link' \
--header 'Authorization: Bearer $TOKEN' \
--header 'Content-Type: application/json' \
--data '{
    "url" : "https://www.example.com/link,
    "size": 450,
    "validityTime": 1440,
    "activationTime": 10
}'

Response will contain id and qrCode field containing QR code image in base64 format, which you can render on your frontend.

{
    "id": "<payment_link_id>",
    "paymentLink": "<URL_to_payment_page>",
    "qrCode": "<base64_encoded_qr_code>"
}

Default landing page

If you don't want to build your own page to handle QR Payments like described here, you can use the default one provided by AltaPay - A MarketPay Company, for more details please check here.

In order to use it, just skip the optional url parameter when creating QR code with AltaPay - A MarketPay Company.

Similarly to previous scenario, you need to call injectQR method, but specify only the HTML element (<div> or <img>) where the QR code will be rendered.

paymentSession.injectQR(
    document.getElementById('qr-code')
);

Similarly to previous scenario, you need to make a POST request to /checkout/v1/api/session/{sessionId}/link endpoint with JWT token in the header, but this time without url parameter.

 curl --location --request POST 'https://{checkout-api-url}.altapaysecure.com/checkout/v1/api/session/{sessionId}/link' \
--header 'Authorization: Bearer $TOKEN' \
--header 'Content-Type: application/json' \
--data '{
    "size": 450
}'

Response will contain id and qrCode field containing QR code image in base64 format, which you can render on your frontend.

{
    "id": "<payment_link_id>",
    "paymentLink": "<URL_to_payment_page>",
    "qrCode": "<base64_encoded_qr_code>"
}