# Cómo usar el overlay de checkoutpage.co

**URL:** <https://meta.discourse.org/t/how-to-use-checkoutpage-co-overlay/136268>\
**Category:** Support\
**Created:** [17 Diciembre, 2019 01:38 UTC](https://meta.discourse.org/t/how-to-use-checkoutpage-co-overlay/136268 "2019-12-17T01:38:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![FrancoisD](https://avatars.discourse-cdn.com/v4/letter/f/51bf81/32.png) [@FrancoisD](https://meta.discourse.org/u/FrancoisD)\
**Post date:** [17 Diciembre, 2019 01:38 UTC](https://meta.discourse.org/t/how-to-use-checkoutpage-co-overlay/136268/1 "2019-12-17T01:38:51Z")

</div>

Quiero usar el overlay de [checkoutpage.co](http://checkoutpage.co) de la siguiente manera:

[https://checkoutpage.co/knowledge/sell-your-products-in-a-modal-on-your-site/](https://checkoutpage.co/knowledge/sell-your-products-in-a-modal-on-your-site/)

En mi página específica, indica usar este código:

```
<script type="text/javascript" src="https://checkoutpage.co/js/overlay.js" defer></script>

```

Después, agrega esto (quiero añadirlo en un tema):

```
<button class="cp-button" data-seller="5dd5bbcd1954eb0015e6ff53" data-checkout="rencontre-dans-les-laurentides">Comprar ahora</button>

```

¿Es posible hacerlo dentro de Discourse?

Gracias

---

<div class="post-metadata">

**Author:** ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)\
**Post date:** [17 Diciembre, 2019 10:29 UTC](https://meta.discourse.org/t/how-to-use-checkoutpage-co-overlay/136268/2 "2019-12-17T10:29:33Z")

</div>

Creo que necesitarás crear un componente de tema que te permita agregar el código a un tema. Busca “tema #howto”.

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [18 Diciembre, 2019 09:03 UTC](https://meta.discourse.org/t/how-to-use-checkoutpage-co-overlay/136268/3 "2019-12-18T09:03:04Z")

</div>

He hecho algunas pruebas con esto y he creado un componente de tema porque veo mucho potencial.

> **[GitHub - hnb-ku/discourse-checkout](https://github.com/hnb-ku/discourse-checkout)**
>
> Contribute to hnb-ku/discourse-checkout development by creating an account on GitHub.

Una vez instalado, podrás usar algo como esto en tus publicaciones y se convertirá automáticamente en un botón.

`[wrap=checkout data-seller=5aaa701149321a00145c99b9 data-checkout=ux-animation-tool-license]texto del botón[/wrap]`

Al hacer clic en ese botón, se mostrará el modal basado en la información que agregues, como el ID del vendedor y los datos de pago.

He creado una demostración en Theme Creator:

[https://theme-creator.discourse.org/theme/Johani/discourse-checkout](https://theme-creator.discourse.org/theme/Johani/discourse-checkout)

Todo parece estar funcionando de nuestro lado, pero aún no he comprado nada ya que no había usado checkout-page antes. ¿Podrías probarlo realmente, @FrancoisD? Te gusta comprar y vender cosas, así que por favor pruébalo y cuéntanos cómo te fue.

Una vez que confirmemos que todo funciona, moveré esto a la categoría de temas.

También dejé algunos comentarios en el código para explicar cómo se construyó.

---

<div class="post-metadata">

**Author:** ![FrancoisD](https://avatars.discourse-cdn.com/v4/letter/f/51bf81/32.png) [@FrancoisD](https://meta.discourse.org/u/FrancoisD)\
**Post date:** [6 Enero, 2020 00:01 UTC](https://meta.discourse.org/t/how-to-use-checkoutpage-co-overlay/136268/4 "2020-01-06T00:01:48Z")

</div>

¡Lo siento @Johani, estuve fuera durante las vacaciones!

Es perfecto, muchas gracias por tu tiempo.

---

<div class="post-metadata">

**Author:** ![FrancoisD](https://avatars.discourse-cdn.com/v4/letter/f/51bf81/32.png) [@FrancoisD](https://meta.discourse.org/u/FrancoisD)\
**Post date:** [9 Enero, 2020 23:43 UTC](https://meta.discourse.org/t/how-to-use-checkoutpage-co-overlay/136268/5 "2020-01-09T23:43:26Z")

</div>

¡Hola @Johani! ¿Tuviste tiempo de convertirlo en un tema? 🙂

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [8 Febrero, 2020 23:43 UTC](https://meta.discourse.org/t/how-to-use-checkoutpage-co-overlay/136268/6 "2020-02-08T23:43:29Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.