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.
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:
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:
<formid="payment-form"method="POST">
<divclass="one-liner">
<divid="card-frame">
<!-- Yoco Inline form will be added here -->
</div>
<buttonid="pay-button">
PAY ZAR 24.99
</button>
</div>
<pclass="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 =newwindow.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.
// 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.
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.
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.