Stripe Checkout: pago web y móvil de forma sencilla

Si incursiona en el comercio electrónico y aún no ha probado Stripe , entonces está perdiendo una de las formas más fáciles de recibir pagos en línea . Stripe se encarga del proceso de pago sin la necesidad de una codificación compleja . Una espalda mientras, raya lanzado una nueva forma de pago marca: Pedido . Tiene integración con stripe.js y funciona bien tanto en navegadores móviles como de escritorio.

Checkout permite a los usuarios finalizar fácilmente su pago sin tener que abandonar la página en la que se encuentran. Los usuarios también pueden optar por guardar los datos de su tarjeta de crédito ingresando un código SMS enviado a su teléfono . Esta función también se puede integrar y Checkout resuelve eficazmente los problemas relacionados con los pagos móviles.

Resumen de pago

El formulario de pago es fácil de integrar en un sitio. Simplemente inserte este fragmento donde desee que aparezca el botón de pago:

1
2
3
4
5
6
7
8
9
10
<form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    data-image="/square-image.jpg"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-amount="2000">
  </script>
</form>

En la fuente, déjelo para vincular desde el servidor de Checkout para que el formulario se actualice automáticamente cuando haya cambios. Puede cambiar el logotipo y el texto mediante Checkout con su propia marca o diseño. Los datos apropiados son data-namey data-image.

Este script predeterminado da como resultado el siguiente botón:

Para cambiar el nombre del botón, simplemente agréguelo data-panel-labelal script y asigne un nombre a su botón. Para obtener más documentación de opciones, diríjase a esta página .

Cuando se hace clic en el botón, aparecerá una ventana que muestra los formularios para completar el pago.

Como se indicó, Checkout ofrece una función opcional para guardar la información de la tarjeta de crédito con un código SMS. Los usuarios solo necesitan ingresar su número de teléfono y cuando necesite realizar otro pago, simplemente ingrese el código enviado.

Personalizando el formulario

También hay una integración de formulario personalizado que se puede utilizar con cualquier elemento HTML o evento JavaScript. Echemos un vistazo rápido al siguiente fragmento extraído del documento de integración personalizado :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
<script src="https://checkout.stripe.com/checkout.js"></script>
 
<button id="customButton">Purchase</button>
 
<script>
  var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    image: '/square-image.jpg',
    token: function(token, args) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with `token.id`
    }
  });
 
  document.getElementById('customButton').addEventListener('click', function(e) {
    // Open Checkout with further options
    handler.open({
      name: 'Demo Site',
      description: '2 widgets ($20.00)',
      amount: 2000
    });
    e.preventDefault();
  });
</script>

En lugar de trabajar con data-atributos como el fragmento anterior, este formulario personalizado utiliza JavaScript para trabajar. StripeCheckout.configure()es el objeto controlador cuando se carga la página. Y la opción se puede pasar dentro de open()o configure().

Deja un comentario

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