Checkout

Easiest way to integrate with Epayoo is to use Checkout. This way we will take care of all the hard parts for you and all you need to do is to add single payment button to your website.

Checkout can be customized to meet your needs, but if this is not enough for you, then you can always integrate with Epayoo using custom form where you have complete control over look and feel of your payment form.

Try Checkout by clicking on example payment button below and fill one of our test cards (for example 4242 4242 4242 4242 ) together with any 3-digit CVC and a valid expiration date.

This tutorial will show you how to:

• prepare Checkout request
• charge card using Checkout

Step 1: Prepare Checkout request

To open Checkout first you need to create Checkout request object and sign it with your secret key.

Checkout request object is used to define what you want to do with customer's card. You can either choose to create single charge (by providing amount and currency) or create automatically recurring subscription (by providing identifier of existing subscription plan).

Example below shows how to create and sign simple Checkout request:

$Epayoo = new EpayooGateway('pr_test_tXHm9qV9qV9bjIRHcQr9PLPa');

$checkoutCharge = new CheckoutRequestCharge();
$checkoutCharge->amount(499)->currency('EUR');

$checkoutRequest = new CheckoutRequest();
$checkoutRequest->charge($checkoutCharge);

$signedCheckoutRequest = $Epayoo->signCheckoutRequest($checkoutRequest);

More informations about Checkout requests can be found in API documentation

Step 2: Charge card using Checkout

Once you have signed checkout request you need to add Checkout button to your website.

Opening Checkout using script tag

Fastest and simplest way to add checkout to your website is by using following script tag:

<form action="/your-payment-handler" method="post">
<script src="https://Epayoo.com/checkout.js" class="Epayoo-button" data-key="pu_test_WVMFC9GFuvm54b0uorifKkCh"
data-checkout-request="Y2Y5Y2UyZDgzMzFjNTMxZjgzODlhNjE2YTE4Zjk1NzhjMTM0Yjc4NGRhYjVjYjdlNGI1OTY0ZTc3OTBmMTczY3x7ImNoYXJnZSI6eyJhbW91bnQiOjQ5OSwiY3VycmVuY3kiOiJFVVIifX0="
data-name="Epayoo"
data-description="Checkout example"
data-checkout-button="Payment button">
</script>
</form>

NOTE: script tag must have CSS class set to Epayoo-button.

This script tag will be automatically converted to payment button that will open Checkout when clicked. All configuration is done using data-* attributes and no additional JavaScript code is required.

When Checkout is successfully completed then surrounding form tag will be submitted with Checkout results - following fields will be added to submitted form: EpayooEmail, EpayooCustomerId, EpayooChargeId, EpayooSubscriptionId.

Opening Checkout using JavaScript

If you need more control over opening Checkout or you want to customize handling of Checkout results you can open Checkout using JavaScript:

<script src="https://Epayoo.com/checkout.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
EpayooCheckout.key = 'pu_test_WVMFC9GFuvm54b0uorifKkCh';
EpayooCheckout.success = function (result) {
// handle successful payment (e.g. send payment data to your server)
};

EpayooCheckout.error = function (errorMessage) {
// handle integration errors (e.g. send error notification to your server)
};

$('#payment-button').click(function () {
EpayooCheckout.open({
checkoutRequest: 'Y2Y5Y2UyZDgzMzFjNTMxZjgzODlhNjE2YTE4Zjk1NzhjMTM0Yjc4NGRhYjVjYjdlNGI1OTY0ZTc3OTBmMTczY3x7ImNoYXJnZSI6eyJhbW91bnQiOjQ5OSwiY3VycmVuY3kiOiJFVVIifX0=',
name: 'Epayoo',
description: 'Checkout example'
});
});
});
</script>

<button id="payment-button">Payment button</button>