# Accept an Affirm payment Learn how to accept Affirm, a buy now and pay later payment method. > This guide helps you integrate Affirm in your online checkout flow. For in-person payments with Stripe Terminal, visit [Additional payment methods](https://docs.stripe.com/terminal/payments/additional-payment-methods.md). # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=checkout. > Stripe puede presentar automáticamente los métodos de pago pertinentes a tus clientes evaluando la moneda, las restricciones de los métodos de pago y otros parámetros. > > - Sigue la guía [Aceptar un pago](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted) para crear una integración de Checkout que utilice [métodos de pago dinámicos](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md). - Si no quieres utilizar métodos de pago dinámicos, sigue los pasos que se indican a continuación para configurar manualmente los métodos de pago en tu integración de Checkout. Affirm is a [single use](https://docs.stripe.com/payments/payment-methods.md#usage), [immediate notification](https://docs.stripe.com/payments/payment-methods.md#payment-notification) payment method that requires customers to [authenticate](https://docs.stripe.com/payments/payment-methods.md#customer-actions) their payment. Customers are redirected to the Affirm site, where they agree to the terms of an installment plan. When the customer accepts the terms, funds are guaranteed and transferred to your Stripe account. The customer repays Affirm directly over time. > Before you start the integration, make sure your account is eligible for Affirm by navigating to your [Payment methods settings](https://dashboard.stripe.com/settings/payment_methods). ## Determina la compatibilidad **Ubicación geográfica del cliente**: Canada, US **Divisas aceptadas**: `cad, usd` **Divisas de pago**: `cad, usd` **Modo de pago**: Yes **Modo de configuración**: No **Modo de suscripción**: No A Checkout Session must satisfy all of the following conditions to support Affirm payments: - You can only use one-time line items. Affirm doesn’t support recurring *subscription* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) plans. - Express all *Prices* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) in your domestic currency. ## Aceptar un pago > This guide builds on the foundational [accept a payment](https://docs.stripe.com/payments/accept-a-payment.md?ui=stripe-hosted) Checkout integration. This guides you through enabling Affirm and shows the differences between accepting payments using dynamic payment methods and manually configuring payment methods. ### Enable Affirm as a payment method When creating a new [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md), you need to: 1. Add `affirm` to the list of `payment_method_types`. 1. Make sure all your `line_items` use your domestic currency and the total amount doesn’t exceed Affirm’s [transaction amount limits](https://docs.stripe.com/payments/affirm.md#payment-options). 1. Opcionalmente, especifica en qué países Checkout permite realizar envíos a través de `shipping_address_collection[allowed_countries]`. #### Stripe-hosted page ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=5000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=affirm" \ -d "shipping_address_collection[allowed_countries][0]=CA" \ -d "shipping_address_collection[allowed_countries][1]=US" \ --data-urlencode "success_url=https://example.com/success" ``` #### Formulario integrado ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=5000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=affirm" \ --data-urlencode "return_url=https://example.com/return" \ -d "shipping_address_collection[allowed_countries][0]=CA" \ -d "shipping_address_collection[allowed_countries][1]=US" \ -d ui_mode=embedded_page ``` Si no quieres recopilar las direcciones de envío con Checkout, también puedes proporcionar la dirección de envío con `payment_intent_data[shipping]`. Hacerlo ayuda a mejorar las tasas de aceptación de préstamos. #### Stripe-hosted page ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=5000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=affirm" \ -d "payment_intent_data[shipping][name]=Jenny Rosen" \ -d "payment_intent_data[shipping][address][line1]=1234 Main Street" \ -d "payment_intent_data[shipping][address][city]=San Francisco" \ -d "payment_intent_data[shipping][address][state]=CA" \ -d "payment_intent_data[shipping][address][country]=US" \ -d "payment_intent_data[shipping][address][postal_code]=94111" \ --data-urlencode "success_url=https://example.com/success" ``` #### Formulario integrado ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=usd" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=5000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=affirm" \ --data-urlencode "return_url=https://example.com/return" \ -d "payment_intent_data[shipping][name]=Jenny Rosen" \ -d "payment_intent_data[shipping][address][line1]=1234 Main Street" \ -d "payment_intent_data[shipping][address][city]=San Francisco" \ -d "payment_intent_data[shipping][address][state]=CA" \ -d "payment_intent_data[shipping][address][country]=US" \ -d "payment_intent_data[shipping][address][postal_code]=94111" \ -d ui_mode=embedded_page ``` ### Completa tus pedidos [Usa un método como los webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks) para gestionar la *ejecución* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) del pedido, en lugar de esperar a que tu cliente vuelva a la página de estado del pago. Los siguientes eventos se envían cuando el estado del pago cambia: | Nombre del evento | Descripción | Próximos pasos | | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | El cliente ha autorizado correctamente el pago al enviar el formulario del proceso de finalización de compra. | Esperar hasta asegurarte de si el pago se ha realizado correctamente o no. | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) | El pago del cliente se ha efectuado satisfactoriamente. El `PaymentIntent` pasa a `succeeded`. | Suministrar los bienes o servicios que el cliente ha comprado. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) | Se ha rechazado el pago del cliente o ha fallado por alguna otra razón. El `PaymentIntent` vuelve al estado `requires_payment_method`. | Enviar un correo electrónico al cliente para pedirle que haga un nuevo pedido. | Obtén más información sobre [completar pedidos](https://docs.stripe.com/checkout/fulfillment.md). ## Prueba tu integración When testing your Checkout integration, select Affirm as the payment method and click the **Pay** button. Test your Affirm integration with your test API keys by viewing the redirect page. You can test the successful payment case by authenticating the payment on the redirect page. The PaymentIntent transitions from `requires_action` to `succeeded`. To test the case where the user fails to authenticate, use your test API keys and view the redirect page. On the redirect page, close the Affirm modal window and verify that payment failed. The PaymentIntent transitions from `requires_action` to `requires_payment_method`. When redirected to the Affirm sandbox, Affirm may ask for the last four digits of your SSN. Affirm suggests using `'0000'` or `'5678'`. For [manual capture](https://docs.stripe.com/payments/affirm/accept-a-payment.md#manual-capture) PaymentIntents in testmode, the uncaptured PaymentIntent auto-expires 10 minutes after successful authorization. ## Failed payments Affirm takes into account multiple factors when deciding to accept or decline a transaction (for example, the length of time buyer has used Affirm, the outstanding amount the customer has to repay, and the value of the current order). Always present additional payment options such as `card` in your checkout flow, as Affirm payments have a higher rate of decline than many payment methods. In these cases, the [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) is detached and the [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) object’s status automatically transitions to `requires_payment_method`. Other than a payment being declined, for an Affirm [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) with a status of `requires_action`, customers need to complete the payment within 12 hours after you redirect them to the Affirm site. If the customer takes no action within 12 hours, the [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) is detached and the [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) object’s status automatically transitions to `requires_payment_method`. En estos casos, informa a tus clientes que deben intentarlo de nuevo con una opción de pago diferente de tu flujo de proceso de compra. ## Error codes Estos son algunos códigos de error comunes y las correspondientes acciones recomendadas: | Código de error | Recommended action | | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent_payment_attempt_failed` | A generic failure indicating the Affirm checkout failed. Additional information might be available in the charge outcome reason. | | `payment_method_provider_decline` | Affirm declined the customer’s payment. As a next step, the customer needs to contact Affirm for more information. | | `payment_intent_payment_attempt_expired` | The customer never completed the payment on Affirm’s checkout page, and the payment session has expired. Stripe automatically expires PaymentIntents that aren’t successfully authorized 12 hours after initial checkout creation. | | `payment_method_not_available` | Affirm experienced a service related error and is unable to complete the request. Retry at a later time. | | `amount_too_small` | Enter an amount within Affirm’s [default transactions limits](https://docs.stripe.com/payments/affirm.md#payment-options). | | `amount_too_large` | Enter an amount within Affirm’s [default transactions limits](https://docs.stripe.com/payments/affirm.md#payment-options). | Some errors might have additional insight included in the charge outcome reason: | Outcome Reason | What this means | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `generic_decline` | The default outcome reason for a payment error. This usually indicates that the partner declined the payment (for example, because of insufficient funds), the bank issuer declined the charge, the transaction included a high-risk purchase, or a similar reason. Stripe might not always receive a decline reason for these cases. | | `affirm_checkout_canceled` | Either the customer has explicitly canceled the Affirm checkout or Affirm has rejected the customer’s loan eligibility. Stripe can’t distinguish the difference between these two types of events. | # Checkout Sessions API > This is a Checkout Sessions API for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=elements&api-integration=checkout. Para determinar qué API se adapta mejor a las necesidades de tu empresa, consulta la [guía comparativa](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Usa el [Payment Element](https://docs.stripe.com/payments/payment-element.md) 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](https://docs.stripe.com/payments/accept-a-payment.md). ## Determina la compatibilidad **Ubicación geográfica del cliente**: Canada, US **Divisas aceptadas**: `cad, usd` **Divisas de pago**: `cad, usd` **Modo de pago**: Yes **Modo de configuración**: No **Modo de suscripción**: No A Checkout Session must satisfy all of the following conditions to support Affirm payments: - You can only use one-time line items. Affirm doesn’t support recurring *subscription* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) plans. - Express all *Prices* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) in your domestic currency. ## Set up the server [Lado del servidor] Utiliza las bibliotecas oficiales de Stripe para acceder a la API desde tu aplicación. #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # 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](https://docs.stripe.com/api/checkout/sessions/create.md) y devuelve el [secreto de cliente](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) 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. Recomendamos utilizar [métodos de pago dinámicos](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) para mostrar de forma dinámica los métodos de pago elegibles más relevantes para cada cliente y maximizar así la conversión. También puedes [enumerar manualmente los métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually), lo que desactiva los métodos de pago dinámicos. #### Manage payment methods from the Dashboard #### TypeScript ```javascript 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: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 5000, }, quantity: 1, }, ], mode: 'payment', ui_mode: 'elements', 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'); }); ``` #### Manually list payment methods #### TypeScript ```javascript 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: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 5000, }, quantity: 1, }, ], mode: 'payment', ui_mode: 'elements', payment_method_types: ['affirm'], 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] #### HTML + JS Incluye la secuencia de comandos de Stripe.js en tu página de Checkout al añadirlo al `head` de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas la secuencia de comandos en un paquete ni alojes una copia en tus sistemas. Asegúrate de tener la última versión de Stripe incluyendo la siguiente etiqueta de script ``. Obtén más información sobre [las versiones de Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md). ```html Checkout ``` > Stripe proporciona un paquete npm que puedes usar para cargar Stripe.js como módulo. Consulta el [proyecto en GitHub](https://github.com/stripe/stripe-js). Se requiere la versión [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) o posterior. Inicializa stripe.js. ```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( '<>', ); ``` #### React Instala [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) y el [cargador Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) del registro público NPM. Necesitas al menos la versión 5.0.0 para React Stripe.js y la versión 8.0.0 para el cargador Stripe.js. ```bash npm install --save @stripe/react-stripe-js@^5.0.0 @stripe/stripe-js@^8.0.0 ``` Inicia una instancia `stripe` en tu front-end con tu clave publicable. ```javascript import {loadStripe} from '@stripe/stripe-js'; const stripe = loadStripe("<>"); ``` ## Initialize Checkout [Lado del cliente] #### HTML + JS Llama [a initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init) y especifica `clientSecret`. `initCheckoutElementsSdk` devuelve un objeto de [Checkout](https://docs.stripe.com/js/custom_checkout) que contiene datos de Checkout Session y métodos para actualizarlo. Lee el `total` y las `partidas` de [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) y muéstralos en tu interfaz de usuario. Esto te permite activar nuevas funciones con cambios mínimos en el código. Por ejemplo, si añades [precios manuales en divisas](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md), no tendrás que cambiar la interfaz de usuario si lo haces en `total`. ```html
``` ```javascript const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const checkout = stripe.initCheckoutElementsSdk({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}`); } ``` #### React Envuelve tu solicitud de acceso con el componente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), especificando `clientSecret` y la instancia `Stripe`. ```jsx import React from 'react'; import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout'; import CheckoutForm from './CheckoutForm'; const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const App = () => { return ( ); }; export default App; ``` Accede al objeto [Checkout](https://docs.stripe.com/js/custom_checkout) de tu componente de proceso de compra usando el hook `useCheckout()`. El objeto `Checkout` contiene datos de la sesión del proceso de compra y métodos para actualizarlo. Lee el `total` y las `partidas` del objeto `Proceso de compra` y muéstralos en tu interfaz de usuario. Esto te permite habilitar funciones con cambios mínimos de código. Por ejemplo, añadir [precios manuales en divisas](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) no requiere cambios en la interfaz de usuario si muestras el `total`. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => {const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount}
); }; ``` ## Collect customer email [Lado del cliente] #### HTML + JS Debes proporcionar una dirección de correo electrónico válida al completar una sesión del proceso de compra. Estas instrucciones crean una entrada de correo electrónico y utilizan [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) desde el objeto `Checkout`. Como alternativa, puedes: - Pass in [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (for customers represented as customer-configured `Account` objects), or [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (for customers represented as `Customer` objects) when creating the Checkout Session. Stripe validates emails provided this way. - Especificar un correo electrónico que ya hayas validado en [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm). ```html
``` ```javascript const checkout = stripe.initCheckoutElementsSdk({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; } }); }); } ``` #### React Debes proporcionar una dirección de correo electrónico válida al completar una sesión del proceso de compra. Estas instrucciones crean una entrada de correo electrónico y utilizan [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) desde el objeto `Checkout`. Como alternativa, puedes: - Pass in [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (for customers represented as customer-configured `Account` objects), or [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (for customers represented as `Customer` objects) when creating the Checkout Session. Stripe validates emails provided this way. - Especificar un correo electrónico que ya validaste en la [confirmación](https://docs.stripe.com/js/react_stripe_js/checkout/confirm). ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const EmailInput = () => { const checkoutState = useCheckout(); const [email, setEmail] = React.useState(''); const [error, setError] = React.useState(null); if (checkoutState.type === 'loading') { return (
Loading...
); } else if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => { if (result.type === 'error') { setError(result.error); } }) }; const handleChange = (e) => { setError(null); setEmail(e.target.value); }; return (
{error &&
{error.message}
}
); }; export default EmailInput; ``` ## Collect payment details [Lado del cliente] Recolecta los datos de pago del cliente con el [Payment Element](https://docs.stripe.com/payments/payment-element.md). 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. El Payment Element contiene un iframe que envía la información de pago de forma segura a Stripe través de una conexión HTTPS. Evita colocar el Payment Element en otro iframe, ya que algunos métodos de pago requieren redirigir a otra página para confirmar el pago. Si decides utilizar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo [permitir](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) establecido en `"payment *"`. Para que la integración funcione, la dirección de la página del proceso de compra debe empezar con `https://` rather en lugar de `http://` for. Puedes probar tu integración sin usar HTTPS, pero recuerda [habilitarla](https://docs.stripe.com/security/guide.md#tls) cuando todo esté listo para aceptar pagos activos. #### HTML + JS Primero, crea un elemento DOM contenedor para montar el [Payment Element](https://docs.stripe.com/payments/payment-element.md). A continuación, crea una instancia del `Payment Element` mediante [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) y móntala llamando a [element.mount](https://docs.stripe.com/js/element/mount), proporcionando un selector CSS o el elemento DOM contenedor. ```html
``` ```javascript const paymentElement = checkout.createPaymentElement(); paymentElement.mount('#payment-element'); ``` Consulta [Stripe.js docs](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) para ver las opciones compatibles. Puedes [personalizar la apariencia](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos los Elements especificando [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) al inicializar el proceso de compra en el front end. #### React Monta el componente [Payment Element](https://docs.stripe.com/payments/payment-element.md) dentro del [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ```jsx import React from 'react';import {PaymentElement, useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount} ); }; export default CheckoutForm; ``` Consulta [Stripe.js docs](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) para ver las opciones compatibles. Puedes [personalizar el aspecto](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos los elementos especificando [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) en el [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ## Submit the payment [Lado del cliente] #### HTML + JS Presenta un botón **Pagar** que llame a [confirm](https://docs.stripe.com/js/custom_checkout/confirm) desde la instancia de `Checkout` para enviar el pago. ```html
``` ```js const checkout = stripe.initCheckoutElementsSdk({clientSecret}); checkout.on('change', (session) => { document.getElementById('pay-button').disabled = !session.canConfirm; }); 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; } }); }); } ``` #### React Presenta un botón **Pagar** que llame a [confirm](https://docs.stripe.com/js/custom_checkout/confirm) desde [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) para enviar el pago. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const PayButton = () => { const checkoutState = useCheckout(); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); if (checkoutState.type !== "success") { return null; } const handleClick = () => { setLoading(true);checkoutState.checkout.confirm().then((result) => { if (result.type === 'error') { setError(result.error) } setLoading(false); }) }; return (
{error &&
{error.message}
}
) }; export default PayButton; ``` ## Prueba tu integración Para probar tu integración, elige el método de pago y toca **Pagar**. En un *entorno de prueba* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes), 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 Affirm (no tienes la opción de aprobar o rechazar el pago con Affirm). # Payment Intents API > This is a Payment Intents API for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=elements&api-integration=paymentintents. Para determinar qué API se adapta mejor a las necesidades de tu empresa, consulta la [guía comparativa](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Usa el [Payment Element](https://docs.stripe.com/payments/payment-element.md) 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](https://docs.stripe.com/payments/accept-a-payment.md). ## Set up Stripe [Lado del servidor] Para empezar, crea [una cuenta de Stripe](https://dashboard.stripe.com/register). Utiliza nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Collect payment details [Lado del cliente] Ya tienes todo listo para recopilar datos de pago del lado del cliente con Payment Element. El Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recopilación de datos de pago para una amplia variedad de métodos de pago. El Payment Element contiene un iframe que envía la información de pago de forma segura a Stripe través de una conexión HTTPS. Evita colocar el Payment Element en otro iframe, ya que algunos métodos de pago requieren redirigir a otra página para confirmar el pago. La dirección de la página del proceso de compra debe empezar por `https://` en lugar de `http://` para que tu integración funcione. Puedes probar tu integración sin usar HTTPS, pero recuerda [habilitarla](https://docs.stripe.com/security/guide.md#tls) cuando todo esté listo para aceptar pagos reales. #### HTML + JS ### Configura Stripe.js El Payment Element se encuentra disponible automáticamente como función de Stripe.js. 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 en tus sistemas. ```html Checkout ``` Crea una instancia de Stripe con el siguiente JavaScript en tu página de proceso de compra: ```javascript // 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('<>'); ``` ### Agregar el Payment Element a tu página del proceso de pago El Payment Element necesita un lugar en tu página del proceso de compra. Crea un nodo DOM vacío (contenedor) con un ID único en tu formulario de pago: ```html
``` #### Controla los métodos de pago desde el Dashboard Después de cargar el formulario anterior, crea una instancia de Elements con un `mode`, `amount` y `currency`. Estos valores determinan qué métodos de pago ve tu cliente. Para proporcionar un nuevo método de pago en tu formulario, asegúrate de habilitarlo en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). ```javascript const options = {mode:'payment', amount:5000, currency: 'usd', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### Enumera métodos de pago manualmente Para crear manualmente una lista con los métodos de pago que deseas que estén disponibles, añade cada uno de ellos a `paymentMethodTypes`. A continuación, crea una instancia del Payment Element y móntala en el nodo DOM del contenedor. ```javascript const options = {mode:'payment', amount:5000, currency: 'usd', paymentMethodTypes: ['affirm'], // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Configura Stripe.js Instala [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) y el [cargador de Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) desde el registro público npm. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Agrega y configura el proveedor de Elements en tu página del proceso de pago Para utilizar el componente de Payment Element, ajusta el componente de la página del proceso de compra en un [proveedor de Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Llama a `loadStripe` con tu clave publicable y pasa el `Promise` devuelto al proveedor d `Elements`. #### Controla los métodos de pago desde el Dashboard El proveedor de `Elements` también acepta un `mode`, `amount`, y `currency`. Estos valores determinan qué métodos de pago ve tu cliente. Para proporcionar un nuevo método de pago en tu formulario, asegúrate de habilitarlo en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = {mode:'payment', amount:5000, currency: 'usd', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` #### Enumera métodos de pago manualmente ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = {mode:'payment', amount:5000, currency: 'usd', paymentMethodTypes: ['affirm'], // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Añade el componente Payment Element Utiliza el componente `PaymentElement` para crear el formulario. ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` Puedes personalizar el Payment Element para que coincida con el diseño de tu sitio especificando el [objeto Appearance](https://docs.stripe.com/elements/appearance-api.md) en `options` al crear el proveedor `Elements`. ### Recopila las direcciones De forma predeterminada, el Payment Element solo recopila los datos necesarios de la dirección de facturación. Algunas acciones, como [calcular impuestos](https://docs.stripe.com/api/tax/calculations/create.md) o introducir datos de envío, requieren la dirección completa de tu cliente. Puedes: - Utiliza el [Address Element](https://docs.stripe.com/elements/address-element.md) para aprovechar las funciones de autocompletado y localización y recopilar la dirección completa del cliente, lo que te ayudará a calcular los impuestos con la mayor precisión. - Recopila datos de la dirección con tu propio formulario personalizado. ## Crear un PaymentIntent [Lado del servidor] > #### Ejecuta la lógica de negocio personalizada inmediatamente antes de la confirmación del pago > > Dirígete al [paso 5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) en la guía de finalización de pagos para ejecutar tu lógica comercial personalizada inmediatamente antes de la confirmación del pago. De lo contrario, sigue los pasos a continuación para una integración más simple, que usa `stripe.confirmPayment` en el cliente para confirmar el pago y manejar las acciones siguientes. #### Controla los métodos de pago desde el Dashboard Cuando el cliente envíe tu formulario de pago, utiliza un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) para facilitar el proceso de confirmación y pago. Crea un PaymentIntent en tu servidor con un `amount` y `currency`. Para evitar que clientes malintencionados elijan sus propios precios, decide siempre cuánto cobrar del lado del servidor (un entorno de confianza) y no del lado del cliente. A `PaymentIntent` includes a *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)). Return this value to your client for Stripe.js to use to securely complete the payment process. #### Accounts v2 #### Ruby ```ruby require 'stripe' Stripe.api_key = '<>' post '/create-intent' do intent = Stripe::PaymentIntent.create({ # To allow saving and retrieving payment methods, provide the customer's Account ID. customer_account: "{{CUSTOMER_ACCOUNT_ID}}", amount: 5000, currency: 'usd', }) {client_secret: intent.client_secret}.to_json end ``` #### Customers v1 #### Ruby ```ruby require 'stripe' Stripe.api_key = '<>' post '/create-intent' do intent = Stripe::PaymentIntent.create({ # To allow saving and retrieving payment methods, provide the Customer ID. customer: customer.id, amount: 5000, currency: 'usd', }) {client_secret: intent.client_secret}.to_json end ``` #### Enumera métodos de pago manualmente Cuando el cliente envíe tu formulario de pago, utiliza un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) para facilitar el proceso de confirmación y pago. Crea un PaymentIntent en tu servidor con un `amount`, una `currency` y uno o más métodos de pago usando `payment_method_types`. Para evitar que clientes malintencionados elijan sus propios precios, decide siempre cuánto cobrar del lado del servidor (un entorno de confianza) y no del lado del cliente. En un PaymentIntent se incluye un *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)). Devuelve este valor a tu cliente para que Stripe.js lo use para completar el proceso de pago de forma segura. #### Ruby ```ruby require 'stripe' Stripe.api_key = '<>' post '/create-intent' do intent = Stripe::PaymentIntent.create({ # To allow saving and retrieving payment methods, provide the Customer ID. customer: customer.id, amount: 5000, currency: 'usd', payment_method_types: ['affirm'], }) {client_secret: intent.client_secret}.to_json end ``` ## Envía el pago a Stripe [Lado del cliente] Usa [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) para completar el pago con los datos de Payment Element. Proporciona una [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a esta función para indicar dónde redirige Stripe al usuario después de completar el pago. Es posible que en un primer momento se redirija al usuario a un sitio intermedio, como una página de autorización bancaria, antes de redirigirle al `return_url`. Los pagos con tarjeta redireccionan de inmediato al `return_url` cuando el pago se ha hecho efectivo. Si no quieres redireccionar los pagos con tarjeta después de completar el pago, puedes configurar el [redireccionamiento](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) como `if_required`. Esto solo redirecciona a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); const submitBtn = document.getElementById('submit'); const handleError = (error) => { const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; submitBtn.disabled = false; } form.addEventListener('submit', async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); // Prevent multiple form submissions if (submitBtn.disabled) { return; } // Disable form submission while loading submitBtn.disabled = true; // Trigger form validation and wallet collection const {error: submitError} = await elements.submit(); if (submitError) { handleError(submitError); return; } // Create the PaymentIntent and obtain clientSecret const res = await fetch("/create-intent", { method: "POST", }); const {client_secret: clientSecret} = await res.json(); // Confirm the PaymentIntent using the details collected by the Payment Element const {error} = await stripe.confirmPayment({ elements, clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) handleError(error); } else { // Your customer is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; export default function CheckoutForm() { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(); const [loading, setLoading] = useState(false); const handleError = (error) => { setLoading(false); setErrorMessage(error.message); } const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } setLoading(true); // Trigger form validation and wallet collection const {error: submitError} = await elements.submit(); if (submitError) { handleError(submitError); return; } // Create the PaymentIntent and obtain clientSecret const res = await fetch("/create-intent", { method: "POST", }); const {client_secret: clientSecret} = await res.json(); // Confirm the PaymentIntent using the details collected by the Payment Element const {error} = await stripe.confirmPayment({ elements, clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) handleError(error); } else { // Your customer is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{errorMessage &&
{errorMessage}
} ); } ``` ## Optional: Administrar eventos posteriores al pago Stripe envía un evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) cuando se completa el pago. Utiliza el Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personalizado o una solución de socio para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico para confirmar el pedido al cliente, registrar la venta en una base de datos o iniciar el flujo de tareas de envío. Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada y los clientes malintencionados podrían manipular la respuesta. Configurar tu integración para escuchar eventos asincrónicos también te ayudará a aceptar más métodos de pago en el futuro. Obtén más información sobre las [diferencias entre todos los métodos de pago aceptados](https://stripe.com/payments/payment-methods-guide). - **Gestiona eventos manualmente en el Dashboard** Utiliza el Dashboard para [ver tus pagos de prueba en el Dashboard](https://dashboard.stripe.com/test/payments), enviar recibos por correo electrónico, gestionar pagos o reintentar pagos fallidos. - **Crea un webhook personalizado** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Integra una aplicación prediseñada** Gestiona eventos empresariales comunes, como la [automatización](https://stripe.partners/?f_category=automation) o la [comercialización y ventas](https://stripe.partners/?f_category=marketing-and-sales), integrando una aplicación asociada. ## Optional: Separa la autorización y la captura Puedes separar la autorización y la captura para crear un cargo ahora y capturar los fondos más tarde. Stripe cancela el PaymentIntent y envía un evento [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) cancelado si el pago no se captura durante el plazo de 7 días. Si estás seguro de que no puedes capturar el pago, te recomendamos [que canceles el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) en lugar de esperar a que transcurra el plazo de 7 días. ### Indícale a Stripe que autorice solamente Para indicar que quieres separar la autorización y la captura, establece [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) en `manual` al crear el PaymentIntent. Este parámetro le indica a Stripe que solo debe autorizar el importe en la cuenta del cliente de {% $pm_display_name %. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=5000 \ -d confirm=true \ -d currency=usd \ -d "payment_method_types[]=affirm" \ -d "payment_method_data[type]=payment_method" \ -d capture_method=manual \ --data-urlencode "return_url=https://www.example.com/checkout/done" ``` ### Captura los fondos Una vez que la autorización se realiza correctamente, el [estado de PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) pasa a `requires_capture`. Para capturar los fondos autorizados, realiza una solicitud de [captura](https://docs.stripe.com/api/payment_intents/capture.md) de PaymentIntent. ```curl curl -X POST https://api.stripe.com/v1/payment_intents/{PAYMENT_INTENT_ID}/capture \ -u "<>:" ``` Stripe captura el importe total autorizado de forma predeterminada. También puedes especificar `amount_to_capture` que sea menor o igual que el total. ### (Opcional) Cancela la autorización Si necesitas cancelar una autorización, puedes [cancelar el PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md). ## Prueba tu integración Para probar tu integración, elige el método de pago y toca **Pagar**. En un *entorno de prueba* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes), 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 Affirm (no tienes la opción de aprobar o rechazar el pago con Affirm). ## Error codes En la tabla siguiente se detallan los códigos de error comunes y las acciones recomendadas: | Código de error | Acción recomendada | | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent_invalid_currency` | Introduce una divisa aceptada. | | `missing_required_parameter` | Lee el mensaje de error para obtener más información sobre el parámetro necesario. | | `payment_intent_payment_attempt_failed` | Este código puede aparecer en el campo [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) de un PaymentIntent. Consulta el mensaje de error para obtener una razón de error detallada y sugerencias sobre la gestión de los errores. | | `payment_intent_authentication_failure` | Este código puede aparecer en el campo [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) de un PaymentIntent. Comprueba el mensaje de error para obtener un motivo de error detallado y una sugerencia sobre la gestión de errores. Este error se produce cuando activas manualmente un error al probar tu integración. | | `payment_intent_redirect_confirmation_without_return_url` | Proporciona una `return_url` al confirmar un PaymentIntent. | # API Direct > This is a API Direct for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=direct-api. Stripe users can use the [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md)– a single integration path for creating payments using any supported method–to accept [Affirm](https://www.affirm.com/) payments from customers in the following countries: - Canadá - Estados Unidos Accepting Affirm payments on your website consists of: - Creating an object to track a payment - Collecting payment method information - Submitting the payment to Stripe for processing - Handling the Affirm redirect and relevant webhook events ## Configurar Stripe [Lado del servidor] Primero, [crea una cuenta de Stripe](https://dashboard.stripe.com/register) o [inicia sesión](https://dashboard.stripe.com/login). Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Crear un PaymentIntent [Lado del servidor] A [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) is an object that represents your intent to collect payment from a customer and tracks the lifecycle of the payment process through each stage. First, create a `PaymentIntent` on your server and specify the amount to collect and the currency. If you already have an integration using the [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md), add affirm to the list of [payment method types](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) for your `PaymentIntent`. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=6000 \ -d currency=usd \ -d "payment_method_types[]=affirm" ``` You can also use the Payment Element and manage payment methods from the [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe handles the return of eligible payment methods based on factors such as the transaction’s amount, currency, and payment flow. See [Accept a payment](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout) for more details. ### Recupera el secreto del cliente El PaymentIntent incluye un *secreto de cliente* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) 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. #### Aplicación de una sola página Recupera el secreto de cliente de un punto de conexión en tu servidor, utilizando la función `fetch` del navegador. Este enfoque es mejor si tu lado del cliente es una aplicación de una sola página, en particular una construida con un marco de front-end moderno como React. Crea el punto de conexión del servidor que se utiliza para el secreto de cliente: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Y luego busca el secreto del cliente con JavaScript del lado del cliente: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Renderización del lado del servidor Envía el secreto del cliente al cliente desde tu servidor. Este enfoque funciona mejor si tu aplicación genera contenido estático en el servidor antes de enviarlo al navegador. Añade el [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) en tu formulario de proceso de compra. En el código del lado del servidor, recupera el secreto de cliente de PaymentIntent: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Collect payment method details and submit [Lado del cliente] When a customer clicks to pay with Affirm, we recommend you use [Stripe.js](https://docs.stripe.com/payments/elements.md) to submit the payment to Stripe. Stripe.js is our foundational JavaScript library for building payment flows. It will automatically handle integration complexities, and enables you to easily extend your integration to other payment methods in the future. Incluye el script de Stripe.js en tu página de finalización de compra al agregarlo al encabezado `head` de tu archivo HTML. ```html Checkout ``` Crea una instancia de Stripe.js con el siguiente JavaScript en tu página de finalización de compra. ```javascript // 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( '<>' ); ``` Rather than sending the entire PaymentIntent object to the client, use its client secret from Step 1. This is different from your API keys that authenticate Stripe API requests. Gestiona el secreto de cliente con cuidado porque puede completar el cargo. No lo registres, no lo insertes en direcciones URL ni lo expongas a nadie excepto al cliente. **Improve payment success rates with additional details** We recommend passing [shipping](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping) and [billing](https://docs.stripe.com/api/payment_methods/create.md#create_payment_method-billing_details) details to improve conversion rates, although these aren’t required. This integration guide suggests passing the shipping and billing information on the client after the customer selects their payment method. If you pass these fields, the shipping address should include valid data in `line1`, `city`, `state`, `postal_code`, and `country`. Similarly, billing details must include valid data in all of `line1`, `city`, `state`, `postal_code`, and `country`. **Confirm the PaymentIntent** Use `stripe.confirmAffirmPayment` to handle the redirect away from your page and to complete the payment. You must also pass a [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) to this function to indicate where Stripe redirects the user after they complete the payment on the Affirm website or mobile application. On Affirm’s payments page, the customer selects the payment options available to them. See the overview page for more details. You can’t limit or pre-select payment options on the Affirm payments page—deferring this choice to the consumer maximizes their opportunity to transact with you. ```javascript // Redirects away from the client stripe.confirmAffirmPayment( '{{PAYMENT_INTENT_CLIENT_SECRET}}', { payment_method: { // Billing information is optional but recommended to pass in. billing_details: { email: 'jenny@rosen.com', name: 'Jenny Rosen', address: { line1: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: '94111', }, }, }, // Shipping information is optional but recommended to pass in. shipping: { name: 'Jenny Rosen', address: { line1: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: '94111', }, }, // Return URL where the customer should be redirected after the authorization. return_url: 'https://example.com/checkout/complete', } ).then(function(result) { if (result.error) { // Inform the customer that there was an error. console.log(result.error.message); } }); ``` 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. | Parámetro | Descripción | | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | El identificador único del `PaymentIntent`. | | `payment_intent_client_secret` | El [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del objeto `PaymentIntent`. Para las integraciones de suscripciones, este client_secret también se expone en el objeto `Invoice` a través de [`confirmation_secret`](https://docs.stripe.com/api/invoices/object.md#invoice_object-confirmation_secret) | 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. ## Test Affirm integration Test your Affirm integration with your test API keys by viewing the redirect page. You can test the successful payment case by authenticating the payment on the redirect page. The PaymentIntent transitions from `requires_action` to `succeeded`. To test the case where the user fails to authenticate, use your test API keys and view the redirect page. On the redirect page, click **X** in the top left corner. The PaymentIntent will transition from `requires_action` to `requires_payment_method`. When redirected to the Affirm sandbox, Affirm may ask for the last four digits of your SSN. Affirm suggests using `'0000'` or `'5678'`. ## Optional: Separa la autorización y la captura Affirm supports [separate authorization and capture](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md). If there’s a delay between the payment and delivering the goods to your customer, authorize the payment first and capture it later. At the point of capture, Affirm initiates the due dates on the customer’s subsequent repayments. **You must capture an authorized Affirm payment within 30 days of the authorization**. Otherwise, the authorization automatically cancels and you can no longer capture the payment. Stripe will also cancel the PaymentIntent and send a [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) event if this happens. > For very large order amounts, Affirm might require a down payment from the customer during authorization. If you cancel the payment or the authorization expires, Affirm refunds the down payment. If you know that you can’t capture the payment, we recommend [canceling the PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) instead of waiting for the 30-day window to elapse. Proactively canceling the PaymentIntent immediately refunds the first installment to your customer, avoiding any confusion about charges on their statement. ### Indicarle a Stripe que autorice solamente To indicate that you want separate authorization and capture, set [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) to `manual` when creating the PaymentIntent. This parameter instructs Stripe to only authorize the amount on the customer’s Affirm account. ```bash curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -d "amount"=6000 \ -d "confirm"="true" \ -d "currency"="usd" \ -d "payment_method_types[]"="affirm" \ -d "capture_method"="manual" \ // 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_data[type]"="affirm" \ -d "return_url"="https://www.example.com/checkout/done" ``` ### Capturar los fondos After the authorization succeeds, the PaymentIntent [status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) transitions to `requires_capture`. To capture the authorized funds, make a PaymentIntent [capture](https://docs.stripe.com/api/payment_intents/capture.md) request. The total authorized amount is captured by default. You can’t capture more or less than the total. ```bash https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/capture \ -u <>: \ ``` ### (Opcional) Cancela la autorización Si necesitas cancelar una autorización, puedes [cancelar el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment). ## Optional: Handle the Affirm redirect manually We recommend relying on Stripe.js to handle Affirm redirects and payments client-side with `confirmAffirmPayment`. Using Stripe.js makes it much easier to extend your integration to other payment methods. However, you can also manually redirect your customers on your server by following these steps: - Create and confirm a [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) of type `affirm`. By specifying `payment_method_data`, we create a *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) and immediately use it with this PaymentIntent. You must also provide the redirect URL for your customer after they complete their payment in the `return_url` field. You can provide your own query parameters in this URL. These parameters are included in the final URL upon completing the redirect flow. ```bash curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -d "amount"=6000 \ -d "confirm"="true" \ -d "currency"="usd" \ -d "payment_method_types[]"="affirm" \ // 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 \ // Billing details are optional but recommended to pass in. -d "payment_method_data[billing_details][name]"="Jenny Rosen" \ -d "payment_method_data[billing_details][email]"="jenny@example.com" \ -d "payment_method_data[billing_details][address][line1]"="1234 Main Street" \ -d "payment_method_data[billing_details][address][city]"="San Francisco" \ -d "payment_method_data[billing_details][address][state]"="CA" \ -d "payment_method_data[billing_details][address][country]"="US" \ -d "payment_method_data[billing_details][address][postal_code]"=94111 \ -d "payment_method_data[type]"="affirm" \ -d "return_url"="https://example.com/checkout/complete" ``` The created `PaymentIntent` has a status of `requires_action` and the type for `next_action` is `redirect_to_url`. ```json { "status": "requires_action", "next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } }, "id": "pi_xxx", "object": "payment_intent", "amount": 6000, "client_secret": "pi_xxx_secret_xxx", "confirm": "true", "confirmation_method": "automatic", "created": 1579259303, "currency": "usd", "livemode": true, "charges": { "data": [], "object": "list", "has_more": false, "url": "/v1/charges?payment_intent=pi_xxx" }, "payment_method_types": [ "affirm" ] } ``` - Redirect the customer to the URL provided in the `next_action.redirect_to_url.url` property. The code example here is approximate—the redirect method might be different in your web framework. When the customer finishes the payment process, they’re redirected to the `return_url` configured in step 1. The `payment_intent` and `payment_intent_client_secret` URL query parameters are included. If the `return_url` already included query parameters, they’re preserved too. Te recomendamos [recurrir a los webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks) para confirmar el estado del pago. ## Optional: Gestionar eventos posteriores al pago Stripe envía un evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) cuando se completa el pago. Utiliza el Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personalizado o una solución de socio para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico para confirmar el pedido al cliente, registrar la venta en una base de datos o iniciar el flujo de tareas de envío. Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada y los clientes malintencionados podrían manipular la respuesta. Configurar tu integración para escuchar eventos asincrónicos también te ayudará a aceptar más métodos de pago en el futuro. Obtén más información sobre las [diferencias entre todos los métodos de pago aceptados](https://stripe.com/payments/payment-methods-guide). - **Gestiona eventos manualmente en el Dashboard** Utiliza el Dashboard para [ver tus pagos de prueba en el Dashboard](https://dashboard.stripe.com/test/payments), enviar recibos por correo electrónico, gestionar pagos o reintentar pagos fallidos. - **Crea un webhook personalizado** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Integra una aplicación prediseñada** Gestiona eventos empresariales comunes, como la [automatización](https://stripe.partners/?f_category=automation) o la [comercialización y ventas](https://stripe.partners/?f_category=marketing-and-sales), integrando una aplicación asociada. ## Optional: Mostrar mensajes de métodos de pago en tu sitio web El [Payment Method Messaging Element](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging) es un componente integrable de interfaz de usuario que ayuda a tus clientes a saber qué opciones de pago de «compra ahora, paga después» tienen en el proceso de compra directamente desde tus páginas de producto, carrito o pago. Para añadir el Payment Method Messaging Element a tu sitio web, consulta [Mostrar mensajes de métodos de pago](https://docs.stripe.com/elements/payment-method-messaging.md). ## Errores en los pagos Affirm takes into account multiple factors when deciding to accept or decline a transaction (for example, the length of time buyer has used Affirm, the outstanding amount the customer has to repay, and the value of the current order). Always present additional payment options such as `card` in your checkout flow, as Affirm payments have a higher rate of decline than many payment methods. In these cases, the [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) is detached and the [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) object’s status automatically transitions to `requires_payment_method`. Other than a payment being declined, for an Affirm [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) with a status of `requires_action`, customers are expected to complete the payment within 12 hours after they’re redirected to the Affirm site. If no action is taken after 12 hours, the [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) is detached and the [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) object’s status automatically transitions to `requires_payment_method`. En estos casos, informa a tus clientes que deben intentarlo de nuevo con una opción de pago diferente de tu flujo de proceso de compra. ## Códigos de error Estos son algunos códigos de error comunes y las correspondientes acciones recomendadas: | Código de error | Recommended action | | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent_payment_attempt_failed` | A generic failure indicating the Affirm checkout failed. Additional information might be available in the charge outcome reason. | | `payment_method_provider_decline` | Affirm declined the customer’s payment. As a next step, the customer needs to contact Affirm for more information. | | `payment_intent_payment_attempt_expired` | The customer never completed the payment on Affirm’s checkout page, and the payment session has expired. Stripe automatically expires PaymentIntents that aren’t successfully authorized 12 hours after initial checkout creation. | | `payment_method_not_available` | Affirm experienced a service related error and is unable to complete the request. Retry at a later time. | | `amount_too_small` | Enter an amount within Affirm’s [default transactions limits](https://docs.stripe.com/payments/affirm.md#payment-options). | | `amount_too_large` | Enter an amount within Affirm’s [default transactions limits](https://docs.stripe.com/payments/affirm.md#payment-options). | Some errors might have additional insight included in the charge outcome reason: | Outcome Reason | What this means | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `generic_decline` | The default outcome reason for a payment error. This usually indicates that the partner declined the payment (for example, because of insufficient funds), the bank issuer declined the charge, the transaction included a high-risk purchase, or a similar reason. Stripe might not always receive a decline reason for these cases. | | `affirm_checkout_canceled` | Either the customer has explicitly canceled the Affirm checkout or Affirm has rejected the customer’s loan eligibility. Stripe can’t distinguish the difference between these two types of events. |