Payment Information

in this document we are going to show you how to collect, store, and use payment information on invoiced through your own website or application introduction when implementing invoiced into your app or website you often want control over the billing and payment uis in order to provide customers with a seamless experience invoiced v2 tokenization allows you to collect and vault payment information using your own forms while still relying on invoiced to manage payments as a result of letting invoiced handle payment information you can also enjoy simplified pci compliance the way that it works is that within your customer's web browser you can tokenize your customer's payment information that can later be passed to our api in order to save the payment information for future billing or payments the v2 tokenization system is compatible with flywire payments and has been approved by flywire security the key to a secure implementation is to use the invoiced v2 tokenization scheme tokenization gives you a randomly generated token id that you can pass to your servers that references the payment information collected the benefit of this approach is to prevent you from directly handling sensitive payment information with v2 tokenization, the payment information is sent to invoiced on the client side using our javascript library through secure iframe containers when the payment information is sent in you receive a short lived, single use token that references the captured payment information, which can be a card or bank account you can then use that payment info token in our api to vault it on a customer's account or use it to process a payment it's important to consider that payment info tokens will only work with your invoiced account and last for a maximum of 2 hours once a token is used it cannot be re used as such you should not be storing tokens on your end invoiced v2 tokenization guide overview this guide covers setting up invoiced v2 tokenization for flywire payments the v2 implementation is compatible with flywire payments and has been approved by flywire security choose your path first time setup? → follow the docid\ rmv l uhhmqgjqvgdmd9d section migrating from v1? → follow the docid\ rmv l uhhmqgjqvgdmd9d section first time setup if you're implementing invoiced tokenization for the first time, follow these steps step 1 provide domain allowlist for security, provide the flywire invoiced team with a complete list of domains where you'll collect payment information your main website domain any subdomains (e g , checkout yourwebsite com ) example domains to include https //yourwebsite com https //www yourwebsite com https //checkout yourwebsite com step 2 get your credentials contact the flywire invoiced team to receive publishable key unique to your company client key for flywire invoiced integration domain allowlist setup you'll need to provide your domains (see step 1) step 3 add the script tag add the invoiced v2 script to your html page ⚠️ important the crossorigin="anonymous" attribute is required step 4 configure invoiced initialize invoiced with your credentials invoiced create( { publishablekey "your publishable key", // from flywire invoiced team clientkey "your client key", // from flywire invoiced team payfacenv "live", invoicedurl "https //tknz invoiced com", }, { styles styleobject, // your styling configuration }, handlecardtoken, // success handler for card tokenization handleachtoken // success handler for ach tokenization ); migration from v1 if you're upgrading from invoiced v1, here's what you need to change what changes domain allowlist provide your domains to the flywire invoiced team (see docid\ rmv l uhhmqgjqvgdmd9d ) get new credentials contact the flywire invoiced team for new publishable key new client key confirmation that your domains are allowlisted script url update to the v2 endpoint configuration update your invoiced create() config invoiced create( { publishablekey "your new publishable key", // ← get new key from flywire invoiced team clientkey "your client key", // ← get new key from flywire invoiced team payfacenv "live", invoicedurl "https //tknz invoiced com", // ← updated url (was different in v1) }, // rest of your config stays the same ); what stays the same ✅ code structure your existing implementation structure remains unchanged ✅ styling configuration your styleobject works exactly the same ✅ event handlers your success/error handlers don't need changes ✅ tokenization methods invoiced card tokenize() and invoiced bankaccount tokenize() work the same ✅ form structure your html form structure remains identical complete example here's a complete working example invoiced v2 tokenization payment information card number expiry date cvv/cvc submit payment testing limitations ⚠️ important full end to end testing is not available for v2 tokenization what you can verify ✅ script loading confirm the new script loads without console errors ✅ form rendering verify payment form fields display correctly ✅ domain setup check that you can click into payment fields (indicates proper cors/allowlisting) what you cannot do ❌ complete tokenization no sandbox environment supports full token generation ❌ test card numbers standard test cards will not work with v2 ❌ end to end flow cannot complete full payment flow until production why this limitation exists invoiced v2 does not support flywire payments in sandbox environments, so testing must be done directly in production recommendation carefully follow all setup steps in this guide verify your domain allowlisting with the flywire invoiced team before going live have your development team ready to troubleshoot quickly if issues arise in production troubleshooting common issues 1\ form fields won't accept input cause cors error your domain isn't allowlisted solution contact the flywire invoiced team to add your domain to the allowlist 2\ 500 error when submitting cause wrong credentials or domain not allowlisted solution verify your publishable key and client key with the flywire invoiced team 3\ script won't load cause missing crossorigin="anonymous" attribute solution add the crossorigin attribute to your script tag getting help if you encounter issues check the browser console for error messages verify your credentials are correct for your environment confirm your domain is in the allowlist provided to the flywire invoiced team contact the flywire invoiced team with specific error messages setup checklist added script tag with v2 url and crossorigin="anonymous" attribute provided complete domain list to the flywire invoiced team received publishable key from the flywire invoiced team received client key from the flywire invoiced team updated configuration with credentials verified domain allowlisting is complete tested form rendering and field interaction updated any documentation or deployment scripts support for technical support contact the flywire invoiced support team include browser console errors in any support requests specify your current environment (first time setup or migration) need help? this setup should be straightforward, but if you run into issues, don't hesitate to reach out to the flywire invoiced team for assistance