Guides
These docs are for v2023-01-01. Click to read the latest docs for v2024-10-16.

Payment Component

Suggest Edits

❗️

API version 2023-01-01 deprecating

This version will be deprecated on May 1, 2025. If your platform is on this version, you should upgrade to at least 2023-12-01 to simplify authorization and access new features.

The payment component collects sensitive payment data from your user without exposing your platform, increasing security, and decreasing PCI DSS scope. The payment component starts with a payin config call to send information in advance about the payin (amount, user name, user address, etc.).

Our components are pre-built form templates designed to simplify your integration to Rainforest while retaining your platform's look and feel and control of your merchant and user's experience.

1328

How to embed the payment component

💸
Create a payin
Open Recipe

JavaScript bundle

Include the payment JavaScript bundle in your frontend to access the payment component.

<script type="module" src="https://static.rainforestpay.com/sandbox.payment.js"></script>

❗️

Developing locally?

If you're testing your integration on an environment that does not use localhost as the origin, you will need to first configure your browser to allow Rainforest to use secure web APIs, like cryptography, which are normally disallowed over an insecure connection. See our instructions for more detail.

Payment component

Add the Rainforest payment component with custom configuration designed in the component studio.

<rainforest-payment
    session-key="REPLACE_ME"
    payin-config-id="REPLACE_ME"
></rainforest-payment>

Session authentication

Create a temporary session to grant the payment component permissions to create a payin and pass the session-key into the payment component. This session needs the ability to create payins and read payin configs. The policy should include at least the following:

{
  "statements": [
    {
      "$.action": ["read"],
      "$.resource": ["payin_config"]
    },
    {
      "$.action": ["create"],
      "$.resource": ["payin"]
    }
  ]
}

Configure a payin

Create a payin config to set up a payin with information such as amount before collecting the sensitive payin details (i.e the card number) via the payment component. Pass the payin_config_id into the payment component.

If the billing contact is provided in the payin config, then the country and postal code for the Card payment method and name for the ACH payment method will be omitted from the payment component. If the billing contact is not provided in the payin config, then the payment component will ask for the bare minimum fields required to process a CARD or ACH payment.

Event listeners

The payment component will emit one of three events after attempting to process the request.

Events

EventDescription
approvedPayin was successfully captured. The event data will include information such as the payin_id.
declinedPayin capture was declined. The event data will include information such as the payin_id.
errorThe request errored. The event data will include information about the error. Attempt to process the payment again.
attemptedSubmit button was clicked and a request will be made to create the payin. Additional event data is not included.

Add an event listener on the approved event to obtain the payin_id from the event data. This identifier can be stored in your system and used to display the payin receipt component.

In this example, an element id pay-form was added to the rainforest-payment component and then an event listener for the approved event is added. The data can be read once the event is emitted.

<html>
  <head>
    <script type="module" src="https://static.rainforestpay.com/sandbox.payment.js"></script>
  </head>

  <body>
    <rainforest-payment
      id="pay-form"
      session-key="REPLACE_ME"
      payin-config-id="REPLACE_ME"
    ></rainforest-payment>
  </body>

  <script type="text/javascript">
    document.getElementById('pay-form').addEventListener("approved", function(data) {
      // save the payin_id from the data
    })
  </script>
</html>

Payment component studio

Check out the payment component studio to configure and design your payment component. These props and CSS variables are passed to the component through HTML attributes.

2780

Default attributes

Simply omit the props to use the default attributes. Here is a list of the default attributes:

<rainforest-payment
	style-font-size='1rem'
	style-border-color='#e5e7eb'
	style-border-radius='0.5rem'
	style-border-width='1px'
	style-button-color='#303030'
	style-button-border-radius='0.5rem'
	style-error-border-color='#C11F15'
	style-error-message-color='#C11F15'
	style-icon-color='#707070'
></rainforest-payment>

Updated 6 months ago