StackPayJS
Seamless Payment Experience
The Seamless Payment Experience (SPE) allows merchants to have a payment experience on their own website that mirrors the same look and feel of their own website. Merchants do not have to store or process the payment data. The SPE is a cross-origin browser process for a merchant system.
Table Of Contents
Prerequisites
- You’ll need a StackPay API key for your platform.
- If you are currently processing payments through Stack Pay, you already have this.
- If you are not sure if you have an API key or what your API key is, reach out to stackpaysupport@stacksports.com.
- Your users must have agreed to the StackPay Terms of Service and Stripe’s Terms of Use
- Your checkout page needs the following:
- A means to collect the customer’s first and last name, email address, and billing address.
- A button to trigger the form submit action – the label should be “Make one-time Payment” or similar.
Placing StackPay JS on your checkout page
1. On your checkout page, where you want the payment form frame to appear, insert the code:
This div is where StackPay.js will create the payment token form for you.
Note: This div should be styled with a minimum width of 380px and a minimum height of 640px for the entire form to be visible.
2. Just before the closing body tag on your page, insert the code:
Production
Sandbox
3. Directly after you add that line of code, add the following code:
In the example code above, take note of the explanatory //comments as well as any double curly-bracket {{items}} that denote where you need to add something yourself based on your platform’s code stack and how your data is accessible.
The variable you’ll want to keep track of from the response is the payment_method_token.
Making a payment
After you have a payment token response back from our system, you can use that token to create a payment on StackPay via our Payments API. Essentially, you’ll be using the token you received as a one-time payment method to create a new credit card transaction. The documentation on how to do that can be found here: StackPay API > Payments > Processing a Payment Transaction
How to Inject Styles into Stack Pay JS
Basic style object looks like this:
NOTE: while all styles are optional, the styles object with the (empty) base and input keys is required by the initialization. You can see this above in step 3.
As you see in the example above, the styles object is comprised of multiple levels of javascript objects. The parent object key is the css style selector, and the value is an object with the individual styles for that selector.
Base, and Input nodes carry styles for overall container, and form inputs respectively. If you want to add a style to an input, you must target a specific selector i.e. #submitButton
For Example
This will style an element with selectorID of #submitButton and give the text the designated color, with a font size of 26 pixels.
Implementing ACH
We also have the ability for you to use StackPay JS to validate your customer’s bank account to allow for payment by ACH. This is a more involved process that requires additional set-up and configuration. If you are a Stack Product, that documentation can be found on our internal Confluence Pages application here: Implementing ACH using StackPayJS. If not, contact us and we can walk you through the process to set up and configure ACH Payments. Note that, while some of the same steps that we covered here are gone over on that document, there are some small differences in a few names and values that should be closely watched for.
Final Notes
The information above should be the majority of what you need to get StackPay JS working on your checkout page. If you want to dive further into the documentation, we have made the API documentation available here for browsing: View Stack Pay JS API Documentation. We are also available on our Slack integration channel if you are already integrating with our platform. If not, contact us and we’ll get you set up!