Paypal new payment smart buttons not working ( Dawn theme )

[TheSooqiBh]

I am trying to add smart buttons ( which includes paypal golden button and credit card black button that opens the form), but all tutorials are displaying how to do it the old way. I have tried to add the following code in the main-product.liquid

<script src="https://www.paypal.com/sdk/js?client-id=client-id&components=hosted-buttons&disable-funding=venmo&currency=USD"></script>
<div id="paypal-container-ID"></div>
<script>
  paypal.HostedButtons({
    hostedButtonId: "ID",
  }).render("#paypal-container-ID")
</script>

but the buttons doesn't show up and there is an error generated in the console as follows 

Uncaught ReferenceError: paypal is not defined
    at live-your-life-mens-hoodie:13973:5

what is the solution for this please.


Note, here is the code of the main-product.liquid page 

<section
  id="MainProduct-{{ section.id }}"
  class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}"
  data-section="{{ section.id }}"
>
  {{ 'section-main-product.css' | asset_url | stylesheet_tag }}
  {{ 'component-accordion.css' | asset_url | stylesheet_tag }}
  {{ 'component-price.css' | asset_url | stylesheet_tag }}
  {{ 'component-slider.css' | asset_url | stylesheet_tag }}
  {{ 'component-rating.css' | asset_url | stylesheet_tag }}
  {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
  {% unless product.has_only_default_variant %}
    {{ 'component-product-variant-picker.css' | asset_url | stylesheet_tag }}
    {{ 'component-swatch-input.css' | asset_url | stylesheet_tag }}
    {{ 'component-swatch.css' | asset_url | stylesheet_tag }}
  {% endunless %}
  {%- if product.quantity_price_breaks_configured? -%}
    {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
  {%- endif -%}

  {%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }
  {%- endstyle -%}

  <script src="{{ 'product-info.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
  {%- if product.quantity_price_breaks_configured? -%}
    <script src="{{ 'show-more.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
  {%- endif -%}

  {% if section.settings.image_zoom == 'hover' %}
    <script id="EnableZoomOnHover-main" src="{{ 'magnify.js' | asset_url }}" defer="defer"></script>
  {% endif %}
  {%- if request.design_mode -%}
    <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
  {%- endif -%}

  {%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}
  {%- if first_3d_model -%}
    {{ 'component-product-model.css' | asset_url | stylesheet_tag }}
    <link
      id="ModelViewerStyle"
      rel="stylesheet"
      href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css"
      media="print"
      onload="this.media='all'"
    >
    <link
      id="ModelViewerOverride"
      rel="stylesheet"
      href="{{ 'component-model-viewer-ui.css' | asset_url }}"
      media="print"
      onload="this.media='all'"
    >
  {%- endif -%}

  <script
    async
    src="https://www.paypal.com/sdk/js?client-id=client-id&components=hosted-buttons&disable-funding=venmo&currency=USD"
  ></script>
  <div id="paypal-container-ID"></div>
  <script>
    paypal.HostedButtons({
      hostedButtonId: "ID",
    }).render("#paypal-container-ID")
  </script>
.....