Acepta un pago de Afterpay o Clearpay

Primero, necesitas una cuenta de Stripe. Regístrate ahora.

Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Un PaymentIntent es un objeto que representa tu intención de cobrarle a un cliente y hace el seguimiento del ciclo de vida del proceso de pago en cada etapa. Primero, crea un PaymentIntent en tu servidor y especifica el importe que hay que cobrar y la divisa. Si ya tienes una integración que utiliza la API Payment Intents, añade afterpay_clearpay a la lista de tipos de métodos de pago para tu PaymentIntent.

Puedes gestionar los métodos de pago desde el Dashboard. Stripe gestiona la devolución de métodos de pago que cumplan los requisitos en función de factores como el importe de la transacción, la divisa y el flujo de pago. En el siguiente ejemplo se usa el atributo automatic_payment_methods, pero puedes enumerar afterpay_clearpay con tipos de métodos de pago. En la última versión de la API, especificar el parámetro automatic_payment_methods es opcional porque Stripe habilita sus funciones de forma predeterminada. Independientemente de la opción que elijas, asegúrate de habilitar Afterpay Clearpay en el Dashboard.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]"=true \
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"=CA \
  -d "shipping[address][country]"=US \
  -d "shipping[address][postal_code]"=94111

Recupera el secreto del cliente

El PaymentIntent incluye un secreto de cliente que el lado del cliente utiliza para completar el proceso de pago de forma segura. Puedes usar diferentes métodos para pasar el secreto del cliente al lado del cliente.

get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Opciones de métodos de pago adicionales

Puedes especificar un parámetro reference opcional en las opciones del método de pago para tu PaymentIntent que establece un identificador de pedido interno para el pago. Aunque esto no suele ser visible ni para la empresa ni para el consumidor, el equipo de soporte interno de Afterpay puede acceder a él durante las solicitudes de soporte manuales. El identificador tiene un límite de 128 caracteres y solo puede contener letras, dígitos, guiones bajos, barras diagonales inversas y guiones.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  // Shipping address is optional but recommended to pass in.
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111 \
  -d "payment_method_options[afterpay_clearpay][reference]"="order_123"

En este paso, efectivizarás los pagos de Afterpay en el lado del cliente con Stripe.js.

Configura Stripe.js

Cuando un cliente haga clic para pagar con Afterpay, recomendamos utilizar Stripe.js para enviar el pago a Stripe. Stripe.js es nuestra biblioteca JavaScript principal para crear flujos de pago. Automáticamente gestiona las complejidades como los redireccionamientos que se describen a continuación, y te dan la posibilidad de ampliar fácilmente tu integración a otros métodos de pago en el futuro. Incluye la secuencia de comandos de Stripe.js en tu página de proceso de compra añadiéndola al encabezado de tu archivo HTML.

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

Crea una instancia de Stripe.js con el siguiente JavaScript en tu página de finalización de compra.

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

En lugar de enviarle al cliente el objeto PaymentIntent completo, utiliza el secreto de cliente del paso 2. Esta clave es diferente de las claves de API que autentican las solicitudes de API de Stripe.

Aún debes administrar el secreto de cliente con cuidado porque sirve para completar el cargo. No lo registres, no lo insertes en URL ni lo expongas a nadie excepto al cliente.

Usa stripe.confirmAfterpayClearpayPayment para gestionar la redirección fuera de tu página y completar el pago. Añade un return_url a esta función para especificar a dónde redirige Stripe al usuario después de completar el pago en el sitio web o la aplicación móvil de Afterpay.

// Redirects away from the client
const {error} = await stripe.confirmAfterpayClearpayPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        email: 'jenny@rosen.com',
        name: 'Jenny Rosen',
        address: {
          line1: '1234 Main Street',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
          postal_code: '94111',
        },
      },
    },
    return_url: 'https://example.com/checkout/complete',
  }
);
if (error) {
  // Inform the customer that there was an error.
}

Cuando tu cliente envía un pago, Stripe lo redirige a la return_url e incluye los siguientes parámetros de consulta de URL. La página de retorno puede usarlos para obtener el estado del PaymentIntent y mostrarle al cliente el estado del pago.

Cuando especifiques el return_url, también puedes anexar tus propios parámetros de consulta para usarlos en la página de retorno.

Cuando se redirige al cliente de nuevo a tu sitio web, puedes usar el payment_intent_client_secret para consultar el PaymentIntent y mostrarle al cliente el estado de la transacción.