HomeGuidesFAQsAPI ReferenceChangelog
Guides

Collecting payment information (Hint Payments)

Suggest Edits

Hint supports 2 ways to gather payment information: manual entry of card and bank information, or verifying bank information with bank login data. In order to collect payment information you will use Rainforest's Payment Component & Hint's Payment Method Setup . It will create the input fields and/or login to the bank, tokenize the information and return it via javascript.

📘

At a high level

You will need to use our setup endpoint in order to create a Setup Intent. The setup intent response will return a payment_method_config_id, session_key and allowed_methods which you can use to instantiate the Rainforest Payment Component. You can then have your customers fill out their credit card or bank account details directly with Rainforest, and Rainforest returns a rainforest_id after the payment method is created and the setup intent is confirmed successfully. This rainforest_id is needed to create a PaymentMethod in Hint.

We will walk through each of these individual steps below.

Step 1: Creating a Setup Intent using Hint's setup endpoint

Full documentation: POST /setup

The /setup endpoint is a POST that accepts the following required attributes:

accepts_bank boolean

  • true will allow the elements iframe to show the option of adding bank account
  • false will only show the card option in the iframe

user_is_owner boolean

  • true should be used if the patient is the primary user of the form, since they will be given the option to log in to their bank directly.
  • false used when filling the elements iframe form on behalf of the patient

You will need to use payment_method_config_id, session_keyandallowed_methods returned in the response for the following steps.

Step 2: Using the retuned data from the SetupIntent to instantiate the Rainforest's Payment Component and confirm the SetupIntent created in Step 1

The goal here is to provide a UI form for your customers to enter their credit card or bank account information directly to Rainforest. Rainforest offers a customizable form using their Payment Element embeddable UI component. A form example can be viewed here: https://static.rainforestpay.com/demo-sandbox/studio.html?type=payment

After you create the SetupIntent, attach a payment method and confirm it to collect any required permissions to charge the payment method later.

We have provided a sample example of how we use it on the Hint platform below:

// Test card/bank numbers: https://docs.rainforestpay.com/docs/test-accounts-and-cards
// Code Example Adapted From:
//  - https://docs.rainforestpay.com/docs/store-payment-methods-via-component
//  - https://static.rainforestpay.com/demo-sandbox/studio.html?type=payment
//  - https://docs.rainforestpay.com/docs/javascript-bundle

<html>
  <head>
    <!-- for Staging/Sandbox -->
    <script type="module" src="https://static.rainforestpay.com/sandbox.payment.js"></script>
    <!-- for Production -->
    <script type="module" src="https://static.rainforestpay.com/payment.js"></script>
  </head>

  <body>
    <rainforest-payment
      session-key='RETURNED_SESSION_KEY'
      payment-method-config-id='RETURNED_PAYMENT_METHOD_CONFIG_ID'
      allowed-methods='RETURNED_ALLOWED_METHODS'
    ></rainforest-payment>
  </body>
</html>

Step 3: Save the payment method to the Hint patient

❗️

Do Not Send Hint Sensitive Payment Details

Sensitive payment details like card numbers and bank account numbers should never be sent to Hint. If you are collecting payment details, they should always be sent to Rainforest first, so they can be tokenized, and then you send the token to Hint.

Unless you are PCI compliant, you probably don't want card/bank numbers to hit your servers either, which is why the Rainforest Components library sends this information from the user's client directly to Rainforest (more detail here: https://docs.rainforestpay.com/docs/pci-security-guide)

Full documentation: POST /payment_method

You must attach this payment method information to a patient and you can do this through the POST /payment_method endpoint. You are required to send the payment_method returned in step 2 after confirming the SetupIntent as rainforest_id to the POST request. The payment_method object should look something like mtd_2wlsQzcTm9I3EhwIOD34ElF1JfE.

This creates a payment method in Hint. Hint will return the newly created payment method information with the following response:

// BankAccount
{
  "id": "bnk-ab12C345DeF6",
  "default": true,
  "last_four": "4123",
  "name": "Bank of America NA",
  "type": "bank_account",
  "bank_account": {
    "id": "bnk-ab12C345DeF6",
    "last_four": "4123",
    "name": "Bank of America NA",
    "stripe_token": "null",
    "type": "BankAccount"
  },
  "card": null
}


// Card
{
  "id": "card-ab12C345DeF6",
    "default": false,
    "last_four": "4123",
    "name": "Visa",
    "type": "card",
    "bank_account": null,
    "card": {
      "id": "card-ab12C345DeF6",
      "card_type": "visa",
      "exp_month": 7,
      "exp_year": 2017,
      "last_four": "4123",
      "name": "Visa",
      "type": "Card"
    }
}

All Done 🎉

After you've created the payment method on the Hint patient and received the successful response, no further action is needed.

Testing Cards

You can use anything for the zip code and cvc check. Expiration dates can be any future date.

4242 4242 4242 4242 Visa - Successful
5555 5555 5555 4444 Mastercard (debit) - Successful
3782 822463 10005 American Express - Successful

4000 0000 0000 0002 Charge is declined with a card_declined code.
4000 0000 0000 0127 Charge is declined with an incorrect_cvc code.

Testing Bank Accounts / ACH

You can mimic successful and failed ACH charges using the following bank routing and account numbers:

  • (U.S. Bank) Routing number: 091000022Account number: Any 4-26 digits
  • (Wells Fargo Bank) Routing number: 091000019Account number: Any 4-26 digits
  • (JPMorgan Chase Bank) Routing number: 021000021Account number: Any 4-26 digits

Updated about 1 month ago