On This Page

Loading the JavaScript Library and Invoking the Accept Function

Use the client library asset path and client library integrity value that is returned by the capture context response to invoke Unified Checkout on your page.

You can retrieve these values from the

clientLibrary

and

clientLibraryIntegrity

fields that are returned in the JWT from

https://nabgateway-api-test.nab.com.au/up/v1/capture-contexts

. You can use these values to create your script tags.

You must perform this process for each transaction, as these values may be unique for each transaction. You must avoid hard-coding values for the

clientLibrary

and

clientLibraryIntegrity

fields to prevent client-side errors.

For example, a response from

https://nabgateway-api-test.nab.com.au/up/v1/capture-contexts

would include:

"data": {
    "clientLibrary":"[EXTRACT clientLibrary VALUE from here]",
    "clientLibraryIntegrity": "[EXTRACT clientLibraryIntegrity VALUE from here]"
}

Below is an example script tag:

<script src="[INSERT clientLibrary VALUE HERE]" 
    integrity=”[INSERT clientLibraryIntegrity VALUE HERE]”
    crossorigin=”anonymous”></script>

IMPORTANT

Use the

clientLibrary

and

clientLibraryIntegriry

parameter values in the capture context response to obtain the Unified Checkout JavaScript library URL and the integrity value. This ensures that you are always using the most up-to-date library. Do not hard-code the Unified Checkout JavaScript library URL or integrity value.

When you load the library, the capture context from your initial server-side request is used to invoke the accept function.

JavaScript Example: Initializing the SDK

try {
        const accept = await Accept(captureContext);
        const up = await accept.unifiedPayments(sidebar);


      } catch (error) {
        // merchant logic for handling issues
        console.error("something went wrong: " + error);
      }

In this example,

captureContext

refers to the capture context JWT.

JavaScript Example: Displaying the Button List

After you initialize the Unified Checkout object, you can add the payment application and payment acceptance pages to your webpage. You can attach the embedded Unified Checkout tool and payment acceptance pages to any named element within your HTML. Typically, they are attached to explicit named components that are replaced with Unified Checkout’s iframes.

try {
    const accept = await Accept(captureContext);
    const up = await accept.unifiedPayments(sidebar);
    const tt = await up.show(showArgs);
} catch (error) {
    // merchant logic for handling issues
    console.error("something went wrong: " + error);
}

To display the Unified Checkout Button List within your payment page, a call is made to the unifiedPayments.Show() function. This function accepts a JSON object that links the

<div>

tags within your payment page to place the Unified Checkout button list and optional embeddable payment page.

const showArgs = {
    containers: {
        paymentSelection: '#buttonPaymentListContainer',
        paymentScreen: '#embeddedPaymentContainer'
    }
};

The response to the unifiedPayment.show() method is a JWT data object referred to here as a transient token. The transient token contains all the payment information captured during the Unified Checkout payment journey.

JavaScript Example: Processing a Payment

Payment is initiated when Unified Checkout captures the clients payment information by calling the

unifiedPayment.complete()

function and passing the transient token.

try {
    const accept = await Accept(captureContext);
    const up = await accept.unifiedPayments(sidebar);
    const tt = await up.show(showArgs);
    const completeResponse = await up.complete(tt);

    console.log(completeResponse); // merchant logic for handling complete response
} catch (error) {
    // merchant logic for handling issues
    console.error("something went wrong: " + error);
}
}

Unified Checkout can be leveraged to initiate payment, or you can call the payment APIs directly. See Authorizations with a Transient Token.