What is an express checkout button?
Our express checkout buttons are usually placed on the product page in order to raise additional awareness of the payment option being available, and allow the customer to jump straight into the payment process from the product page.
This may also help the user save some time on data entry, as the payment provider may already have the name and address of the customer - so the customer just needs to log into his account with the payment provider after clicking the respective express widget button, and can then reuse the personal data he has already saved with the provider instead of entering it manually.
Express buttons can help you boost the conversion in your shop, as they allow customers a faster option to complete their order.
For which payment options is the express checkout button currently available?
Our widgets are currently only available for Ivy, Apple Pay and Google Pay.
Where can I find the widgets and how to I implement them?
Open the Checkout app in your payever account.
After the Checkout app has opened, click on the tab Channels.
Now click on Button.
You will now land on this screen, which is showing you a preview of the button:
Under Payments you can select for which payment option you would like to use the express button:
Under General, you need to enter the following URLs:
- Success URL - the URL you want the customer to be redirected to after a successful payment (usually that would be an order confirmation page or similar)
- Pending URL (optional) - the URL you want the customer to be redirected to after an unclear/ non-final outcome of the payment (only relevant for some payment options - for Ivy e.g. this is not needed)
- Cancel URL - the URL you want the customer to be redirected to in case he decides to abort the payment process (usually we would recommend to send him back to the product page that he came from)
- Failure URL - the URL you want the customer to be redirected to in case the payment fails (usually we would recommend to send him back to the product page that he came from)
- Notice URL - this is the URL that we will send you status update notifications on whenever a transaction is created or changes status. Those notifications will contain all details of the customer (name, address, email, etc.) and the payment (amount/price, etc.) alongside the current status of the transaction - based on this information, you can then create an order in your shop system after the payment was successfully completed. Read more about our notifications here: https://docs.payever.org/api/payments/v2/getting-started-v2/notifications
When you are done with that, click Get Code in the top left corner.
The generated snippet will look something like this:
<div class="payever-widget-finexp" data-widgetid="98r631cb06-941f-4ad3-801f-34c10eec7385" data-checkoutid="b0hr679c-15eb-5aff-8c98-7751ef9e448d" data-business="815c5953-6881-11e7-9835-35340073a0b6" data-type="button" data-reference="order-id" data-amount="50000.25"></div>
<script>
var script = document.createElement('script');
script.src = 'https://widgets.staging.devpayever.com/finance-express/widget.min.js';
script.onload = function() {
PayeverPaymentWidgetLoader.init(
'.payever-widget-finexp'
);
};
document.head.appendChild(script);
</script>
You will need to copy this code to the appropriate place in your shop - usually this would be your product page template, and replace the values example values in data-amount and order-id with variables of your shop that represent the price of the item and the identifier you want to attach to the payment.
The snippet above (with data-amount and order-id) is the minimum of information that needs to be provided to us in order to create a payment successfully. However, there are many other optional fields that you can populate in order to send us additional information, such as:
- shipping details & shipping fees (you can send a price and name for the shipping option - you can use the name field to describe e.g. the type of shipment or the carrier company)
- shopping cart details (more detailed product information, such as article name, article description, article identifier, price, quantity, etc. can be sent in data-cart). Please note that the total value of your cart (plus shipping fees if there are any) should match the value in data-amount, as a mismatch can cause errors or declines for some of our connected payment providers.
- language and currency (if your shop is operating in multiple countries, you can communicate the customer's language to us by sending a 2-digit ISO country code to data-locale and determine the currency with a 3-digit ISO code in data-cart-value, for instance "de" and "EUR"). If you don't send locale and cart value, we will automatically use the default language and default currency set up in your payever account.
- shipping and billing address (when placing the express button on a product page, you usually won't know the customer's details yet - if however you do have them already, e.g. because the user is logged into a customer account where his details are saved, you can send them along as data-billingaddress and data-shippingaddress)
Below you can find another code snippet example that was modified to contain all the optional details described above:
<div class="payever-widget-finexp"
data-widgetid="98r631cb06-941f-4ad3-801f-34c10eec7385"
data-checkoutid="b0hr679c-15eb-5aff-8c98-7751ef9e448d"
data-business="815c5953-6881-11e7-9835-35340073a0b6"
data-type="button"
data-reference="order-id"
data-amount="100.00"
data-billing_address='
{
"salutation": "",
"first_name": "Test",
"last_name": "Test',
"street": "Feldstrasse 21",
"zip": "12345",
"country": "DE",
"city": "Hamburg"
}'
data-shipping_address='
{
"salutation": "",
"first_name": "Test",
"last_name": "Test',
"street": "Feldstrasse 21",
"zip": "12345",
"country": "DE",
"city": "Hamburg"
}'
data-shippingoption='{"name":"DHL", "price": 10}'
data-cart='
[{
"amount":90,
"description":"Lore Ipsum",
"identifier":"263454",
"quantity":1,
"name":"Sunglasses",
"price":90,
"thumbnail":"http://wordpress59rc.mamp:8888/wp-content/uploads/2022/01/sunglasses-2.jpg",
"unit":"EACH"
}]'
></div>
<script>
var script = document.createElement('script');
script.src = 'https://widgets.staging.devpayever.com/finance-express/widget.min.js';
script.onload = function() {
PayeverPaymentWidgetLoader.init(
'.payever-widget-finexp'
);
};
document.head.appendChild(script);
</script>
If you opt to include any of the non-mandatory additional details in your script, we will forward this information to the payment provider and will also return it to you in the body of each notification that we send to your notice-url.