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 by LaFinteca. Follow these steps to implement redirect integration:

Create Order and Obtain Redirect URL
- Use the Payment \ Request to create an order
- Utilize the Payment \ Response \ Auth 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 as HTTP header

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.

Recommendations
We 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.
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

Appendix A: iframe sample

<iframe src="https://pay.la-finteca.com/challenge/..."
        allow="clipboard-write">
</iframe>

Appendix B: (Cross-document messenging) Parent

// 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);

Appendix B: (Cross-document messenging) Iframe

// Your `returnUrl` in iframe should call something like this:

window.parent.postMessage({'message': 'Message text from iframe.'}, "*");

Content Security Policy (CSP)

Warning
If 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 as HTTP header

Content-Security-Policy: frame-src https://pay.la-finteca.com

(*) 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.