Inline creates a secure and simple way for you to collect payments quickly.
Inline integrates into your existing checkout page to create a seamless customer
experience. A card entry form will be injected into your existing website. You
can customise the look of the form using standard CSS.
Your system never touches the actual card data, we do all the heavy lifting.
Before we get into the details of how this all comes together, why not give it a test run? We have built a fake store so you can give it a try. Click the Pay button in the store, use the test card provided, and we will take care of the rest.
Add an event listener for when your customer submits their card information and use createToken to
tokenize that information.
// Run our code when your form is submitted
var form =document.getElementById('payment-form');
// This is the yocoForm object we created earlier with the sdk
var errorMessage = result.error.message;
// Show the error message however you like
var token = result.id;
// You must now pass this token to your back-end and charge it
Want to learn more about tokens and tokenization?
When card details need to be secured they are sent to our systems, and a token is returned that represents the card details, this is a process called
tokenization. Tokenization is the industry standard process for protecting sensitive data by replacing it with an algorithmically generated number called
a token. At Yoco we use tokenization to protect our customers' confidential payment information from fraudsters. Payment information is substituted with
randomly generated numbers — the tokens — and passed to us over the internet. Using the token, we can locate the payment details from our secure vault and
complete the request without the need to transfer any sensitive data.
You must pass this token to your server, which must call the Charge API to capture the payment.
The Charge API should only be called from your server. This flow ensures the security of your payments and provides a trusted result to your server.
We have kept our walkthrough simple however you have a lot of control over the appearance of your form - from the
colours and styling, to whether you want to display a single input or a several. Check out our customization guide for
more details and examples.