Pulsante Paga ora di Stripe Connector for NetSuite
Quando si utilizza la funzionalità Stripe Connector for NetSuite la pagina di pagamento delle fatture o il link di pagamento delle fatture (gratuito o automatico) sono disponibili diversi metodi per mappare il link alla pagina di pagamento dal record fattura web al PDF della fattura per il cliente, in modo da consentire ai clienti di effettuare un pagamento. Ecco un frammento di codice predefinito per creare un pulsante "Paga ora" da inserire nel codice sorgente del PDF avanzato. Vedi di seguito le istruzioni e le opzioni di personalizzazione.
Anteprima del modello di PDF avanzato con il frammento di codice incluso:
Frammento di codice per creare il pulsante "Paga ora":
<#assign rawLink = record.custbody_stripe_payment_link>
<#assign paymentLink = rawLink?replace('.*href="([^"]+)".*', '$1', 'r')>
<table class="payhere" style="width: 100%; margin-top: 10px; margin-bottom: 20px;">
<tr>
<td align="left" style="text-align: center; padding-bottom: 20px;">
<a href="${paymentLink}" style="display: inline-block; padding: 15px 30px; background-color: #635BFF; color: white; text-decoration: none; font-weight: bold; border-radius: 5px; font-size: 18px;">Paga ora</a>
</td>
</tr>
<tr>
<td align="left" style="text-align: center;">
<img src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" />
</td>
</tr>
</table>
La sezione in viola sotto è la posizione consigliata per il frammento di codice del pulsante "Paga ora" nel modello di PDF avanzato:
Come installare il frammento di codice:
- Verifica o configura il modello di PDF utilizzato dal modulo fatture su cui hai inserito il campo Link alla pagina di pagamento.
- Accedi a Personalizzazioni>Moduli>Moduli transazione. Individua e modifica la fattura dall'elenco e assicurati che sia configurata in modo da usare il modello PDF avanzato. Copia o memorizza il nome del modello.
- Accedi a Personalizzazioni>Moduli>PDF avanzato>Moduli PDF/HTML. Seleziona l'opzione in alto a destra per visualizzare il codice sorgente.
- Se non stai utilizzando il modello PDF avanzato predefinito per le fatture, è probabile che il modello sia già stato personalizzato. Il codice sorgente del PDF avanzato è scritto in HTML con elementi CSS e FreeMarker inclusi. Il frammento di codice sopra è in pratica una "tabella" con due parametri "<#assign.." che la precedono. In generale, l'intero frammento può essere copiato e incollato in qualsiasi punto del modello in cui è possibile inserire una tabella.
- Consiglio: fai clic sul pulsante di anteprima nell'angolo in alto a destra della pagina del codice sorgente. Si aprirà una nuova scheda con il modello del modulo. Tienila aperta come scheda separata in modo da capire in quale punto del codice ti trovi. In generale, è più semplice incollare la tabella tra gli elementi <body> e </body> già presenti nel codice sorgente; tuttavia, puoi anche incollarla nell'intestazione o nel piè di pagina.
- Individua l'inizio e la fine dei vari blocchi di codice e incolla il frammento in quello spazio, in modo da non spezzare un blocco di codice.
- Ad esempio, vedrai la gerarchia degli elementi HTML utilizzata per creare le tabelle, che tipicamente inizia con <table> e termina con </table>. Puoi incollare il frammento di codice tra le tabelle esistenti.
Opzioni di personalizzazione:
Il frammento di codice funziona così com'è e basta copiarlo e incollarlo in una posizione adeguata del codice sorgente. Tuttavia, puoi personalizzare ulteriormente l'aspetto e la posizione con le seguenti opzioni:
- align="left" -Modifica entrambe le istanze della stringa che compare sotto "center" o "right" per allineare il pulsante "Paga ora" e il logo "Powered by Stripe" in una delle due posizioni nella pagina.
- background-color: #635BFF -Modifica l'identificativo del colore per cambiare il colore di sfondo del pulsante.
- color: white -Modifica il testo "white" con un altro indicativo di colore HTML per cambiare il colore del testo nel pulsante.
- font-weight: bold -Modifica il testo "bold" con un'altra opzione HTML per il carattere nel pulsante.
- ">Paga ora</a> -Sostituisci il testo "Paga ora" con un testo a tua scelta.
- src="https://cdn.brandfolder.io/KGT2DTA4/at/g65qkq94m43qc3c9fqnhh3m/Powered_by_Stripe_-_black.png" alt="Powered by Stripe" style="width: 90px; height: 20px;" /> -Il colore del logo "Powered by Stripe" può essere sostituito con viola o bianco incollando l'URL corrispondente nella sezione evidenziata in verde tra virgolette "...".
- Queste sono opzioni incluse in questo codice per modificare le dimensioni e i margini del pulsante e del logo "Powered by Stripe".
Altre opzioni per creare una mappatura del campo personalizzata nel modello PDF:
Utilizzando il modello PDF standard, puoi includere {custbody_stripe_payment_link} in una casella di testo. Tuttavia, questa opzione è molto limitata in termini di personalizzazione dell'aspetto del link.
Utilizzando il codice sorgente del PDF avanzato, puoi scrivere un codice per un pulsante personalizzato, ma è consigliabile utilizzare il codice predefinito come punto di partenza. A seguito di nuovi requisiti tecnici il link alla pagina di pagamento deve utilizzare il tipo di campo "Hyperlink" per la transazione, che non consente di utilizzare l'impostazione "Link Text" nella pagina del campo della transazione. Questo impone l'uso di elementi nel codice come "<#assign…" e "<a href…" come si evince dal frammento di codice sopra.