- Get Started
- Guides
- Integrations
- References
- API Reference
- Basic Payment
- Forex
- Authentication
- Card Account
- Apple Pay
- Virtual Account
- Bank Account
- Token Account
- Customer
- Billing Address
- Merchant Billing Address
- Shipping Address
- Merchant Shipping Address
- Merchant
- Corporate
- Recipient
- Marketplace & Cart
- Airline
- Lodging
- Passenger
- Tokenization
- Recurring Migration
- 3D Secure
- Custom Parameters
- Async Payments
- Webhook notifications
- Job
- Risk
- Response Parameters
- Card On File
- Chargeback
- Result Codes
- Transaction Flows
- Regression Testing
- API Reference
- Support
- Payment Hub
Emetec Payment Button Integration Guide
Emetec Payment Button is a SAQ-A compliant payment-form solution, making it both secure and simple-to-integrate.
There are just three simple steps required to integrate :
How it works
Create the payment form(s)
Display the payment form on your checkout page and the shopper submits the payment information.
1. Prepare the checkout
First, perform a server-to-server POST request to prepare the checkout with the required data, including the order type, amount and currency. The response to a successful request is a JSON string with an id
, which is required in the second step to create the payment form.
For a full list of parameters that can be sent in the prepare checkout request, please see the API Reference
Please note that for a HTTP POST request all the parameters are expected to go into the message body and not into the URL.
2. Create the payment form
To create the payment form you just need to add the following lines of HTML/JavaScript to your page and populating the following variables
- The checkout's
id
that you got in the response from step 1<script src="https://test.emetec.pro/v1/paymentWidgets.js?checkoutId={checkoutId}" integrity="{integrity}" crossorigin="anonymous"> </script>
- The
shopperResultUrl
, which is the page on your site where the customer should be redirected to after the payment is processed and the brands that will be available.<form action="{shopperResultUrl}" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
View the customization guide for more information on customizing the payment form. Please note if you are using SAQ-A compliant credit card form click Enter button on your keyboard to execute the payment.
- Display of multiple card forms is now supported. This feature can be used by merchants for card brand promotion and allows the merchant to group card brands across multiple forms as per the need. To put this feature at work, add any number of <form> tag elements as above. The data-brands attribute of the rendered card forms can be configured as per the merchant need.
<form action="{shopperResultUrl}" class="paymentWidgets" data-brands="VISA"></form>
<form action="{shopperResultUrl}" class="paymentWidgets" data-brands="AMEX MASTER DISCOVER CARTEBANCAIRE"></form>
Brand | Async / sync workflow |
---|
A checkout id expires when a payment has been finalized successfully by user, but not later than 30 minutes. Before it expires, it can be used multiple times in order to retrieve a valid payment form. This can occur for example when a user does not finish a payment and reloads the page, or uses the back button of the browser. Therefore you don't have to generate a new checkout ID in such scenarios. However be aware that such cases can generate multiple transactions in the system, for example one (or more) failed and another one successful, based on the same checkout id.
3. Get the payment status
Once the payment has been processed, the customer is redirected to your shopperResultUrl
along with a GET parameter resourcePath
.
Important: The baseUrl must end in a "/", e.g. "https://test.emetec.pro/".
Then, to get the status of the payment, you should make a GET request to the baseUrl + resourcePath
, including your authentication parameters.
Example of a resourcePath:
resourcePath=/v1/checkouts/{checkoutId}/payment
Once a status response is successful the checkout identifier can't be used anymore. In this case the Transaction Reports endpoint can be used to get the transaction status using the payment id.
IMPORTANT: A throttling rule applies for get payment status calls. Per checkout, it is allowed to send two get payment requests in a minute.
We recommend that you verify the following fields from the Payment Status response, by comparing the returned values with expected:
- ID(s)
- Amount
- Currency
- Brand
- Type
Backoffice operations
Emetec Payment Button is used to securely accept the payment data. Once the payment data has been processed you can perform refunds or other backoffice operations by following our backoffice operations guide.