Popup

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.

Integration

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="pay-button">Pay</button>
<script>
// Initialise the Yoco SDK with your public key
var yoco = new window.YocoSDK({
publicKey: 'pk_test_ed3c54a6gOol69qa7f45'
});
// Trigger this code when your button is clicked
var checkoutButton = document.querySelector('#pay-button');
checkoutButton.addEventListener('click', function () {
// Show the Yoco Popup
yoco.showPopup({
amountInCents: 2799,
currency: 'ZAR',
name: 'Your Store or Product',
callback: function (chargeToken) {
// This function returns a token that your server can use to capture a payment
alert(`Card successfully tokenized ${chargeToken.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.
},
onClose: function () {
alert('Popup closed')
// In a real integration - you would possibly redirect the user to the checkout page
}
});
});
</script>

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.

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.
curl https://online.yoco.com/v1/charges/ \
-u sk_test_960bfde0VBrLlpK098e4ffeb53e1 \
-d token=tok_test_DjaqoUgmzwYkwesr3euMxyUV4g \
-d amountInCents=2799 \
-d currency=ZAR

Example Response

{
"source": {
"id": "card_Aj9RzUkGWYKDaMt0M1s5XbC2zA",
"brand": "visa",
"maskedCard": "**** **** **** 4242",
"expiryMonth": 4,
"expiryYear": 2024,
"fingerprint": "09634a43594b4af0eae0a74be89df8545b29af0d",
"object": "card",
"country": "GB"
},
"object": "charge",
"id": "ch_awLYujNDMwzorIBO1iQkrikLq",
"status": "successful",
"currency": "ZAR",
"amountInCents": 1,
"liveMode": false,
"metadata": {"your metadata object":"that you sent us"}
}