Paze℠ SDK JavaScript Integration

Overview

Paze's SDKs can be used to integrate Paze payment option onto the merchant's webstore. UI/UX certification for the UI setup must be conducted in collaboration with the Paze and Radial.

Example Workflow

  1. Shopper Initiates Payment: A shopper fills in their payment details on the merchant's webstore and submits the payment.
  2. Paze SDK Generates Payload: The Paze SDK generates the payload (payload ID, secure payload, session ID).
  3. Merchant Sends Payload to Radial: The merchant's backend system sends the complete payload to Radial's API endpoint.
  4. Radial Processes the Payload: Radial decrypts the secure payload, validates the data, and processes the payment.
  5. Response Sent to Merchant: Radial sends a response back to the merchant indicating the outcome of the payment processing.
  6. Merchant Updates Order Status: Based on Radial's response, the merchant updates the shopper's order status and provides feedback.

Integration Steps

Complete the following series of step to integrate the Paze SDK with your checkout.

Import the SDK

The following example shows how to load the SDK and create an adapter

Copy 
<html>
   <head></head>
   <body>
       <script
            src="https://checkout.wallet.cat.earlywarning.io/web/resources/js/digitalwallet-sdk.js" type="text/javascript"></script>
       <script>let digitalWalletAdaptor = window.DIGITAL_WALLET_SDK;</script>
   </body>
</html>
                    

 

Implementation Steps for Paze SDK Integration

Prerequisites

Merchants need the following:

  • Client ID (Radial provided)
  • Display name to be associated with Paze
  • Profile ID (Radial provided)

Load the Paze SDK

Include the PazeSM SDK script in the HTML file.

Copy 
<script src="https://checkout.wallet.cat.earlywarning.io/web/resources/js/digitalwallet-sdk.js" type="text/javascript"></script>
                    

Initialize the SDK

Initialize the SDK using the provided client ID, display name, and profile ID.

Copy 
digitalWalletAdaptor.initialize({
    "client": {
        "id": "-----RADIAL will provide the client id-----",
        "name": "------Display name associated with the Merchant----",
        "profileId": "-----RADIAL will provide the profile id-----"
    }
}).then(() => {
    console.log('init completed');
    // Proceed with further actions
});
                    

Determine If the Shopper Can Checkout

Use the canCheckout method to verify if the shopper can proceed with the checkout process.

Copy 
digitalWalletAdaptor.canCheckout({
    "emailAddress": "someemail@address.com"
}).then((consumerPresent) => {
    console.log('canCheckout completed');
    console.log("consumerPresent: " + JSON.stringify(consumerPresent, null, 2));
    // Proceed with checkout if consumer is present
});

 

Note: Shopper=Consumer in this context.

Initiate the Checkout Process

  • Create a unique session ID.
  • Define transaction details such as amount, currency, accepted card networks, and other options.
  • Use the checkout method to start the checkout process.
Copy 
let guid = Date.now().toString(36) + Math.random().toString(36).substring(2);
let transactionValue = {
    "transactionAmount": "50.21",
    "transactionCurrencyCode": "USD"
};
let acceptedPaymentCardNetworks = ["VISA", "MASTERCARD"];
let transactionOptions = {
    "billingPreference": "ALL",
    "merchantCategoryCode": "US",
    "payloadTypeIndicator": "PAYMENT"
};

digitalWalletAdaptor.checkout({
    "acceptedPaymentCardNetworks": acceptedPaymentCardNetworks,
    "emailAddress": "someemail@address.com",
    "sessionId": guid,
    "actionCode": "START_FLOW",
    "transactionValue": transactionValue,
    "shippingPreference": "ALL"
}).then((CheckoutResponse) => {
    console.log("Checkout Response Object: " + CheckoutResponse);
    console.log("Checkout Result: " + CheckoutResponse.result);
    console.log("CheckoutResponse: " + JSON.stringify(CheckoutResponse, null, 2));
    // Proceed with completing the transaction
});
digitalWalletAdaptor.canCheckout({
    "emailAddress": "someemail@address.com"
}).then((consumerPresent) => {
    console.log('canCheckout completed');
    console.log("consumerPresent: " + JSON.stringify(consumerPresent, null, 2));
    // Proceed with checkout if consumer is present
});
                    

Complete the Transaction

Use the complete method to finalize the transaction.

Copy 
digitalWalletAdaptor.complete({
    "transactionOptions": transactionOptions,
    "transactionId": "",
    "emailAddress": "someemail@address.com",
    "sessionId": guid,
    "transactionType": "PURCHASE",
    "transactionValue": transactionValue
}).then((completeResponse) => {
    console.log("Complete Response Object: " + completeResponse);
    console.log("Complete: " + JSON.stringify(completeResponse, null, 2));
});
                    

Full HTML with Embedded JavaScript

Copy 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Single Page Sample Paze Merchant SDK API</title>
</head>

<body>
    <script src="https://sandbox.digitalwallet.earlywarning.com/web/resources/js/digitalwallet-sdk.js" type="text/javascript">
    </script>
    <script>
        setTimeout(() => {
            let digitalWalletAdaptor = window.DIGITAL_WALLET_SDK;
            digitalWalletAdaptor.initialize({
                "client": {
                    "id": "-----RADIAL will provide the client id-----",
                    "name": "------Display name associated with the Merchant----",
                    "profileId": "-----RADIAL will provide the profile id-----"
                }
            }).then(() => {
                console.log('init completed');
                digitalWalletAdaptor.canCheckout({
                    "emailAddress": "someemail@address.com"

                }).then((consumerPresent) => {
                    console.log('canCheckout completed');
                    console.log("consumerPresent: " + JSON.stringify(consumerPresent, null, 2));

                    let guid = Date.now().toString(36) + Math.random().toString(36).substring(2);
                    let transactionValue = {
                        "transactionAmount": "50.21",
                        "transactionCurrencyCode": "USD"
                    };
                    let acceptedPaymentCardNetworks = ["VISA", "MASTERCARD"];
                    let transactionOptions = {
                        "billingPreference": "ALL",
                        "merchantCategoryCode": "US",
                        "payloadTypeIndicator": "PAYMENT"
                    };

                    digitalWalletAdaptor.checkout({
                        "acceptedPaymentCardNetworks": acceptedPaymentCardNetworks,
                        "emailAddress": "someemail@address.com",
                        "sessionId": guid,
                        "actionCode": "START_FLOW",
                        "transactionValue": transactionValue,
                        "shippingPreference": "ALL"
                    }).then((CheckoutResponse) => {
                        console.log("Checkout Response Object: " + CheckoutResponse);
                        console.log("Checkout Result: " + CheckoutResponse.result);
                        console.log("CheckoutResponse: " + JSON.stringify(CheckoutResponse, null, 2));

                        digitalWalletAdaptor.complete({
                            "transactionOptions": transactionOptions,
                            "transactionId": "",
                            "emailAddress": "someemail@address.com",
                            "sessionId": guid,
                            "transactionType": "PURCHASE",
                            "transactionValue": transactionValue
                        }).then((completeResponse) => {
                            console.log("Complete Response Object: " + completeResponse);
                            console.log("Complete: " + JSON.stringify(completeResponse, null, 2));
                        });
                    });
                });
            });
        }, 7000);
    </script>
</body>

</html>
                    

 

Sample Checkout and Complete Request Response

After integrating with Paze SDK, the checkout function and the complete function return the following sample response for the sample requests. For more details about request/response elements, refer to the Paze-provided integration guide - provided by Radial.

Checkout Request

Copy 
{
    "emailAddress": "example@domain.com",
    "sessionId": "session123",
    "actionCode": "START_FLOW",
    "intent": "REVIEW_AND_PAY",
    "transactionValue": {
        "amount": "100.00",
        "currency": "USD"
    },
    "shippingPreference": "ALL",
    "billingPreference": "ZIP_COUNTRY",
    "acceptedShippingCountries": [
        "US",
        "CA"
    ],
    "acceptedPaymentCardNetworks": [
        "VISA",
        "MASTERCARD"
    ]
}
                    

Checkout Response

Copy 
{
    "result": "COMPLETE",
    "checkoutResponse": "eyJhdWQiOiJmaWxlOi8vIiwia2lkIjoiODM2Mjg2NmQtZDgxNi00YjhjLWFkZDMtMmQxMDk0NjQ3ODVjIiwiaXNzIjoiaHR0cHM6Ly9zYW5kYm94LmRpZ2l0YWx3YWxsZXQuZWFybHl3YXJuaW5nLmNvbSIsInR5cCI6IkpXVCIsImV4cCI6MTcyMDg3ODcyOCwiaWF0IjoxNzIwNzA1OTI4LCJhbGciOiJSUzI1NiIsImp0aSI6IjdhMGJkYWY4LThjNWItNGM3NC05MDIxLTQ4NTA0YmJmM2M2MyJ9.eyJzZXNzaW9uSWQiOiJseWhidXpjcGtpanFzZmt5MSIsImNvbnN1bWVyIjp7ImZpcnN0TmFtZSI6IkdhdXJhdiIsImxhc3ROYW1lIjoiUGF0aWwiLCJmdWxsTmFtZSI6IlBhdGlsIiwiZW1haWxBZGRyZXNzIjoiZ3BhdGlsQHJhZGlhbC5jb20iLCJtb2JpbGVOdW1iZXIiOnsiY291bnRyeUNvZGUiOiIxIiwicGhvbmVOdW1iZXIiOiIyNjkzMTI5MjA3In0sImNvdW50cnlDb2RlIjoiVVMiLCJsYW5ndWFnZUNvZGUiOiJFTiJ9LCJtYXNrZWRDYXJkIjp7ImRpZ2l0YWxDYXJkSWQiOiJlMGExYTAwZC04MmM3LTQ1N2QtOGZmNy0wYWI1NzI4MWFjZDUiLCJwYW5MYXN0Rm91ciI6IjMxMjkiLCJwYXltZW50QWNjb3VudFJlZmVyZW5jZSI6IlYwMDEwMDEzMDIzMTgxNDg3MjQwOTkxMDYwMDUyIiwicGFuRXhwaXJhdGlvbk1vbnRoIjoiMDUiLCJwYW5FeHBpcmF0aW9uWWVhciI6IjIwMzIiLCJwYXltZW50Q2FyZERlc2NyaXB0b3IiOiJWaXNhICBIZXJvIENhcmQiLCJkaWdpdGFsQ2FyZERhdGEiOnsiYXJ0VXJpIjoiaHR0cHM6Ly9zYW5kYm94LmFzc2V0cy52aW1zLnZpc2EuY29tL3ZpbXMvY2FyZGFydC84ZjY0NjE0ZGVmMWE0MWQzOWVhOGFjYWU0NjE2YmY2Zl9pbWFnZUMifSwiYmlsbGluZ0FkZHJlc3MiOnsibGluZTEiOiIzOTk0IEphYmFyaSBIaWxsIiwiY2l0eSI6Ik1jS2Vuemllc3RhZCIsInN0YXRlIjoiU0QiLCJjb3VudHJ5Q29kZSI6IlVTIiwiemlwIjoiNjcwNjEifSwicGF5bWVudENhcmRUeXBlIjoiREVCSVQiLCJwYXltZW50Q2FyZEJyYW5kIjoiVklTQSIsInBheW1lbnRDYXJkTmV0d29yayI6IlZJU0EifSwic2hpcHBpbmdBZGRyZXNzIjp7ImxpbmUxIjoiMDY4MzQgS3ViIFVuaW9ucyIsImNpdHkiOiJNYW50ZWZvcnQiLCJzdGF0ZSI6IlZBIiwiemlwIjoiNjcwNTciLCJjb3VudHJ5Q29kZSI6IlVTIiwiZGVsaXZlcnlDb250YWN0RGV0YWlscyI6eyJjb250YWN0RnVsbE5hbWUiOiJHYXVyYXYgUGF0aWwiLCJjb250YWN0UGhvbmVOdW1iZXIiOnsiY291bnRyeUNvZGUiOiIxIiwicGhvbmVOdW1iZXIiOiIyNjkzMTI5MjA3In19fX0.CeBBzg83yS8Efp1XD5XXAJzXijnZA-kTJ8J86Xfvu2sZGbY40lMDq-fRsBYp4o3_guvBfEhPb9EtlHEORUb2EOfvKoEyzOqzi9TSLDM7E4lkRd-UkYMKSzJVzvlOaQFZzBUjJYY5ugtp8qEyyzXY_S1e9dhmdLTggoH0IE0bcb_6x9I6fYkIa8lXyaWWRj9nV6vB2rXGvT2PCdtp4OEUxCMrTZr4YCNw3PCo_z2glbN5Q77ECSjiINlYgsdsTD5N-umpvci5xaU-8K9J1gpN9n7Zpysw8XtxuBYAQkQob2bXqzaNylDJkoPtjfw6oAPY0oYn4hNZTOWjx4VChMtbQw"
}
                    

 

After decoding preceding base64 response, the following details are returned.

Copy 
{
    "aud": "file://",
    "kid": "some-kid",
    "iss": "https://sandbox.digitalwallet.earlywarning.com",
    "typ": "JWT",
    "exp": 1720878728,
    "iat": 1720705928,
    "alg": "RS256",
    "jti": "7a0bdaf8-8c5b-4c74-9021-48504bbf3c63"
}
                    

 

Payload Data is used to map with Radial's Authorization Request.

Copy 
{
    "sessionId": "lyhbuzcpkijqsfky1",
    "consumer": {
        "firstName": "FName",
        "lastName": "LName",
        "fullName": "FName LName",
        "emailAddress": "some@email.com",
        "mobileNumber": {
            "countryCode": "1",
            "phoneNumber": "2223333434"
        },
        "countryCode": "US",
        "languageCode": "EN"
    },
    "maskedCard": {
        "digitalCardId": "e0a1a00d-82c7-457d-8ff7-0ab57281acd5",
        "panLastFour": "3129",
        "paymentAccountReference": "account-reference-number",
        "panExpirationMonth": "05",
        "panExpirationYear": "2032",
        "paymentCardDescriptor": "Visa  Hero Card",
        "digitalCardData": {
            "artUri": "https://sandbox.assets.vims.visa.com/vims/cardart/8f64614def1a41d39ea8acae4616bf6f_imageC"
        },
        "billingAddress": {
            "line1": "3994 Jabari Hill",
            "city": "McKenziestad",
            "state": "SD",
            "countryCode": "US",
            "zip": "67061"
        },
        "paymentCardType": "DEBIT",
        "paymentCardBrand": "VISA",
        "paymentCardNetwork": "VISA"
    },
    "shippingAddress": {
        "line1": "06834 Kub Unions",
        "city": "Mantefort",
        "state": "VA",
        "zip": "67057",
        "countryCode": "US",
        "deliveryContactDetails": {
            "contactFullName": "FName LName",
            "contactPhoneNumber": {
                "countryCode": "1",
                "phoneNumber": "2223333434"
            }
        }
    }
}
                    
Complete Request
Copy 
{
    "sessionId": "session123",
    "transactionType": "PURCHASE",
    "transactionOptions": {
        "option1": "value1",
        "option2": "value2"
    },
    "transactionValue": {
        "amount": "100.00",
        "currency": "USD"
    },
    "processingNetwork": "VISA"
}
                    
Complete Response
Copy 
{
    "completeResponse": "eyJhdWQiOiJmaWxlOi8vIiwia2lkIjoi........"
}

 

Refer to Wallet Authorization for mapping between checkout response, complete response, and Radial's authorization request.