Inline

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.

Try it out

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.
Your store

Integration

1. Setup your form

To make the YocoSDK available on your webpage, add this script tag to the head of your HTML page: First, include the Yoco SDK in the head section of your website HTML:

<head>
<script src="https://js.yoco.com/sdk/v1/yoco-sdk-web.js"></script>
</head>
It is important that you always load the script directly from https://js.yoco.com to ensure you are always on a secure and working version of the SDK.

To add our form to your page, you will need to create an empty DOM container with a unique ID in your payment form wherever you want the form to be inserted.

For example:

<form id="payment-form" method="POST">
<div class="one-liner">
<div id="card-frame">
<!-- Yoco Inline form will be added here -->
</div>
<button id="pay-button">
PAY ZAR 24.99
</button>
</div>
<p class="success-payment-message" />
</form>

Next you need to create an instance of the YocoSDK, then mount the form on the page with the following JavaScript:

<script>
// Replace the supplied `publicKey` with your own.
// Ensure that in production you use a production public_key.
var sdk = new window.YocoSDK({
publicKey: 'pk_test_ed3c54a6gOol69qa7f45'
});
// Create a new dropin form instance
var inline = sdk.inline({
layout: 'field',
amountInCents: 2499,
currency: 'ZAR'
});
// this ID matches the id of the element we created earlier.
inline.mount('#card-frame');
</script>

We have a number of layouts available. The field layout creates a single inline field, however you should also try the basic layout and other layouts to see what works best for you on your form. Check out our customization guide for more details and examples.

2. Create a payment token

Add an event listener for when your customer submits their card information and use createToken to tokenize that information.

<script>
// Run our code when your form is submitted
var form = document.getElementById('payment-form');
var submitButton = document.getElementById('pay-button');
form.addEventListener('submit', function (event) {
event.preventDefault()
// Disable the button to prevent multiple clicks while processing
submitButton.disabled = true;
// This is the inline object we created earlier with the sdk
inline.createToken().then(function (result) {
// Re-enable button now that request is complete
// (i.e. on success, on error and when auth is cancelled)
submitButton.disabled = false;
if (result.error) {
const errorMessage = result.error.message;
errorMessage && alert("error occured: " + errorMessage);
} else {
const token = result;
alert("card successfully tokenised: " + token.id);
}
}).catch(function (error) {
// Re-enable button now that request is complete
submitButton.disabled = false;
alert("error occured: " + error);
});
});
// Any additional form data you want to submit to your backend should be done here, or in another event listener
</script>
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.

3. Capture the payment

Once a customer has completed a payment on your website, your front-end JavaScript code will receive a callback containing a charge token. You must pass this token to your server, which must call the Charge API to capture the payment.

Make Inline your own

Customization

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.

Configuration options

You'll find a list of all the possible configuration options in our Inline reference guide.