Credit card process overview
- As an API user, create a Contact
- As an API user, create a CreditCardResource and token for the Contact
- Load the Prime Trust front-end application into your website
- Initialize the Prime Trust front-end application using the CreditCardResource token
- Link a credit card:
- Create a new Credit Card Resource.
- Use the
resource-token-hashfrom prior step to launch the Credit Card embeddable widget. Include the token via parameter
- Credit Card linking iframe will display to submit credit card details securely.
- Create credit card contribution (repeat as needed):
- Retrieve the Credit Card Resource ID linked to the Credit Card Funds Transfer Method.
- Generate a new token using
- Use the token to launch the Credit Card embeddable widget. Include the amount of the contribution and token via parameters
- CVV Iframe will display for input of CVV and submission of the contribution.
Credit card frontend widget setup
For convenience, Prime Trust has created a frontend application that reads a
TOKEN, checks it against the API, and handles the user experience and API requests needed to link a new card and create a card contribution.
Get the script code for your environment, depending on if you're working in our Sandbox or in Production.
You can place this script tag in your
<head> or before your
</body> tag. It's preferred to use the
async tag to make sure that it will not impact the loading of your code.
Once you've included this script on your website, you'll need to create the code that will bootstrap this application and render the iframe.
The code will be available through the variables
If using Async loading, there will be a few options for listening for it to be ready.
window.onBootstrapReady are specific to this library, while
window.primeTrustReady will trigger when all prime trust scripts are finished loading (if using multiple ones, otherwise will run at the same time as the other two).
All can be set to a function, accepting one argument,
primeTrustReady will use the
pt object (the combined object of all scripts) the other two using
PrimeTrustEmbeds which is just the object from this script.
Following is an example of initializing our credit card application / embeddable:
If the launched application is closed without completion (such as when using a modal and the user closes it), each launch function returns a function to remove the event listeners.
Example of checking for cleanup before launching:
Link new credit card flow
Sensitive credit card information can be transmitted to us via the CreditCardResource object, which must first be created by the API integrator using an authenticated user. The only attribute required to create a new CreditCardResource is the ID of an existing Contact:
This should return the following response:
Launch the Credit Card embeddable widget:
- theme: An object containing alternative color options.
- background: #ffffff,
- foreground: #000000,
- primary: #1890ff,
- success: #69e2a0,
- error: #f5222d
Retrieve the Credit Card Resource ID linked to the CC Funds Transfer Method
Refresh the credit card resource token
Collect CVV and submit contribution
- hideAmount: Amount shows by default. Set to
trueto hide the amount of the contribution above the CVV field
Launch the CC embeddable/widget
Screenshot of the iFrame/embeddable that collects the CVV and submits the contribution:
For sandbox testing, use the following test card numbers and secrets:
|Card Type||Card Number||Secret|