Ir a contenido
Crea una cuenta o inicia sesión
Logotipo de la documentación de Stripe
/
Crear cuentaIniciar sesión
ResumenAceptar un pagoActualiza tu integración
Pagos por Internet
ResumenEncuentra tu caso de usoUsa Managed PaymentsPagos recurrentes
Pagos en persona
Métodos de pago
Aspectos básicos de las operaciones de pago
Saldos y plazos de liquidaciónRecibosReembolsos y cancelaciones
Integraciones avanzadas
Más allá de los pagos

Accept a payment with KriyaVersión beta privada

Learn how to set up your integration with Kriya.

Usa el Payment Element para integrar un formulario de pago de Stripe personalizado en tu sitio web o aplicación y ofrecer métodos de pago a los clientes. Para obtener información sobre configuraciones y personalizaciones avanzadas, consulta la guía de integración Cómo aceptar pagos.

Determina la compatibilidad

Para aceptar pagos de Kriya, la sesión de Checkout debe cumplir con todas estas condiciones:

  • Los precios de todas la partidas individuales de la factura deben estar en la misma divisa.
  • Si tienes partidas individuales en otras divisas, crea sesiones de Checkout separadas para cada divisa.

Set up the server
Lado del servidor

Utiliza las bibliotecas oficiales de Stripe para acceder a la API desde tu aplicación.

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Create a Checkout Session
Lado del servidor

Añade a tu servidor un punto de conexión que cree una sesión de Checkout y devuelve el secreto de cliente a tu front end. Una sesión de Checkout representa la sesión de tu cliente mientras paga por compras o suscripciones únicas. Las sesiones de Checkout caducan a las 24 horas de crearse.

We recommend using dynamic payment methods to dynamically display the most relevant eligible payment methods to each customer to maximize conversion. You can also manually list payment methods, which disables dynamic payment methods.

server.ts
TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'gbp',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Configura el front end
Lado del cliente

Incluye el script de Stripe.js en tu página del proceso de compra añadiéndolo al head de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia tú mismo.

Make sure you’re on the latest Stripe.js version by including the following script tag <script src=“https://js.stripe.com/clover/stripe.js”></script>. Learn more about Stripe.js versioning.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

Nota

Stripe proporciona un paquete npm que puedes usar para cargar Stripe.js como un módulo. Consulta el proyecto en GitHub. Se requiere la versión 7.0.0 o una versión posterior.

Initialize stripe.js.

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
  
'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Initialize Checkout
Lado del cliente

Crea una promesa de clientSecret que se resuelva con el secreto de cliente o defínela como secreto directamente. Llama a initCheckout y especifica clientSecret. InitCheckout devuelve una promesa que se resuelve en una instancia de Checkout.

El objeto checkout actúa como la base de tu página del proceso de compra y contiene datos de la sesión de Checkout y métodos para actualizar la sesión.

El objeto devuelto por actions.getSession() contiene tu información sobre los precios. Recomendamos leer y mostrar eltotal, ylineItems de la sesión en tu interfaz de usuario.

This lets you turn on new features with minimal code changes. For example, adding manual currency prices requires no UI changes if you display the total.

checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
index.html
<div id="checkout-container"></div>

Collect customer email
Lado del cliente

Crea una entrada de correo electrónico para recopilar la dirección de correo electrónico de tu cliente. Llama a updateEmail cuando tu cliente termine de introducir la dirección de correo electrónico para validarla y guardarla.

Dependiendo del diseño de tu formulario del proceso de compra, puedes llamar a updateEmail de las siguientes maneras:

  • Directamente antes de enviar el pago. También puedes llamar a updateEmail para validar antes, como en el desenfoque de entrada.
  • Antes de pasar al siguiente paso, como hacer clic en el botón Guardar, si el formulario incluye varios pasos.
index.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}

Recopilar los datos de pago
Lado del cliente

Recolecta los datos de pago del cliente con el Payment Element. El Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recolección de datos de pago para varios métodos de pago.

Primero, crea un elemento DOM contenedor para montar el Payment Element. A continuación, crea una instancia del Payment Element mediante checkout.createPaymentElement y móntala llamando a element.mount, proporcionando un selector CSS o el elemento DOM contenedor.

index.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Consulta Stripe.js docs para ver las opciones compatibles.

Puedes personalizar la apariencia de todos los Elements especificando elementsOptions.appearance al inicializar el proceso de compra en el front end.

Submit the payment
Lado del cliente

Presenta un botón Pagar que llame a confirm desde la instancia de Checkout para enviar el pago.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

Prueba tu integración

Para probar tu integración, elige el método de pago y toca Pagar. En un entorno de prueba, esto te redirige a una página de pago de prueba donde puedes aprobar o rechazar el pago.

En modo activo, al tocar Pagar, te redirige al sitio web de Kriya (no tienes la opción de aprobar o rechazar el pago con Kriya).