Visualizzare i messaggi Afterpay o ClearpayObsoleto

Fai sapere ai tuoi clienti che accetti pagamenti con Afterpay includendo il componente Element di messaggistica Afterpay sul tuo sito. Ti consigliamo di aggiungere il componente Element di messaggistica alle tue pagine prodotto, carrello e di pagamento. L’Element afterpayClearpayMessage si occupa di:

• Calcolare e visualizzare l’importo delle rate
• Visualizzare la finestra modale delle informazioni Afterpay
• Localizzare testo e valute

Includere il componente Element

<script src="https://js.stripe.com/clover/stripe.js"></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');

Personalizzare il messaggio

Sono disponibili numerose opzioni per personalizzare l’aspetto e il contenuto di Messaging Element. Per l’elenco completo delle opzioni, consulta la documentazione di riferimento dell’API.

Logo banner

Imposta logoType su 'badge' e usa l’opzione badgeTheme per scegliere tra i seguenti stili:

Logo lockup

Imposta logoType su 'lockup' e usa l’opzione lockupTheme per scegliere tra i seguenti stili:

Personalizzare lo stile con CSS

Oltre alle opzioni di configurazione, usa CSS per personalizzare i messaggi e renderli più adatti all’aspetto del tuo sito. Puoi personalizzare i parametri font-family, font-size e color dei messaggi:

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

Puoi anche controllare le dimensioni del logo impostando width e height:

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

Gestire le voci non idonee

Afterpay non può essere usato per determinate categorie di attività vietate. Se vendi articoli in queste categorie, puoi comunque mostrare Messaging Element per indicare chiaramente che Afterpay non è disponibile.

Usa le opzioni isEligible o isCartEligible per indicare che il prodotto o carrello corrente non è idoneo:

Afterpay prevede inoltre dei limiti di transazione predefiniti per ogni Paese. Quando il parametro amount specificato supera questi limiti, il componente Element mostra automaticamente un messaggio di intervallo di prezzo non idoneo. Puoi personalizzare questo messaggio nascondendo il limite inferiore o superiore tramite showLowerLimit e showUpperLimit.

Impostazione locale e valuta

Afterpay e Clearpay supportano le seguenti valute e impostazioni locali:

Impostazioni locali supportate: en-US, en-CA, en-AU, en-NZ, en-GB

Valute supportate: USD, CAD, AUD, NZD, GBP

La messaggistica di Afterpay indica sempre il numero appropriato di rate che un utente può pagare in base alle impostazioni locali e al Paese. Per ulteriori informazioni, consulta la sezione riscossione dei pagamenti.

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