The Yoco Popup offers you the quickest and easiest way to accept online card payments. Simply include our JavaScript library, connect it to your button, and you are ready to accept payments!

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.


1. Add Popup to your site

Copy this Popup snippet and paste it into your front-end HTML. You should replace the publicKey with your own public key - see Integration Keys.

<!-- Include the Yoco SDK in your web page -->
<script src="https://js.yoco.com/sdk/v1/yoco-sdk-web.js"></script>
<!-- Create a pay button that will open the popup-->
<button id="checkout-button">Pay</button>
var yoco = new window.YocoSDK({
publicKey: 'pk_test_ed3c54a6gOol69qa7f45',
var checkoutButton = document.querySelector('#checkout-button');
checkoutButton.addEventListener('click', function () {
amountInCents: 2799,
currency: 'ZAR',
name: 'Your Store or Product',
description: 'Awesome description',
callback: function (result) {
// This function returns a token that your server can use to capture a payment
if (result.error) {
const errorMessage = result.error.message;
alert("error occured: " + errorMessage);
} else {
alert("card successfully tokenised: " + result.id);
// In a real integration - you would now pass this chargeToken back to your
// server along with the order/basket that the customer has purchased.

2. 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.