Introduction
Integrating a payment solution into your website or application is a crucial step in facilitating smooth and secure transactions for your users. This comprehensive guide will walk you through three common integration methods: redirect, iframe, and on-site handling.
Redirect integration
Redirect integration directs users to a payment page hosted. Follow these steps to implement redirect integration:
- Create Order and Obtain Redirect URL
- Use the Payment \ Request to create an order
- Utilize the Response to obtain the
redirectUrl
- Redirect User to Payment Page
- Direct the user to the obtained redirectUrl to initiate the payment process
- Optionally, handle the user's return from the payment page for post-payment actions
Referrer-Policy
We enforce a strict Referrer Policy to ensure the normal functioning and security of our payment page.
Only requests originating from approved origins are allowed access to the payment page. This policy helps prevent unauthorized access and protects user data during transactions.
We recommend using at least strict-origin-when-cross-origin
, which is a reasonable default policy for enhanced security.
Referrer-Policy: strict-origin-when-cross-origin
For more information, you can refer to the Referrer-Policy documentation.
Iframe integration
Iframe integration embeds the payment provider's payment form directly within your website.
RecommendationsWe strive to provide the best possible experience for customers. So we recommend adhering to the following guidelines:
- Size: Ensure the iframe fits in a 320px x 568px square for compatibility across devices.
- Permissions-Policy: Use the
clipboard-write
permission in the iframe to enable users to copy information from it.- Post-Payment Actions: Handle post-payment actions effectively, such as updating transaction statuses, to ensure a smooth user experience.
Follow these steps to implement iframe integration:
- Create Order and Obtain Redirect URL:
- Follow the steps in redirect integration to create an order and obtain the
redirectUrl
- Ensure that the same Referrer-Policy requirements as in redirect integration are applied to the iframe integration for consistent security measures.
- Follow the steps in redirect integration to create an order and obtain the
- Embed Iframe:
- Use the provided iframe code snippet on your checkout page where users enter payment information
- Optionally, handle completion the user's actions within the iframe
- Provide specific iframe-specific
returnUrl
to handle post-payment actions, for instance, using Cross-document messaging
- Provide specific iframe-specific
<iframe src="https://redirectUrl.domain/challenge/..."allow="clipboard-write"></iframe>
// Parent window should listen for messages from iframe:window.addEventListener("message", function onIframeDone(event) {console.log("I'm done!", event.data);alert(event.data.message);}, false);
// Your `returnUrl` in iframe should call something like this:window.parent.postMessage({'message': 'Message text from iframe.'}, "*");
Content Security Policy (CSP)
WarningIf you are not using CSP or have not experienced CSP-related issues, you can skip this section.
If your website has a Content Security Policy that restricts iframe sources (frame-src
directive),
make sure to include the payment provider's domain in the allowed sources to allow the iframe to load properly.
Content-Security-Policy: frame-src https://redirectUrl.domain
(*) In your case domain may be different, please contact us if you have any questions.
For more information, you can refer to the Content-Security-Policy documentation.
On-site handling
On-site handling integration involves building a custom payment form on your website.
Refer to the specific Payment API documentation for detailed instructions on implementing on-site handling.
This guide provides developers with a clear path to integrating payment solutions seamlessly into their applications, enhancing user experience and security.