To open Checkout you need to create Checkout request object and sign it with your secret key. You can either create Checkout request dynamically on you backend each time page with Checkout is being displayed or you can pre-create needed Checkout requests and hardcode them in your website.
More information about Checkout requests can be found in API documentation
Once you have your Checkout request there are two ways to integrate with checkout: simple and custom.
The simple integration uses <script>
tag that must be added inside your payment
<form>
tag.
That script tag is replace with payment button that will open Checkout when clicked.
After successful payment Checkout results will be added to surrounding <form>
as hidden <input>
tags and that form will be automatically submitted
along with any other existing <input>
tags.
<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
to work correctly.
These parameters can be added to your <script>
tag to configure and customize Checkout.
Parameter | Description |
---|---|
data-key | Your public key (either live or test). |
data-checkout-request |
Checkout request signed with your secret key.
For more information see API documentation. |
Parameter | Description |
---|---|
data-image |
Relative (or absolute) URL to image of your brand or product.
Recommended image size is 70×70 pixels. Recommended image types are .png, .jpeg and .gif. |
data-name | Name of your company or website. |
data-description | Description of the product that is being sold. |
data-payment-button |
Text that will appear on payment button in Checkout.
If text contains {{amount}} then it will be replaced by charge amount.
Otherwise charge amount will be appended at the end.
|
data-email | If provided that it will be used to pre-fill email field in Checkout. |
data-checkout-button | Text that will appear on button that will be added on your website. |
data-class | Value of HTML "class" attribute that will be set on payment button on your website. |
data-locale |
Language that will be used in Checkout. If not provided then checkout will be displayed in user's preferred language (defined in his browser).
List of supported languages can be found here. |
data-shipping-address |
If set to true then Checkout will collect customer's shipping address.
|
data-billing-address |
If set to true then Checkout will collect customer's billing address.
|
These parameters are added to you payment <form>
tag after successful payment.
Parameter | Description |
---|---|
Email address that was provided by user in Checkout. | |
CustomerId |
Identifier of customer object that was used by Checkout.
Can be either customer that was provided in Checkout Request or a new customer that was created by Checkout. |
ChargeId | Identifier of charge object that was created by Checkout. |
SubscriptionId |
Identifier of subscription object that was created by Checkout.
Only present if Checkout Request was configured to create recurring subscription. |
The custom integration allows you to interact with Checkout directly from 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>
Before you can use EpayooCheckout
JavaScript API you need to first configure it by providing following parameters:
Parameter | Description |
---|---|
key | Your public key (either live or test). |
success |
Callback function that will be called after successful payment in Checkout.
It should take single result parameter that is described here.
|
error |
Callback function that will be called to report any configuration errors.
It should takes single errorMessage parameters that will be a string with description of error.
|
To open Checkout you need to call EpayooCheckout.open()
method.
First argument of that method should be a configuration object with attributes:
Parameter | Description |
---|---|
checkout-request |
Checkout request signed with your secret key.
For more information see API documentation. |
Parameter | Description |
---|---|
image |
Relative (or absolute) URL to image of your brand or product.
Recommended image size is 70×70 pixels. Recommended image types are .png, .jpeg and .gif. |
name | Name of your company or website. |
description | Description of the product that is being sold. |
paymentButton |
Text that will appear on payment button in Checkout.
If text contains {{amount}} then it will be replaced by charge amount.
Otherwise charge amount will be appended at the end.
|
If provided that it will be used to pre-fill email field in Checkout. | |
locale |
Language that will be used in Checkout. If not provided then checkout will be displayed in user's preferred language (defined in his browser).
List of supported languages can be found here. |
shippingAddress |
If set to true then Checkout will collect customer's shipping address.
|
billingAddress |
If set to true then Checkout will collect customer's billing address.
|
To handle successful payment in Checkout you need to set EpayooCheckout.success
to your callback function.
That function will be called with result
object that will contain following attributes:
Parameter | Description |
---|---|
result.email | Email address that was provided by user in Checkout. |
result.customer.id |
Identifier of customer object that was used by Checkout.
Can be either customer that was provided in Checkout Request or a new customer that was created by Checkout. |
result.charge.id | Identifier of charge object that was created by Checkout. |
result.subscription.id |
Identifier of subscription object that was created by Checkout.
Only present if Checkout Request was configured to create recurring subscription. |
Following languages are supported by Checkout:
bg
- Bulgariancs
- Czechda
- Danishde
- Germanel
- Greeken
- Englishes
- Spanishet
- Estonianfi
- Finnishfr
- Frenchhr
- Croatianhu
- Hungarianit
- Italianlt
- Lithuanianlv
- Latviannl
- Dutchno
- Norwegianpl
- Polishpt
- Portuguesero
- Romanianru
- Russiansk
- Slovaksl
- Sloveniannl-BE
- Dutch/BelgiumCopyright @2019 - 2024 ePAYoo | Pirsum Services Limited