How to Build the QR Code Landing Page

When a customer scans the QR code, they will be redirected to the QR Code landing page. The link embedded in the QR code will contain extra base64 encoded data that will be used to initialize the payment session: http://your-company.com/qr-payment?checkoutData=<checkoutData>

Initialize Payment Session

JS SDKREST API

Instrumenting the payment process after the QR code redirect is similar to a regular checkout page. The main difference is the different initialization methods - please use initFromQr method here.

const checkoutData = url.searchParams.get('checkoutData')
paymentSession = Altapay.initFromQR(checkoutData)

Where checkoutData is a query parameter that we passed along with the redirect URL in the QR code. This function will query for the session data and initialize the payment session.

1. Decode base64 encoded checkoutData query parameter from the QC code URL link. It will contain the following data:

{
    "id": "942e5578-2c62-11ee-be56-0242ac120002",
    "apiUrl": "https://{checkout-api-url}.altapaysecure.com/checkout"
}

2. Query our REST API endpoint /checkout/api/v1/link/{linkId} to retrieve the session data:

curl --location --request GET 'https://{checkout-api-url}.altapaysecure.com/checkout/v1/api/link/{linkId}'

In response, you will receive

{
    "sessionId": "942e5578-2c62-11ee-be56-0242ac120002",
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJBbHRhUGF5IElzc3VlciIsInVwbiI6ImNoZWNrb3V0X2FwaSIsImdyb3VwcyI6WyJTZXNzaW9uVXBkYXRlIiwiRXhlY3V0ZVBheW1lbnQiLCJMaXN0UGF5bWVudE1ldGhvZHMiXSwiYXV0aElkIjoiZjE5YjkxZDctZDVmZS00NzFlLTkwM2EtM2JiYTk0Y2FhYzQ4IiwiaWF0IjoxNjcwOTQyMzk5LCJleHAiOjE2NzA5NDQxOTksImp0aSI6IjVhY2ZjNTgwLWQ2NjAtNDFmMS05NTJmLTBkY2ZjODRiZWM5OCJ9.XUq8AvEEEeURB-tUF2sIzUj7RdirjWJWC1NvGJsyucI0AteOxyWqnJ4zJzTe0BM61vm9Fuu6czsPhh2OqhMdolYmnDsMBDQgoIDhasr5-TukKkIWUJWIfZXsbjJHd8o8-cT70lciDO4pZhp3a16kG-mn6gtY_ezLkcbOtlExv7R0XiLy4qV5vZt1Q6mBPeyy0nEeMhjsud5ZkKMWjqLAh3LqQP2V5_W5UiGo1EPE9P-qNTDUpQolREyWaNbhQwPoverjaGq-xxTNikpJLPAwux4ytmDhAnyt_L7QlAmltRyKegIQIyKpKCKs62cOz7yj7sad_aROefH2jFgEDf6Eqg"
}

1. Load checkout session

curl \
  --header "Content-Type: application/json" \
  --header "Authorization: Bearer $TOKEN" \
  --request GET \
  https://{checkout-api-url}.altapaysecure.com/checkout/v1/api/session/{sessionId}

Setup Callbacks

You may want to configure additional javascript callbacks in order to present the results of the payment on this page.

JS SDK

paymentSession.setCallbacks(
    AltaPayFactory.getCallbacksBuilder()
        .setSuccess(function (altapayEvent) {
            // handle successful payment
        })
        .setFailure(function (altapayEvent) {
            // handle failed payment
        })
        .build()
)

Render Payment Methods and Proceed With the Payment

The rest of the integration is the same as for the regular checkout page. For more details, please follow payment methods rendering and further steps in the integration guidelines.

Please find the example below:

JS SDKREST API

<script type="module" src="https://{checkout-api-url}.altapaysecure.com/checkout/v1/js/AltaPaySDK.js"></script>
<script>
var paymentSession = null;
window.onload = function () {
    const checkoutData = url.searchParams.get('checkoutData')
    paymentSession = Altapay.initFromQR(checkoutData)
            .setCallbacks(
                AltaPayFactory.getCallbacksBuilder()
                    .setSuccess(function (altapayEvent) {
                        // handle successful payment
                    })
                    .setFailure(function (altapayEvent) {
                        // handle failed payment
                    })
                    .build()
            )
            .injectPaymentMethods(document.getElementById('payment-methods-list'));
}
document.getElementById('payButton').onclick = function onPayButtonClick() {
    paymentSession.initiatePayment();
}
</script>

1. Decode base64 encoded checkoutData query parameter from the QR code URL link. It will contain the following data:

{
    "id": "942e5578-2c62-11ee-be56-0242ac120002",
    "apiUrl": "https://{checkout-api-url}.altapaysecure.com/checkout"
}

2. Query our REST API endpoint /checkout/api/v1/link/{linkId} to retrieve the session data:

curl --location --request GET 'https://{checkout-api-url}.altapaysecure.com/checkout/v1/api/link/{linkId}'

In response you will receive:

{
    "sessionId": "942e5578-2c62-11ee-be56-0242ac120002",
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJBbHRhUGF5IElzc3VlciIsInVwbiI6ImNoZWNrb3V0X2FwaSIsImdyb3VwcyI6WyJTZXNzaW9uVXBkYXRlIiwiRXhlY3V0ZVBheW1lbnQiLCJMaXN0UGF5bWVudE1ldGhvZHMiXSwiYXV0aElkIjoiZjE5YjkxZDctZDVmZS00NzFlLTkwM2EtM2JiYTk0Y2FhYzQ4IiwiaWF0IjoxNjcwOTQyMzk5LCJleHAiOjE2NzA5NDQxOTksImp0aSI6IjVhY2ZjNTgwLWQ2NjAtNDFmMS05NTJmLTBkY2ZjODRiZWM5OCJ9.XUq8AvEEEeURB-tUF2sIzUj7RdirjWJWC1NvGJsyucI0AteOxyWqnJ4zJzTe0BM61vm9Fuu6czsPhh2OqhMdolYmnDsMBDQgoIDhasr5-TukKkIWUJWIfZXsbjJHd8o8-cT70lciDO4pZhp3a16kG-mn6gtY_ezLkcbOtlExv7R0XiLy4qV5vZt1Q6mBPeyy0nEeMhjsud5ZkKMWjqLAh3LqQP2V5_W5UiGo1EPE9P-qNTDUpQolREyWaNbhQwPoverjaGq-xxTNikpJLPAwux4ytmDhAnyt_L7QlAmltRyKegIQIyKpKCKs62cOz7yj7sad_aROefH2jFgEDf6Eqg"
}

3. Load checkout session

curl \
  --header 'Content-Type: application/json' \
  --header 'Authorization: Bearer $TOKEN' \
  --request GET \
  https://{checkout-api-url}.altapaysecure.com/checkout/v1/api/session/{sessionId}

4. Retrieve payment methods available for the given checkout session

curl --location --request GET 'https://{checkout-api-url}.altapaysecure.com/checkout/v1/api/payment-methods'

5. Initiate payment

curl --location 'http://localhost/checkout/v1/api/payment' \
--header 'Authorization: Bearer $TOKEN' \
--header 'Content-Type: application/json' \
--data '{
    "paymentMethodId" : "AltaPay Checkout CreditCard Terminal",
    "sessionId": "2171b42e-dc4e-4a56-9fca-7de6f6d60625"
}'