Google AMP amp-acceso-pago posterior

Posted on by Rudeus Greyrat

 

A muchos editores les gustaría agregar una plataforma de infraestructura de pago fácil a su sitio web, y la etiqueta amp-access-laterpay es solo para este propósito. Ayuda al editor a integrar fácilmente una plataforma de pago en su página web. Utiliza AMP Access y LaterPay para hacerlo.

Configuración: para usar la etiqueta amp-access-laterpay, debe agregar ciertas secuencias de comandos y estilo en la etiqueta principal.

  • Primero, debe importar el componente amp-access .

HTML

<script async custom-element="amp-access" src=
    "https://cdn.ampproject.org/v0/amp-access-0.1.js">
</script>
  • Además, debe importar amp-analytics .

HTML

<script async custom-element="amp-analytics" src=
    "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
  • Y luego importe el componente amp-access-laterpay .

HTML

<script async custom-element="amp-access-laterpay" src=
    "https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js">
</script>
  • Y, por último, agregue la configuración que especifica el proveedor y la configuración específica del proveedor para amp-access .

HTML

<script id="amp-access" type="application/json">
{
  "vendor": "laterpay",
  "laterpay": {
    "articleTitleSelector": ".preview > h3",
    "sandbox": true
  }
}
</script>

 

Controlar la visibilidad: Es muy importante decidir qué verá y qué no verá el usuario, si es un usuario válido y, en caso contrario, qué mensaje se debe mostrar.

 

Para configurar una sección de vista previa, use el siguiente código. Este código establece una división de vista previa que es visible para todos los visitantes.

HTML

<section class="preview">
    <h3>GeeksForGeeks</h3>
     
<p>
        GeeksforGeeks is a Computer
        Science portal for geeks. It
        contains well written, well
        thought and well explained
        computer science and programming
        articles, quizzes etc.
    </p>
 
</section>

 

Si desea establecer un control de seguridad cuando el usuario intente ingresar con credenciales FALSAS, use este código.

HTML

<section amp-access="NOT error AND NOT access" amp-access-hide>
</section>

 

Si tiene que hacer algo de estilo, use la identificación y la clase que se mencionan a continuación, ya que están predefinidas.

HTML

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

 

Si hay algún tipo de error y desea mostrarlo, use el código mencionado a continuación.

HTML

<section amp-access="error" amp-access-hide>
    Oops... Something broke. Please try Again!!
</section>
  • Si las credenciales de acceso son correctas, puede usar este código para mostrar la sección oculta. Si el valor se evalúa como verdadero, entonces se muestra.

HTML

<div amp-access="access" amp-access-hide>
    GeeksforGeeks is a Computer Science
    portal for geeks. It contains well
    written, well thought and well
    explained computer science and
    programming articles, quizzes etc.
 
    GeeksforGeeks is a Computer Science
    portal for geeks. It contains well
    written, well thought and well
    explained computer science and
    programming articles, quizzes etc.
</div>

Ejemplo:

HTML

<!doctype html>
<html amp>
 
<head>
    <meta charset="utf-8">
    <link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-3d-gltf/index.html">
 
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
 
    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>
     
    <title>Google AMP amp-access-laterpay</title>
 
    <!-- Import the `amp-access` component
        in the header. -->
    <script async custom-element="amp-access"
src="https://cdn.ampproject.org/v0/amp-access-0.1.js">
    </script>
 
    <!-- `amp-access` requires `amp-analytics`
        to be imported as well. -->
    <script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
    </script>
 
    <!-- And of course the `amp-access-laterpay`
        component. -->
    <script async custom-element="amp-access-laterpay"
src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js">
    </script>
 
    <!-- Add the configuration which specifies
        the vendor, and vendor specific
        configuration for `amp-access` -->
    <script id="amp-access" type="application/json">
    {
        "vendor": "laterpay",
        "laterpay": {
            "articleTitleSelector": ".preview > h3",
            "sandbox": true
        }
    }
    </script>
 
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s
                steps(1, end) 0s 1 normal both;
 
            -moz-animation: -amp-start 8s
                steps(1, end) 0s 1 normal both;
 
            -ms-animation: -amp-start 8s
                steps(1, end) 0s 1 normal both;
 
            animation: -amp-start 8s
                steps(1, end) 0s 1 normal both;
        }
 
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
    </style>
 
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
 
    <style amp-custom>
        h1,
        h3 {
            color: green;
        }
        h1 {
            text-align: center;
        }
 
        p {
            color: red;
        }
    </style>
</head>
 
<body>
    <h1>
        Geeks For Geeks
    </h1>
 
    <!-- This section is visible to all
        users. No special markup is
        needed in this case.-->
    <section class="preview">
        <h3>The Article</h3>
         
<p>
            GeeksforGeeks is a Computer
            Science portal for geeks. It
            contains well written, well
            thought and well explained
            computer science and programming
            articles, quizzes etc.
        </p>
 
    </section>
 
    <section amp-access="NOT error AND NOT access"
            amp-access-hide>
        <div id="amp-access-laterpay-dialog"
            class="amp-access-laterpay">
        </div>
    </section>
 
    <section amp-access="error" amp-access-hide>
        Oops... Something broke.
    </section>
 
    <div amp-access="access" amp-access-hide>
        GeeksforGeeks is a Computer Science portal
        for geeks. It contains well  written, well
        thought and well explained computer science
        and programming articles, quizzes etc.
 
        GeeksforGeeks is a Computer Science portal
        for geeks. It contains well written, well
        thought and well explained computer science
        and programming articles, quizzes etc.
    </div>
</body>
 
</html>

Producción:

Este es el contenido de vista previa que se muestra…

Publicación traducida automáticamente

Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *