Payment over the phone with TwiML<Pay>
About
This sample application shows how to do a bill payment over the phone using TwiML<Pay> with a credit card.
Implementations in other languages:
.NET | Java | Python | PHP | Ruby |
---|---|---|---|---|
TBD | TBD | TBD | TBD | TBD |
How it works
It uses the TwiML<Pay> to prompt the user to enter a credit card's information to pay a bill that can be configured on the UI, then it will process the payment through Stripe (which needs to be added as a connector on the Twilio console) and will let the user know if the payment was successful or not.
Features
- Node.js web server using Express.js
- Basic web user interface using Pug for templating and Bootstrap for UI
- User interface to configure payment details.
- Payment details can be stored in a JSON database using lowdb.
- Unit tests using
mocha
andchai
- Automated CI testing using GitHub Actions
- Linting and formatting using ESLint and Prettier
- Project specific environment variables using
.env
files anddotenv-safe
by comparing.env.example
and.env
. - One click deploy buttons for Heroku and Glitch
Set up
Requirements
It is recommended to follow the tutorial on how to capture your first payment using <Pay> as it already describes in detail all of the following steps:
- Create a Stripe's account.
- Purchase a voice-enabled Twilio phone number (or use one of yours if you already have it).
- Configure Stripe <Pay> Connector on the your Twilio console.
Twilio Account Settings
This application should give you a ready-made starting point for writing your own payment over the phone application. Before we begin, we need to collect all the config values we need to run the application:
Config Value | Description |
---|---|
Auth Token | Used to authenticate - You'll find it on your Twilio's console. |
Payment connector | This has to be configured on your Twilio's console. There you should select the Stripe connector and link it to your Stripe's account |
NOTE: The Auth token will validate the requests are coming from the authorized account, otherwise you will get a 403 Forbidden
response.
Local development
After the above requirements have been met:
- Clone this repository and
cd
into it
git clone git@github.com:twilio-labs/sample-pay-service.git
cd sample-pay-service
- Install dependencies
npm install
- Install Twilio CLI
See Twilio CLI Quickstart for installation guide for Linux and to learn how to use the Twilio CLI.
Mac OS X
brew tap twilio/brew && brew install twilio
Windows
npm install twilio-cli -g
- Log in to Twilio CLI
twilio login
See Twilio Account Settings to locate the necessary environment variables.
- List and purchase an available phone number by area code
twilio phone-numbers:buy:local --country-code US --area-code="208"
- Set your environment variables
npm run setup
See Twilio Account Settings to locate the necessary environment variables.
- Run the application
npm start
Alternatively, you can use this command to start the server in development mode. It will reload whenever you change any files.
npm run dev
- Once you have your server running, you need to expose your
localhost
to a public domain so the Twilio webhook can reach the expected endpoint. This is easy using the Twilio CLI.
twilio phone-numbers:update [PN sid or E.164] --sms-url http://localhost:3000/pay
This will generate a url similar to: https://cd2ef758.ngrok.io
.
-
Navigate to http://localhost:3000 to see some sample credit card details to test the payment.
-
You can also navigate to http://localhost:3000/config to override the default payment details.
-
That's it! Now call the Twilio phone number you configured and follow the instructions to complete the payment.
-
You can see if the payment was charged on your Stripe dashboard. Learn how to capture your first payment for more details.
Tests
You can run the tests locally by typing:
npm test
Cloud deployment
Additionally to trying out this application locally, you can deploy it to a variety of host services. Here is a small selection of them.
Please be aware that some of these might charge you for the usage or might make the source code for this application visible to the public. When in doubt research the respective hosting service first.
Don't forget to set the environmental variables on each hosting service!
Service | |
---|---|
Heroku | |
Glitch |
Here are some notes about the services:
- Heroku: Very straightforward, just create an account and after clicking the deploy button you need to follow the instructions and that's it.
- Glitch: It requirers an additional step. Once you click on the deploy button, you need to manually create the file
.env
and add setTWILIO_AUTH_TOKEN
variable. You can duplicate the.env.example
file and edit it accordingly.
Resources
-
This project was generated using this sample NodeJS template
-
GitHub's repository template functionality
Contributing
This template is open source and welcomes contributions. All contributions are subject to our Code of Conduct.
License
Disclaimer
No warranty expressed or implied. Software is as is.