Collecting payment information (Hint Payments)
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 apayment_method_config_id
,session_key
andallowed_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 arainforest_id
after the payment method is created and the setup intent is confirmed successfully. Thisrainforest_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 accountfalse
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_key
andallowed_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:
091000022
Account number: Any 4-26 digits - (Wells Fargo Bank) Routing number:
091000019
Account number: Any 4-26 digits - (JPMorgan Chase Bank) Routing number:
021000021
Account number: Any 4-26 digits
Updated 15 days ago