One-click payment
How it works
One-click payment allows users to pay with familiar and secure native payment methods, e.g., Apple Pay and Google Pay, on supported devices. These payment systems employ additional security mechanisms to prevent unauthorized transactions. To ensure a fast and seamless payment process, additional configuration may be required on your side.
User flow when paying in one click:
- The user goes to the payment UI to make a purchase.
- The user clicks a button to pay with one of the native methods.
- The user is redirected to their electronic wallet and selects a card for payment.
- The user passes authentication procedure with on-device biometrics.
- The user returns to the payment UI that displays the successful payment status.
Apple Pay
To add an option for one-click payment via Apple Pay to the payment UI:
- Create a request to enable this option. To do so:
a. Open your Publisher Account and go to the Support Hub section.
b. Click Submit request.
c. In the window that opens, fill in the fields:
- Summary. For example, One-click payment setup.
- Description. Specify the domain used for opening the payment UI, e.g.,
amazing.store.com
and indicate a one-click payment option: via Apple Pay or both Apple Pay and Google Pay. - Project ID. Select a project ID from the drop-down list. If you want to configure the one-click payment option for multiple projects, specify their IDs in the Description field.
d. Click Send.
- Wait for your domain association file. This step is performed by Xsolla:
- Xsolla registers your domain with Apple.
- Xsolla receives the domain association file from Apple.
- Xsolla emails you the domain association file and provides instructions on where to upload it.
- Depending on the way you open the payment UI, complete the additional configurations described in the table below.
- Reply to Xsolla email and confirm that you have uploaded the domain association file to the specified location.
- Wait for confirmation from Xsolla regarding the successful verification of your domain with Apple.
Additional configurations for opening the payment UI
Payment UI opening option | Additional configurations |
---|---|
New window | No additional configurations required. |
Iframe | Pass your domain in the parent_domain query parameter, e.g., parent_domain=amazing.store.com , and add the allow=”payment” attribute. |
Pay Station Embed script | Update the script to the version 1.5.0 or later and pass your domain in the parent_domain query parameter, e.g., parent_domain=amazing.store.com .The script of the version 1.5.0 supports the allow=”payment” attribute by default. |
- html
<iframe src="https://secure.xsolla.com/paystation4/?token=token_body&parent_domain=amazing.store.com" allow="payment""></iframe>
Example of the payment UI opening with the Pay Station Embed script:
- html
<script>
const options = {
access_token: 'PAYMENT_TOKEN',
lightbox: {
width: '800px',
height: '700px',
},
queryParams: {
parent_domain: 'amazing.store.com'
}
};
const s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://cdn.xsolla.net/payments-bucket-prod/embed/1.5.0/widget.min.js";
s.addEventListener('load', function (e) {
XPayStationWidget.init(options);
}, false);
const head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
Limitations:
- If you pass the settings.ui.is_independent_windows parameter in the token request to open the payment UI in a new tab of an external browser, you can’t enable one-click payment via Apple Pay. However, regardless of whether this parameter is passed, you can accept payments via Apple Pay by opening it in a new tab.
- If you use the SDK, ensure you use the latest version.
- If you use the Pay Station Embed script, it must be the version 1.5.0 or later.
Google Pay
To add an option for one-click payment via Google Pay to the payment UI:
- Depending on the way you open the payment UI, complete the additional configurations:
Payment UI opening option | Additional configurations |
---|---|
New window | No additional configurations required. |
Iframe | Add the allow=”payment” attribute. |
Pay Station Embed script | Update the script to the version 1.5.0 or later. The script of the version 1.5.0 supports the allow=”payment” attribute by default. |
Android WebView | No additional configurations required. |
Custom Tabs | No additional configurations required. |
- html
<iframe src="https://secure.xsolla.com/paystation4/?token=token_body" allow="payment""></iframe>
- Create a request to enable this option. To do so:
a. Open your Publisher Account and go to the Support Hub section.
b. Click Submit request.
c. In the window that opens, fill in the fields:
- Summary. For example, One-click payment setup.
- Description. Specify the way you open the payment UI and indicate a one-click payment option: via Google Pay or both Google Pay and Apple Pay.
- Project ID. Select a project ID from the drop-down list. If you want to configure the one-click payment option for multiple projects, specify their IDs in the Description field.
d. Click Send.
- Wait for confirmation from Xsolla regarding the successful enabling of the one-click payment option in your project.
Limitations:
- If you pass the settings.ui.is_independent_windows parameter in the token request to open the payment UI in a new tab of an external browser, you can’t enable one-click payment via Google Pay. However, regardless of whether this parameter is passed, you can accept payments via Google Pay by opening it in a new tab.
- If you use the Pay Station Embed script, it must be the version 1.5.0 or later.
- Game engines do not support pop-up windows. That is why Google Pay one-click payment is unavailable when using Xsolla SDK for Unity (except for WebGL builds) and Unreal Engine.
- To comply with Brazilian legislation, users have to manually enter their tax identification number (CPF) when paying with Google Pay. That is why Google Pay one-click payment can’t be enabled to accept payments in Brazil.
- For WebGL builds in Unity, ensure you use the latest SDK version.
Found a typo or other text error? Select the text and press Ctrl+Enter.