addPaymentInfo(payment: BasketPayment, template: HTMLTemplateElement | string): void¶

The addPaymentInfo method adds additional payment information to a specified payment option using a provided HTML template or string. This allows for customization and display of payment-related details within the basket's shipping configuration.

Input parameters¶

payment¶

payment is a mandatory parameter which represents the BasketPayment model specifying the payment method to which the additional information will be added.

template¶

template is a mandatory parameter that can be either an HTMLTemplateElement or a string. It contains the HTML structure or id of the element that will be associated with the specified payment method.

Returned value¶

This method does not return any value (void).

Example¶

In this example, we use the basketPaymentsApi to add additional payment information to a current payment option using an HTML template.

useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketPaymentsApi = await getApi('basketPaymentsApi');

        const selectedPayment = basketPaymentsApi.getSelectedPayment();

        const paymentInfoTemplateElement = document.createElement('template');

        paymentInfoTemplateElement.innerHTML = `
            <div class="payment-info">
                <p>Please ensure your credit card details are correct.</p>
            </div>
        `;

        basketPaymentsApi.addPaymentInfo(selectedPayment, paymentInfoTemplateElement);

        console.log('Added payment information to the selected payment option.');
    });
});

Example¶

In this example, we use the basketPaymentsApi to add additional payment information to a current payment option using a string id.

<template id="payment-info-template">
    <div class="payment-info">
        <p>Please ensure your credit card details are correct.</p>
    </div>
</template>

useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketPaymentsApi = await getApi('basketPaymentsApi');

        const selectedPayment = basketPaymentsApi.getSelectedPayment();

        const templateId = 'payment-info-template';

        basketPaymentsApi.addPaymentInfo(selectedPayment, templateId);

        console.log('Added payment information to the selected payment option.');
    });
});

Basket Payments API methods reference¶

Models reference¶

BasketPayment