Guides

Debit/Credit Card Capture

If you are using the React component or embed, this will automatically be handled for you.


While some payment methods can be added directly via API, others like credit cards and Plaid require you to host a secure component that allows Mercoa to collect this information from your users in a PCI compliant manner.

Mercoa makes this easy by providing a secure component that you can embed in your app. This component will allow your users to add and manage payment methods in your app.

Generate a user token

Before you can embed the component, you will need to generate a user token. This token will be used to authenticate the user in the iFrame.

Follow this guide to learn how to generate a user token.

Embed the Component

Once you have a user token, you can embed the component in your app.

Add a card button

1<script>
2  // Listen for messages from the iFrame. If the payment method is added successfully, the iFrame will send a message with the payment method response.
3  window.addEventListener('message', function (event) {
4    if (event.origin === 'https://mercoa.com') {
5      console.log(event.data) // PaymentMethodResponse object
6    }
7  })
8</script>
9<iframe
10  src="https://mercoa.com/embedded/add-card/button?token=<USER_TOKEN>"
11  width="100%"
12  height="100%"
13  style="border: none;"
14></iframe>

Open the bank account popup with your own button

1<script>
2  // Listen for messages from the iFrame. If the payment method is added successfully, the iFrame will send a message with the payment method response.
3  window.addEventListener('message', function (event) {
4    if (event.origin === 'https://mercoa.com') {
5      console.log(event.data) //PaymentMethodResponse object
6      window.mercoaBankPopup.close() // Close the popup
7    }
8  })
9</script>
10<button
11  onClick="function(){
12  window.mercoaBankPopup = window.open(
13    '/embedded/add-card/popup?token=' + <USER_TOKEN>,
14    'popup',
15    'width=600,height=600',
16  )
17}"
18>
19  Your button text
20</button>

All payment methods screen

1<iframe
2  src="https://mercoa.com/embedded/payment-methods?token=<USER_TOKEN>"
3  width="100%"
4  height="100%"
5  style="border: none;"
6></iframe>
Built with