# Account Funding

Enabling customers to fund their account has never been easier with our payment methods API and embeddable UI components.

Everything in this section revolves around the payment methods concept. It allows the set-up of recurring payments; of onboarding and charging cards; and making one-off anonymous payments.

Our prebuilt checkout pages and embeddable UI components are built so you don't have to worry about PCI compliance. We take care of everything in a transparent and secure manner by leveraging strong and open internet security standards like signed JWTs and iframe.

# Listing payment methods

Saved cards will appear as payment methods that you can easily pull via the API. Depending on whether a payment method belongs to an individual or anonymous user (Guest), two API endpoints are available:

GET /individuals/:id/payment_methods
GET /guests/:id/payment_methods

Example payment methods listing request:

GET /v3/guests/9a792adc-f4a2-4089-8e53-f3b0c140fc12/payment_methods

Content-Type: application/json
Authorization: Bearer <access_token>

Response:

HTTP 200 OK

{
  "data": [
    {
      "id": "c405c5b0-bd49-4472-9b12-e36b04283358",
      "type": "card",
      "details": {
        "brand": "visa",
        "exp_month": "12",
        "exp_year": "25",
        "last4": "0337"
      },
      "created_at": "2021-07-27T10:39:14+02:00"
    }
  ],
  has_more: false,
}

# Payment method flow

This section describes the common set of steps needed in order to:

Save a card as a payment method
Accept a one-off card payment
Create a recurring payment

The flow begins on the backend by initiating a payment method consent to get a secret token. After that, the token needs to be passed to the front-end into Intergiro's 3D SDK to complete the process.

Here one needs to decide whether there's the need to make a one-off charge or set up a recurring payment. If so, make sure to include charge details specifing the destination account ID the money should land to.

In cases where you only need to save the card, the charge section can be skipped.

POST /v3/individuals/b3c8b592-daff-45cc-95ba-1741a4105b23/payment_methods

Content-Type: application/json
Authorization: Bearer <access_token>

{
  "charge": {
    "amount": 1000,
    "currency": "EUR",
    "account_id": "34df9d62-8f66-4b78-b107-41dd3fb36e11"
  },
  "type": "card"
}

Response:

HTTP 200 OK

{
  "consent": {
    "id": "e30b2da8-879d-4d9d-b9f9-7c461500245f",
    "status": "pending"
  }
}

Once the charge consent is created, it needs to be explicitly requested for it to be used in the next confirmation step.

Use the following API endpoint with the consent.id from the previous response:

POST /v3/consents/e30b2da8-879d-4d9d-b9f9-7c461500245f

Content-Type: application/json
Authorization: Bearer <access_token>

Response:

HTTP 200 OK

{
  "method": {
    "redirect_url": "https://3d.staging.intergiro.tech/...",
    "token": "YW55IGNhcm5hbCBwbGVhc3Vy",
    "expires_at": "2021-07-27T12:00:33+02:00"
  }
}

Depending on your preferences, two different payment confirmation methods exist. For example redirect_url can be used for the prebuilt checkout experience and token is something that is needed as part of the custom payment flow.

# Custom payment flow

For those interested in providing a seamless user experience, there's a way to embed Intergiro's custom UI components into your app.

TIP

Currently the components are web-based, but you can still use them on the mobile in a WebView.

# Step 1: Include 3D SDK

The first steps require adding the Intergiro 3D SDK library to your website.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My checkout</title>
  <script src="https://3d-sdk.staging.intergiro.tech/v1/"></script>
  <script type="text/javascript">
    const intergiro = Intergiro3D('<public key>')

    fetch('/create-charge-consent', {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        amount: 15
      })
    })
      .then(result => result.json())
      .then(({ token }) => {

      })
  </script>
</head>
<body>
</body>
</html>

# Step 2: Initialize UI components

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My checkout</title>
  <script src="https://3d-sdk.staging.intergiro.tech/v1/"></script>
  <script type="text/javascript">
    const intergiro = Intergiro3D('<public key>')

    fetch('/create-charge-consent', {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        amount: 15
      })
    })
      .then(result => result.json())
      .then(({ token }) => {
        const components = intergiro.components()     // initialize components library
        const card = components.get('card-input')     // create card input component
        const container = document.getElementById('card-input')
        card.mount(container)                         // mount card component onto the page

      })
  </script>
</head>
<body>
  <form>
    <div id="card-input">
    </div>
    <button type="submit">Make payment</button>
  </form>
</body>
</html>

# Step 3: Confirm payment method

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My checkout</title>
  <script src="https://3d-sdk.staging.intergiro.tech/v1/"></script>
  <script type="text/javascript">
    const intergiro = Intergiro3D('<public key>')

    fetch('/create-charge-consent', {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        amount: 15
      })
    })
      .then(result => result.json())
      .then(({ token }) => {
        const components = intergiro.components()
        const card = components.get('card-input')
        const container = document.getElementById('card-input')
        card.mount(container)

        const button = document.getElementsByTagName('button')[0]
        button.onclick = function(e) {
          e.preventDefault()
          intergiro
            .confirmPaymentMethod(token, {
              payment_method: {
                card: card,
              }
            })
            .then(result => {
              if (result.error) {
                console.error(result.error)
              } else {
                console.log(result.data)
              }
            })
        }
      })
  </script>
</head>
<body>
  <form>
    <div id="card-input">
    </div>
    <button type="submit">Make payment</button>
  </form>
</body>
</html>

# Save card as a payment method

You can give user the ability to save card for later use by specifying a save flag when confirming:

intergiro.confirmPaymentMethod(token, {
  payment_method: {
    card: card,
  },
  save: true,
})
.then(result => {
  if (result.error) {
    console.error(result.error)
  } else {
    console.log(result.data)
  }
})

This will make this card available in payment methods listing API.

TIP

Only one payment method can be saved for each individual or guest.

If you wish to add another payment method, you must first delete the previous one.

# Customization

Prebuilt 3D experience as well as 3D SDK elements can be customized to better match your brand.

Use 3D Theme builder app (opens new window) that we've built for you to play around with customization parameters and share the link with the results with your account manager to have the settings applied to all your end-user prebuilt experience.

3D SDK embeddable elements can also be customized. See example usage below:

const components = intergiro.components()

const theme = {
  layout: 'standard',
  fontImport: 'Poppins:wght@400',
  style: {
    gap: '1rem',
    fontFamily: 'Poppins, Menlo',
    fontWeight: '400',
    text: {
      background: '#E0E7ED',
      color: '#070808',
    },
    border: {
      color: 'black',
      width: '2px',
      radius: '5px',
    },
  },
}

const card = components.get('card-input', theme)

theme parameter gets passed as a second argument to the components factory.

Below you can find element-specific customization parameters available:

# `card-input`

Property	Type	Description
`layout`	`row`, `column` or `standard`
`fontImport`	`string`	Google font
`style.text.background`	css color	Text background color
`style.text.color`	css color	Text color
`style.border.color`	css color	Border color
`style.border.width`	css distance in px or relative units	Border width
`style.border.style`	css `border-style`, ex. `solid`	Border style
`style.border.radius`	css `border-radius` in px, ex. `25px`	Border radius
`style.fontFamily`	`string`	Font family
`style.dangerColor`	css color	Danger color
`style.gap`	css distance in px or relative units	Gap width
`style.background`	css color	Background color

# Optimizations

Loading components from our 3D SDK might take a moment. Luckily, there are optimizations that we enabled, so that the component is displayed right away when user should see it.

Before your user reaches page where our card components should be displayed, you can prepare a container where our component will be mounted.

Later you can use mount() as in the example below to quickly display previously prepared components.

const components = intergiro.components();
const container = document.getElementById("card-input-container");
const cardInput = components.get("card-input", {}, container);

...

cardInput.mount();

This will significantly improve loading time for your users.

← Payments Cards as a Service →

# Account Funding

# Listing payment methods

# Payment method flow

# Generate charge consent

# Custom payment flow

# Step 1: Include 3D SDK

# Step 2: Initialize UI components

# Step 3: Confirm payment method

# Save card as a payment method

# Customization

# card-input

# Optimizations

# `card-input`