Widget Examples

On this page, you will find real examples requested by clients.
They illustrate the visual flexibility of the widget and the corresponding configuration code.

#1 – Accordion Layout with Filters

Visual adjustments have been made (radio buttons, background colors, sizes).
We also excluded the Floa method from being combined with gift cards.

Preview

Code

function filterPaypal(protocol) {
  return protocol.method === 'wallet';
}

function filterPrimary(protocol) {
  return protocol.method === 'creditcard';
}

async function createPaymentWidgetPrimary() {
  const widget = await widgetManager.createWidget({
    interface: 'PAYMENT',
    ui: {
      layout: {
        name: 'ACCORDION',
        merges: [
          { name: 'filterPrimary', filter: filterPrimary },
          { name: 'filterPaypal', filter: filterPaypal }
        ]
      },
      stylesheet: {
        overrides: {
          'usp-item-default-bg-color': '#f5f5f5',
          'usp-item-default-border-color': '#979797',
          'usp-radio-selected-bg-color': '#e60014',
          'usp-checkbox-selected-bg-color': '#e60014',
          'usp-radio-bg-color': '#ffffff',
          'usp-radio-size': '18px'
        }
      },
      assets: {
        overrides: {
          creditcard: [
            'mastercard-logo.png',
            'visa-logo.png',
            'logo-cb.jpeg',
            'american-express-logo.png'
          ]
        }
      },
      translations: {
        locale: 'fr-FR',
        overrides: {
          WIDGET_SELECTION_TITLE: '',
          WIDGET_PAYMENT_METHOD_CREDITCARD: 'Carte bancaire',
          WIDGET_PAYMENT_METHOD_CB3X: 'Paiement en 3 fois sans frais'
        }
      }
    }
  });

  await widget.mount('widget-payment-primary');
}

<div class="main">
  <div id="widget-payment" bind:this={widgetPaymentContainer} />
</div>

#2 – Custom Labels + Radio Style

Major visual and label changes:

• Token saving hidden
• Label placeholders adjusted
• Custom radio button styling

Preview

Code

async function createPaymentWidget() {
  const widget = await widgetManager.createWidget({
    interface: 'PAYMENT',
    name: 'widget-payment-primary',
    ui: {
      layout: {
        vaultBrandSelectionMode: 'inPanInput',
        name: 'ACCORDION',
        cardHolderPosition: 'top',
        saveTokenCheckboxMode: 'hidden'
      },
      translations: {
        overrides: {
          WIDGET_PAYMENT_METHOD_CREDITCARD: 'Carte bancaire',
          WIDGET_PAYMENT_METHOD_WALLET: 'Paypal, comptant ou 4X sans frais',
          PSP_PAYPAL_WALLET_REDIRECTION_TEXT: '',
          WIDGET_PAYMENT_CARD_NUMBER_PLACEHOLDER: 'Numéro de carte',
          WIDGET_PAYMENT_CARD_EXPIRY_DATE_PLACEHOLDER: 'Expire fin',
          WIDGET_PAYMENT_CARD_CVV_PLACEHOLDER: 'CVV',
          WIDGET_PAYMENT_METHOD_SELECTED:
            'SELECTED : Reste à payer [amount] par [methodDisplayName]',
          PSP_SUSPENSION_OUT_OF_AMOUNT_RANGE_MIN:
            'Cette méthode est possible pour un montant min de: [min]',
          PSP_SUSPENSION_OUT_OF_AMOUNT_RANGE_MAX:
            'Cette méthode est possible pour un montant max de: [max]'
        }
      },
      assets: {
        overrides: {
          creditcard: [
            '/img/widget/mastercard-logo.png',
            '/img/widget/visa-logo.png',
            '/img/widget/logo-cb.jpeg',
            '/img/widget/american-express-logo.png'
          ]
        }
      },
      stylesheet: {
        overrides: {
          'usp-box-border-radius': '0',
          'usp-radio-size': '1rem',
          'usp-radio-bg-color': 'white',
          'usp-radio-border-width': '1px',
          'usp-radio-border-color': '#D3D3D3',
          'usp-radio-inner-border-width': '2px',
          'usp-radio-inner-border-color': 'white',
          'usp-radio-selected-bg-color': 'black',
          'usp-radio-border-width-selected': '1px',
          'usp-radio-border-color-selected': '#D3D3D3',
          'usp-radio-inner-border-width-selected': '3px',
          'usp-radio-inner-border-color-selected': 'white',
          'usp-radio-border-width-focus': '1px',
          'usp-radio-border-color-focus': '#D3D3D3',
          'usp-radio-inner-border-width-focus': '3px',
          'usp-radio-inner-border-color-focus': 'white'
        }
      }
    }
  });

  await widget.mount('widget-payment-primary');
}

<div class="main">
  <div id="widget-payment-primary" bind:this={widgetPaymentContainer} />
</div>