Muestra los mensajes de Afterpay o ClearpayObsoleto

Informa a tus clientes de que aceptas pagos con Afterpay incluyendo el Element de mensajería de Afterpay en tu sitio web. Te sugerimos que añadas el Element de mensajería a las páginas del producto, del carrito y del pago. El Element afterpayClearpayMessage se encarga de:

• Calcular y mostrar el importe de las cuotas
• Mostrar la modal de información de Afterpay
• Localizar el texto y las divisas

Incluir el Element

<script src="https://js.stripe.com/v3/"></script>

<div id="afterpay-clearpay-message"></div>

// 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');

const elements = stripe.elements();

const options = {
  amount: 1000, // $10.00 USD
  currency: 'USD'
};

const afterpayClearpayMessageElement =
  elements.create('afterpayClearpayMessage', options);

afterpayClearpayMessageElement.mount('#afterpay-clearpay-message');

Personaliza el mensaje

Existen varias opciones para personalizar el diseño y el contenido del Element de mensajería. Consulta la referencia de la API para acceder a la lista completa de opciones.

Logotipo del distintivo

Establece el logoType en 'badge' y utiliza la opción badgeTheme para elegir entre los siguientes estilos:

Logotipo combinado

Establece el logoType en 'lockup' y utiliza la opción lockupTheme para elegir entre los siguientes estilos:

Dale estilo con el CSS

Además de las opciones de configuración, puedes utilizar el CSS para darle estilo a los mensajes; de este modo, se adaptarán mejor al diseño de tu sitio web. Puedes personalizar los ajustes de font-family, font-size, y color de la mensajería:

.AfterpayMessage {
  font-family: monospace;
  font-size: 14px;
  color: blue;
}

También puedes controlar el tamaño del logotipo al configurar width y height:

.AfterpayMessage-logoSvg {
  width: 80px;
  height: auto;
}

Gestiona los elementos que no cumplen los requisitos

No puedes usar Afterpay para determinadas categorías de empresas prohibidas. Si vendes artículos de estas categorías, puedes seguir mostrando el Element de mensajería para indicar claramente que Afterpay no está disponible.

Usa las opciones isEligible o isCartEligible para indicar que el producto o el carrito actual no son admisibles:

Afterpay también tiene límites de transacciones por defecto para cada país. Cuando el amount proporcionado supera estos límites, el Element muestra automáticamente un mensaje de rango de precio no admitido. Puedes personalizar este mensaje ocultando el límite inferior o superior con showLowerLimit y showUpperLimit.

Configuración local y divisa

Afterpay y Clearpay admiten las siguientes configuraciones locales y divisas:

Idiomas admitidos: en-US, en-CA, en-AU, en-NZ, en-GB

Divisas admitidas: USD, CAD, AUD, NZD, GBP

La mensajería de Afterpay siempre indica el número apropiado de cuotas que un usuario puede pagar en función de su configuración regional y su país. Para más información, consulta el cobro de pagos.

const elements = stripe.elements({
  locale: 'en-GB'
});

const options = {
  amount: 1000, // £10.00
  currency: 'GBP'
};

const afterpayClearpayMessageElement =
  elements.create('afterpayClearpayMessage', options);

afterpayClearpayMessageElement.mount('#afterpay-clearpay-message');