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 content 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 (storefront) => {
    let basketPaymentsApi = storefront.getApiSync('basketPaymentsApi');

    if (!basketPaymentsApi) {
        const featureSystemApi = this.getApiSync('FeatureSystemApi');
        await featureSystemApi.registerDynamic('basket');

        basketPaymentsApi = storefront.getApiSync('basketPaymentsApi');
    }

    const selectedPayment = basketPaymentsApi.getSelectedPayment();

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

    basketPaymentsApi.addPaymentInfo(selectedPayment, paymentInfoTemplate);

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

Basket Payments API methods reference¶

Models reference¶

BasketPayment