amp-access-laterpay

0.2 0.1

<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js"></script>

<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.1.js"></script>

Yayıncıların LaterPay mikro ödeme platformuna kolayca entegre olmasına olanak tanır. amp-access-laterpay bileşeni AMP Access'i temel alır ve gerektirir.

Davranış

LaterPay, kullanıcıların herhangi bir dijital içeriği önceden kayıt olmadan, kişisel veri sağlamadan veya ödeme yapmadan, sadece iki tıklama ile satın alıp anında erişim sağlamasına olanak tanıyan bir mikro ödeme platformudur. Kullanıcılar yalnızca web sitelerinden yaptıkları toplam alışveriş 5 $ veya 5 € tutarına ulaştığında ödeme yapar. İçerik sağlayıcılar, tek tek öğeler veya süreli pasolar satıp içeriklerine sabit ücretli ya da süre sınırlamalı erişime olanak tanıyabilirler.

LaterPay'i Connector Script entegrasyonu aracılığıyla entegre ediyorsanız bu entegrasyonu AMP sayfalarında kullanamazsınız. amp-access-laterpay, sağladığı benzer özelliklerle Connector Script'i andırır ancak AMP sayfaları için tasarlanmıştır.

Ayrıca, tek entegrasyon yöntemi olarak amp-access-laterpay bileşenini kullanarak LaterPay aracılığıyla içerik satmak da mümkündür.

amp-access-laterpay bileşeni, AMP Access'e benzer ancak LaterPay hizmetiyle kullanıma uyarlanmış bir davranış sağlamak için dahili olarak AMP Access'i kullanır.

AMP Access ile kullanmak istediğiniz kendinize ait bir ödeme duvarına sahipseniz ve bu ödeme duvarını, aynı sayfada LaterPay ile birlikte kullanmak istiyorsanız bunu yapmanız da mümkündür.

amp-access-laterpay bileşeni LaterPay hizmetiyle çalışmak üzere önceden yapılandırılmış olduğundan yetkilendirme veya geriye pingleme yapılandırması gerektirmez. Ayrıca, giriş bağlantılarının manuel kurulumunu da gerektirmez.

Yayıncının LaterPay hesabında farklı satın alma seçenekleri yapılandırılabilir ve bileşen, yapılandırmayı alıp kullanılabilir satın alma seçeneklerinin bir listesini oluşturur.

Satın alma seçeneklerini nasıl yapılandıracağınızı öğrenmek için LaterPay'in mevcut kullanıcı arabirimi entegrasyonu olan LaterPay Connector'ın yapılandırılmasıyla ilgili dokümanlara bakabilirsiniz.

Oluşturulan liste, yayıncının tercihine göre şekillendirilip sunulabilir.

Bu bileşen, içeriği göstermek ve gizlemek için Access İçerik İşaretlemesi de kullanır.

Yapılandırma

Yapılandırma, AMP Access'e benzer ancak yetkilendirme, geriye pingleme ve giriş bağlantıları gerektirmez.

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "property": value
      }
    }
</script>

laterpay yapılandırma nesnesinde aşağıdaki değerler ayarlanabilir:

Access İçerik İşaretlemesi'ni kullanma ve satın alma listesini gösterme

Access İçerik İşaretlemesi, AMP Access ile aynı şekilde kullanılmalıdır.

Kullanıcının ürüne erişimi olmadığında, amp-access-laterpay-dialog kimliğine sahip öğe satın alma seçeneklerinin yer aldığı bir listeyi oluşturur. Bu liste son derece basit bir stile sahiptir ve yayıncının sayfasına daha entegre görünmesi için özelleştirilebilir.

Varsayılan stili kullanmak istiyorsanız amp-access-laterpay sınıfını eklediğinizden emin olun.

<section amp-access="NOT error AND NOT access" amp-access-hide="">
  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>

<section class="error-section" amp-access="error" amp-access-hide="">
  Oops... Something broke.
</section>

<div amp-access="access" amp-access-hide="">
  <p>...article content...</p>
</div>

Stil

Oluşturulan işaretlemedeki bazı öğelere birden çok sınıf uygulanır. Sınıf içermeyen öğelere, CSS öğe seçicileri aracılığıyla açık bir biçimde başvurulabilir.

Bazı temel CSS düzenleri zaten vardır ancak yayıncıların, sayfalarının görünüm ve tarzıyla uyumlu hale getirmek için bunları şekillendirmeleri önerilir.

İletişim kutusu için oluşturulan yapı şöyle görünür:

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay">
  <div class="amp-access-laterpay-container">
    <p class="amp-access-laterpay-header">
      Optional, appears if header locale message is defined.
    </p>
    <ul>
      <li>
        <label>
          <input name="purchaseOption" type="radio">
            <div class="amp-access-laterpay-metadata">
              <span class="amp-access-laterpay-title">Purchase option title</span>
              <p class="amp-access-laterpay-description">Purchase option description</p>
            </div>
          </label>
          <p class="amp-access-laterpay-price-container">
            <span class="amp-access-laterpay-price">0.15</span>
            <sup class="amp-access-laterpay-currency">USD</sup>
          </p>
        </li>
        <!-- ... more list items for other purchase options ... -->
      </ul>
      <button class="amp-access-laterpay-purchase-button">Şimdi Satın Al</button>
      <p class="amp-access-laterpay-already-purchased-container">
        <a href="...">I already bought this</a>
      </p>
      <p class="amp-access-laterpay-footer">
        Optional, appears if footer locale message is defined.
      </p>
    </div>
    <p class="amp-access-laterpay-badge">Powered by <a href="https://laterpay.net" target="_blank">LaterPay</a></p>
  </div>

Yerelleştirme

İletişim kutusunda satın alma seçenekleri için gösterilen metin, LaterPay Connector kullanıcı arayüzünde yayıncı tarafından tanımlanır.

Kalan metin, genişletilmiş bileşenin bir parçasıdır ve yapılandırma seçenekleri aracılığıyla aşağıdaki gibi değiştirilebilir ve yerelleştirilebilir:

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "localeMessages": {
        "messageKey": "message value"
        }
      }
    }
</script>

Aşağıdaki mesaj anahtarları çevrilebilir veya özelleştirilebilir ancak orijinal anlamlarını ve amaçlarını korumaları gerektiğini unutmayın.

Analiz

amp-access bileşenine dayandığı göz önünde bulundurulduğunda, amp-access-laterpay, amp-access tarafından gönderilen tüm analiz etkinliklerini destekler.

Uygulamada bunun nasıl görüneceğine dair daha eksiksiz bir örnek görmek isterseniz https://ampexample.laterpay.net/ adresindeki örneklerin tamamı, bu analiz etkinliklerini göndermek üzere yapılandırılmıştır.

AMP Access LaterPay'i AMP Access ile birlikte kullanma

Mevcut bir abonelik sisteminiz varsa ve LaterPay'i yalnızca tek tek ürün satışı için kullanmayı amaçlıyorsanız AMP Access ve AMP Access LaterPay'i birlikte kullanılmasıyla her iki satış yönteminin de aynı sayfada bir arada bulunması mümkündür.

Öncelikle AMP Access'i mevcut ödeme duvarınızla nasıl yapılandıracağınızı öğrenmek için lütfen AMP Access dokümanlarına bakın.

Birden fazla sağlayıcı bölümünde, birden fazla sağlayıcının ad alanlarıyla nasıl ayarlanacağı açıklanmaktadır.

Bunu LaterPay ve mevcut bir ödeme duvarı entegrasyonu ile kullanırken gerekli yapılandırma aşağıdaki gibi görünebilir:

<script id="amp-access" type="application/json">
  [
    {
      "vendor": "laterpay",
      "laterpay": {
        "region": "us"
      },
      "namespace": "laterpay"
    },
    {
      "authorization":
          "https://pub.com/amp-access?rid=READER_ID&url=SOURCE_URL",
      "pingback":
          "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL",
      "login":
          "https://pub.com/amp-login?rid=READER_ID&url=SOURCE_URL",
      "authorizationFallbackResponse": {"error": true},
      "namespace": "publishername"
    }
  ]
</script>

İçerik erişimi işaretlemesi ise şu şekilde görünebilir:

<section amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access" amp-access-hide>
  <p>
    <a on="tap:amp-access.login-publishername">Login here to access your PublisherName subscription.</a>
  </p>

  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>

<section class="error-section" amp-access="error" amp-access-hide>
  Oops... Something broke.
</section>

<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
  <p>...article content...</p>
</div>

Daha eksiksiz bir örneği https://ampexample.laterpay.net/dual-amp-access.html adresinde bulabilirsiniz.

İlgili Dokümanlar

• AMP Access
• LaterPay
• LaterPay: Mikro Ödemeleri nasıl yapıyoruz?
• LaterPay Connector - AMP Access LaterPay'e benzer ancak AMP olmayan sayfalar için.

Doğrulama

AMP doğrulayıcı spesifikasyonundaki amp-access-laterpay kurallarına bakın.