Checkout

Demo

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.


Integration

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.

  • Simple integration provides button that opens Checkout and after successful payment will submit your payment form with Checkout results added as hidden input fields
  • Custom integration allows you to open Checkout from JavaScript and handle Checkout results in JavaScript callback function

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://securionpay.com/checkout.js"
		class="securionpay-button"
		data-key="pu_test_WVMFC9GFuvm54b0uorifKkCh"
		data-checkout-request="Y2Y5Y2UyZDgzMzFjNTMxZjgzODlhNjE2YTE4Zjk1NzhjMTM0Yjc4NGRhYjVjYjdlNGI1OTY0ZTc3OTBmMTczY3x7ImNoYXJnZSI6eyJhbW91bnQiOjQ5OSwiY3VycmVuY3kiOiJFVVIifX0="
		data-name="SecurionPay"
		data-description="Checkout example"
		data-checkout-button="Payment button">
	</script>
</form>

NOTE: script tag must have CSS class set to securionpay-button to work correctly.

Configuration parameters

These parameters can be added to your <script> tag to configure and customize Checkout.

Required
ParameterDescription
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.
Optional
ParameterDescription
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.

Result parameters

These parameters are added to you payment <form> tag after successful payment.

ParameterDescription
securionpayEmail Email address that was provided by user in Checkout.
securionpayCustomerId 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.
securionpayChargeId Identifier of charge object that was created by Checkout.
securionpaySubscriptionId 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://securionpay.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 () {
		SecurionpayCheckout.key = 'pu_test_WVMFC9GFuvm54b0uorifKkCh';
		SecurionpayCheckout.success = function (result) {
			// handle successful payment (e.g. send payment data to your server)
		};
		SecurionpayCheckout.error = function (errorMessage) {
			// handle integration errors (e.g. send error notification to your server)
		};
	
		$('#payment-button').click(function () {
			SecurionpayCheckout.open({
				checkoutRequest: 'Y2Y5Y2UyZDgzMzFjNTMxZjgzODlhNjE2YTE4Zjk1NzhjMTM0Yjc4NGRhYjVjYjdlNGI1OTY0ZTc3OTBmMTczY3x7ImNoYXJnZSI6eyJhbW91bnQiOjQ5OSwiY3VycmVuY3kiOiJFVVIifX0=',
				name: 'SecurionPay',
				description: 'Checkout example'
			});
		});
	});
</script>

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

Configuration of SecurionpayCheckout

Before you can use SecurionpayCheckout JavaScript API you need to first configure it by providing following parameters:

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

Opening Checkout

To open Checkout you need to call SecurionpayCheckout.open() method. First argument of that method should be a configuration object with attributes:

Required
ParameterDescription
checkout-request Checkout request signed with your secret key.
For more information see API documentation.
Optional
ParameterDescription
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
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.
email 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.

Handling results

To handle successful payment in Checkout you need to set SecurionpayCheckout.success to your callback function. That function will be called with result object that will contain following attributes:

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

Supported languages

Following languages are supported by Checkout:

  • bg - Bulgarian
  • cs - Czech
  • da - Danish
  • de - German
  • el - Greek
  • en - English
  • es - Spanish
  • et - Estonian
  • fi - Finnish
  • fr - French
  • hr - Croatian
  • hu - Hungarian
  • it - Italian
  • lt - Lithuanian
  • lv - Latvian
  • nl - Dutch
  • pl - Polish
  • pt - Portuguese
  • ro - Romanian
  • ru - Russian
  • sk - Slovak
  • sl - Slovenian
  • nl-BE - Dutch/Belgium