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
  • 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:

  1. Size: Ensure the iframe fits in a 320px x 568px square for compatibility across devices.
  2. Permissions-Policy: Use the clipboard-write permission in the iframe to enable users to copy information from it.
  3. 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
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.

Are there any inquiries still outstanding?

Our team of experts is available 24/7 to answer all your questions. Feel free to reach out to us at any time, and we will be happy to help you address any inquiries or issues. Your comfort and satisfaction are our priority.
Need help?Contact support

Powered by LA FRAMBUESA & Markdoc