CardInputConfig
interface CardInputConfig {
numberFormat?: 'prettyFormat' | 'plainFormat' | 'maskedFormat';
labels?: { number?: string; cvv?: string };
titles?: { number?: string; cvv?: string };
placeholders?: { number?: string; cvv?: string };
styles?: { number?: string; cvv?: string; placeholder?: string };
}Source: global.ts:1722
How the hosted card number and CVV fields look. NextPayment draws them in its own iframe from payments.29next.com, signed for the campaign's payment environment key, so no card number passes through the page. Previously named SpreedlyConfig; SpreedlyConfig remains as an alias.
NextPayment fixes everything else itself: the field type is always text, both fields are always required, and the name and expiry are always checked. Pages that still set the Spreedly iFrame options (fieldType, nonce, fraud, …) get a debug line saying they do nothing.
Example
<script>
window.nextConfig = {
cardInputConfig: {
placeholders: { number: "1234 1234 1234 1234", cvv: "CVC" },
styles: { number: "font-size: 16px; color: #12263f" },
},
};
</script>Properties
numberFormat: 'prettyFormat' | 'plainFormat' | 'maskedFormat'
How the number is grouped as it is typed. Default prettyFormat.
labels: { number?: string; cvv?: string }
The accessible label of each field. Default: the payment.card.*.label text.
Properties
number(string, optional)cvv(string, optional)
titles: { number?: string; cvv?: string }
The title of each field. Default: the payment.card.*.title text.
Properties
number(string, optional)cvv(string, optional)
placeholders: { number?: string; cvv?: string }
The text shown while a field is empty. Default: the payment.card.*.placeholder text.
Properties
number(string, optional)cvv(string, optional)
styles: { number?: string; cvv?: string; placeholder?: string }
CSS declarations for the text inside each field, as one string: "font-size: 16px".
Properties
number(string, optional)cvv(string, optional)placeholder(string, optional)