To display the loyalty points of the product you can use the following dynamic HTML of ONe anywhere on product page:

<div v-if="$one.utils.isB2B">
  <template v-for="attribute in $attrs.product.attributes" :key="attribute.nameCode">
    <div v-if="attribute.nameCode === 'loyality_base_point' && attribute.value > 0" class="bg-white text-dark container-fluid rounded-xl  my-2">
      <div class="row align-items-center loyalty_container">
        
        <!-- Pontok -->
        <div class="col-2 d-flex align-items-center">
      	  <div class="loyalty_credit">
            <img src="https://static.yourtenant.com/cms/youricon.png" class="mr-2">
            {{ attribute.value }}
          </div>
          <div>
            Loyalty program<br>
            point base
          </div>
        </div>
        
        <!-- >> -->
        <div class="col-1 d-flex align-items-center">
          <img src="https://static.yourtenant.com/cms/youricon.png" class="mx-auto">
        </div>
        
        <!-- 2. col -->
        <div class="col-2 d-flex align-items-center">
      	  <div class="loyalty_icon">
            <img src="https://static.yourtenant.com/cms/youricon.png" class="mr-2">
          </div>
          <div>
            After invoicing<br>
            we'll credit your points
          </div>
        </div>
        
        <!-- >> -->
        <div class="col-1 d-flex align-items-center">
          <img src="https://static.yourtenant.com/cms/youricon.png" class="mx-auto">
        </div>
        
        <!-- 3. col -->
        <div class="col-2 d-flex align-items-center">
      	  <div class="loyalty_icon">
            <img src="https://static.yourtenant.com/cms/youricon.png" class="mr-2">
          </div>
          <div>
            Depending on our campaigns<br>
            you can earn more loyalty points than base
          </div>
        </div>
        
        <!-- >> -->
        <div class="col-1 d-flex align-items-center">
          <img src="https://static.yourtenant.com/cms/youricon.png" class="mx-auto">
        </div>
        
        <!-- 4. col -->
        <div class="col-3 d-flex align-items-center">
      	  <div class="loyalty_icon">
            <img src="https://static.yourtenant.com/cms/youricon.png" class="mr-2">
          </div>
          <div>
            You can use your loyalty credit<br>
            to redeem coupon codes<br>
            can be used in cart as discounts
          </div>
        </div>
        
      </div>
    </div>
  </template>
</div>

To add some design you can use the following CSS:

// Loyalty program
.loyalty_credit {
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    background: #08599a;
    margin-right: 8px;
}

.rounded-xl {
    border-radius: 1rem !important;
}

.shadow {
    box-shadow: 1px 2px 0.5rem rgba(0, 0, 0, 0.1) !important;
}

.loyalty_container {
    line-height: 1.25;
    padding: 0.5rem 1rem;
}