On This Page

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.