AMP

amp-access-laterpay

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.

Zorunlu Komut Dosyaları"amp-access-laterpay", "amp-access" ve "amp-analytics" ile ilgili komut dosyalarına ihtiyacınız olacaktır.
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js">
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js">
ÖrneklerÖrneklerle AMP ek açıklamalı amp-access-laterpay örneğine bakın.

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:

MülkDeğerlerAçıklama
articleTitleSelectorCSS seçici gerekirSayfada, ürünün başlığını içeren öğeyi belirleyen bir CSS seçici. Bu, ürünün satın alınması için sunulan sayfanın, kullanıcının ne satın almakta olduğunun farkında olması için bu başlığı içermesini sağlar.
articleIdVirgülle ayrılmış tanımlayıcı listesiVarsayılan olarak, bir ürünü bir satın alma seçeneğiyle eşleştirmek için ürünün URL'si kullanılır; ancak, satın alma seçeneği için bir URL yolu belirtmek yerine LaterPay Connector kullanıcı arayüzünde bir Ürün Kimliği ayarlayabilir ve daha sonra, ürünü satın alma seçeneğiyle eşleştirmek için articleId özelliğini kullanabilirsiniz.
Bir satın alma seçeneğini bir ürünün URL'sine göre eşleştirmenin yeterince esneklik sağlamadığı durumlarda bunun yapılması gerekir. Bu yöntemin faydalı olduğu bazı örnek senaryolar hakkında bilgi almak için LaterPay Connector() yapılandırma sayfasına bakın.
jwtDinamik ödeme yapılandırması için JWT jetonuBu seçenek, kullanılabilir ücretli içerik için bir yapılandırma ile imzalı bir JSON Web Jetonu belirtmenize olanak tanır. Bu, yapılandırmayı LaterPay Connector Yönetici arayüzünde manuel olarak belirtmek yerine, sayfalarınızda programlı olarak oluşturulan bir sayfa içi yapılandırma sağlayabileceğiniz anlamına gelir. Bu, özellikle çok sayıda farklı ürün için Tek Satın Alma işlemleri yapılandırırken yararlı olabilir.
Bu jetonu nasıl oluşturacağınız ve içinde hangi içeriğin belirtilebileceği hakkında daha fazla bilgi isterseniz lütfen Connector Script entegrasyonuyla ilgili LaterPay JWT Ücretli İçerik API'si dokümanlarına bakın.
localedizeYerel ayar için uygun fiyat biçimlendirmesi stilini tanımlar.
localeMessagesnesneYayıncının, oluşturulan satın alma seçenekleri listesinde yer alan metni özelleştirmesine veya yerelleştirmesine olanak tanır. Daha fazla bilgi için Yerelleştirme bölümünü inceleyin.
scrollToTopAfterAuthbooleTrue (doğru) değerine ayarlanırsa yetkilendirme işlemi başarılı olduktan sonra sayfayı en başa kaydırır. İletişim kutusunu gösterdiğiniz yer sayfada oldukça aşağıdaysa ve kullanıcının sayfaya döndükten sonra geçerli kaydırma konumundan kafası karışabilecekse bu özelliğin kullanılması yararlı olabilir.
regiondizeeu veya us LaterPay bölgesindeyseniz belirtin.
sandboxbooleYalnızca sunucu yapılandırmanızı test etmek için korumalı alan modunu kullanıyorsanız gereklidir. AMP'nin geliştirme modunu kullanmanız da gerekir.

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.

AnahtarAçıklamaVarsayılan değer
payLaterButtonDaha sonra ödeme yapılabilecek seçenekler için satın alma düğmesinde gösterilen metin."Buy Now, Pay Later"
payNowButtonSatın alma sırasında ödenmesi gereken seçenekler için satın alma düğmesinde gösterilen metin."Buy Now"
defaultButtonHerhangi bir seçenek belirlenmeden önce satın alma düğmesinde gösterilen varsayılan metin."Buy Now"
alreadyPurchasedLinkKullanıcı ürünü geçmişte satın aldıysa ancak çerezlerini kaybettiyse (veya farklı bir cihazdaysa) LaterPay'e giriş yapmak ve satın alma işlemlerini almak için bu bağlantıyı kullanabilir."I already bought this"
headerİsteğe bağlı üstbilgi metni.
footerİsteğe bağlı altbilgi metni.

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

Doğrulama

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

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub