AMP

amp-access-laterpay

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

Skrip yang Diperlukan Perhatikan bahwa Anda memerlukan skrip untuk "amp-access-laterpay", "amp-access", dan "amp-analytics".
<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">
Contoh Lihat contoh amp-access-laterpay yang dianotasi di AMP By Example.

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:

Properti Nilai Deskripsi
articleTitleSelector Pemilih CSS diperlukan Pemilih CSS yang menentukan elemen di halaman yang memuat judul artikel. Properti ini memastikan halaman yang ditampilkan untuk pembelian artikel akan memuat judul ini sehingga pengguna mengetahui apa yang mereka beli.
articleId Daftar ID yang dipisahkan koma Secara default, URL artikel digunakan untuk mencocokkannya dengan opsi pembelian, tetapi bukannya menentukan jalur URL untuk opsi pembelian, Anda dapat menetapkan ID Artikel di UI Konektor LaterPay, dan kemudian menggunakan properti articleId untuk mencocokkan artikel dengan opsi pembelian.
Hal ini penting dalam kasus ketika pencocokan opsi pembelian menurut URL artikel dianggap tidak cukup fleksibel. Lihat halaman konfigurasi Konektor LaterPay() untuk melihat beberapa contoh skenario yang berguna.
jwt Token JWT untuk konfigurasi pembayaran dinamis Opsi ini memungkinkan Anda menentukan Token Web JSON yang ditandatangani dengan konfigurasi untuk konten berbayar yang tersedia. Ini artinya Anda dapat menyediakan suatu konfigurasi dalam halaman yang dibuat secara terprogram di halaman Anda, bukannya menentukannya secara manual pada antarmuka Admin Connector LaterPay. Hal ini dapat sangat berguna ketika mengonfigurasi Pembelian Tunggal untuk banyak artikel berbeda.
Jika Anda menginginkan informasi lebih lanjut tentang cara membuat token ini dan konten apa yang dapat ditentukan di dalamnya, silakan baca dokumentasi JWT Paid Content API LaterPay untuk integrasi Skrip Konektor.
locale string Menentukan gaya pemformatan harga yang sesuai untuk lokal tersebut.
localeMessages objek Memungkinkan penayang menyesuaikan atau melokalkan teks yang ada dalam daftar opsi pembelian yang dihasilkan. Lihat bagian Pelokalan untuk informasi lebih lanjut.
scrollToTopAfterAuth boolean Jika ditetapkan ke true, men-scroll halaman ke atas setelah proses otorisasi berhasil. Hal ini dapat membantu jika tempat Anda menampilkan dialog berada jauh di bawah halaman dan pengguna mungkin dibingungkan dengan posisi scroll mereka saat ini setelah kembali ke halaman.
region string Menentukan apakah Anda berada di wilayah LaterPay eu atau us.
sandbox boolean Hanya diperlukan jika Anda menggunakan mode sandbox untuk menguji konfigurasi server. Anda juga harus menggunakan mode pengembangan AMP.

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.

Kunci Deskripsi Nilai default
payLaterButton Teks yang ditampilkan di tombol beli untuk opsi yang dapat dibayar nanti. 'Buy Now, Pay Later'
payNowButton Teks yang ditampilkan di tombol beli untuk opsi yang harus dibayar pada saat pembelian. 'Buy Now'
defaultButton Teks default yang ditampilkan di tombol beli sebelum opsi apa pun dipilih. 'Buy Now'
alreadyPurchasedLink Jika pernah membeli artikel ini tetapi kehilangan cookie-nya (atau menggunakan perangkat lain), pengguna dapat menggunakan link ini untuk login ke LaterPay dan mengambil pembelian mereka. 'I already bought this'
header Teks header opsional.
footer Teks footer opsional.

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

Validasi

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

Perlu bantuan lainnya?

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