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>

Memungkinkan penayang untuk berintegrasi lebih mudah dengan platform pembayaran mikro LaterPay. amp-access-laterpay didasarkan pada, dan memerlukan AMP Access.

Perilaku

LaterPay adalah platform pembayaran mikro yang memungkinkan pengguna membeli konten online apa pun hanya dengan dua klik, dan mendapatkan akses langsung – tanpa pembayaran, data pribadi, atau pendaftaran di muka. Pengguna hanya membayar setelah pembelian mereka mencapai total $5 atau €5 di berbagai situs. Penyedia konten dapat menjual item tertentu atau akses berkala, yang memungkinkan akses tarif tetap atau akses berbatas waktu ke konten.

Jika mengintegrasikan LaterPay melalui integrasi Skrip Konektor, Anda tidak akan dapat menggunakan integrasi tersebut di halaman AMP. Sama seperti Skrip Konektor, amp-access-laterpay menyediakan kumpulan fitur serupa tetapi dibuat untuk halaman AMP.

Ada juga kemungkinan untuk menjual konten melalui LaterPay hanya dengan menggunakan amp-access-laterpay sebagai satu-satunya metode integrasi.

Komponen amp-access-laterpay menggunakan AMP Access secara internal untuk memberikan perilaku yang mirip dengan AMP Access, tetapi disesuaikan untuk penggunaan dengan layanan LaterPay.

Jika Anda memiliki layanan paywall sendiri yang ingin Anda gunakan dengan AMP Access, dan Anda ingin menggunakannya bersama dengan LaterPay di halaman yang sama, hal itu juga dapat dilakukan.

Komponen amp-access-laterpay tidak memerlukan konfigurasi pingback atau otorisasi, karena telah dikonfigurasi sebelumnya untuk berfungsi dengan layanan LaterPay. Komponen ini juga tidak memerlukan penyiapan link login secara manual.

Opsi pembelian yang berbeda dapat dikonfigurasi di akun LaterPay penayang, dan komponen akan mengambil konfigurasi serta membuat daftar opsi pembelian yang tersedia.

Anda dapat membaca dokumentasi tentang cara mengonfigurasi Konektor LaterPay, integrasi front-end LaterPay yang ada, untuk mempelajari cara mengonfigurasi opsi pembelian.

Daftar yang dihasilkan dapat diberi gaya dan ditampilkan sesuai dengan preferensi penayang.

Komponen ini juga mengandalkan Markup Konten Akses untuk menampilkan dan menyembunyikan konten.

Konfigurasi

Konfigurasi mirip dengan AMP Access, tetapi tanpa memerlukan otorisasi, pingback, dan link login.

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

Nilai berikut dapat ditetapkan dalam objek konfigurasi laterpay:

Menggunakan Markup Konten Akses dan menampilkan daftar pembelian

Markup Konten Akses harus digunakan dengan cara yang sama seperti AMP Access.

Elemen dengan ID amp-access-laterpay-dialog akan merender daftar opsi pembelian jika pengguna tidak memiliki akses ke artikel. Daftar ini memiliki penataan gaya yang sangat dasar dan dapat disesuaikan agar lebih terintegrasi di halaman penayang.

Pastikan Anda menambahkan class amp-access-laterpay jika ingin menggunakan penataan gaya default.

<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>

Penataan gaya

Beberapa class diterapkan pada beberapa elemen dalam markup yang dihasilkan. Elemen yang tidak memiliki class dapat dirujuk dengan jelas melalui pemilih elemen CSS.

Beberapa CSS tata letak dasar sudah tersedia, tetapi sebaiknya penayang menata gayanya agar cocok dengan tampilan dan nuansa halamannya.

Struktur yang dibuat untuk dialog terlihat seperti berikut:

<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">Beli Sekarang</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>

Pelokalan

Teks yang ditampilkan dalam dialog untuk opsi pembelian akan ditentukan oleh penayang di UI Konektor LaterPay.

Teks lainnya adalah bagian dari komponen yang diperluas dan dapat diubah serta dilokalkan melalui opsi konfigurasi sebagai berikut:

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

Kunci pesan berikut dapat diterjemahkan atau disesuaikan, tetapi perhatikan bahwa kunci pesan tersebut harus mempertahankan makna dan maksud aslinya.

Analisis

Karena didasarkan pada amp-access, amp-access-laterpay mendukung semua peristiwa analisis yang dikirim oleh amp-access.

Semua contoh di https://ampexample.laterpay.net/ dikonfigurasi untuk mengirimkan peristiwa analisis ini jika Anda ingin melihat contoh lengkap penggunaan sebenarnya.

Menggunakan LaterPay AMP Access bersama dengan AMP Access

Jika sudah memiliki sistem langganan dan ingin menggunakan LaterPay hanya untuk penjualan artikel tertentu, Anda dapat menerapkan kedua metode penjualan di halaman yang sama, menggunakan AMP Access dan LaterPay AMP Access bersama.

Pertama-tama, pelajari dokumentasi AMP Access untuk mengetahui cara mengonfigurasi AMP Access dengan paywall yang ada.

Bagian banyak penyedia menjelaskan cara menyiapkan banyak penyedia dengan namespace.

Saat menggunakannya dengan LaterPay dan integrasi paywall yang ada, konfigurasi yang diperlukan dapat terlihat seperti ini:

<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>

Sedangkan markup akses konten dapat terlihat seperti ini:

<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>

Anda dapat menemukan contoh yang lebih lengkap di https://ampexample.laterpay.net/dual-amp-access.html

Dokumentasi Terkait

• AMP Access
• LaterPay
• LaterPay: Cara kami menjalankan Pembayaran Mikro
• Konektor LaterPay - Mirip dengan AMP Access LaterPay tetapi untuk halaman non-AMP.

Validasi

Lihat aturan amp-access-laterpay dalam spesifikasi validator AMP.