Hosted payment page
1. Set up your MoneyCollect account
Firstly, make sure that you have set up an account name on the MoneyCollect Dashboard. If you haven't already, please complete all the steps in "Get Started" before proceeding any further.
2. Set up the server
MoneyCollect uses a Session object to represent your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process.
Create a checkout button
Add a checkout
button to your website that calls a server-side endpoint to create a Checkout Session.
Add an endpoint on your server-side to create a Checkout Session. A Checkout Session controls what your customer sees on the hosted payment page. You can configure it with options such as:
amountTotal
The total amount the customer needs to pay for.currency
The currency that the customer needs to pay for.lineItems
A list of items the customer is purchasing. It can be displayed for customers on the hosted payment page. The displayed items includeproducts'name
,images
, andquantity
.By setting
orderNo
, you can associate your order number to the Checkout Session. In the future, you can find the corresponding payment information in the MoneyCollect Dashboard through the associatedorderNo
.If the billing address information
billingDetails
is not provided, it will be collected from the customer on the Checkout page.
You also need to set the following URLs and make sure that they are publicly accessible in which way MoneyCollect can redirect your customers to these pages.
returnUrl
A success or order confirmation page on your website to redirect your customers after they complete the payment.cancelUrl
Redirect your customer back to your website via the URL if they cancel the payment during checkout.notifyUrl
After the payment is completed, the payment result will also be sent to this URL. (O)
Checkout Sessions will be automatically cancelled if they are not paid for more than 24 hours after creation.
After creating a Checkout Session and successfully responding, redirect your customer to the
url
of Checkout page returned in the response.
Moreover, you have the flexibility to incorporate additional payment methods based on your specific requirements.
Test your endpoint by starting your web server (e.g., localhost:4242)
Testing
Click your
checkout
buttonFill out the payment details with the test card information:
Enter 4242 4242 4242 4242 as
the card number
.Enter any future date for
card expiry
.Enter any 3-digit number for
CVC
.Enter
customer's e-mail
.Enter
customer's first name and last name
.Enter
billing details
.
Click
Pay
.You’re redirected to your returned page.
Next, you can find the new payment from MoneyCollect Dashboard, and check the details of the payment.
3. Create a confirmation page
Create a returnUrl
page provided in Checkout Session to display an order confirmation page or order details for your customer. And your customer will be redirected to the page after they complete the payment.
Create a cancelUrl
page provided in Checkout Session and your customer will be redirected to the page if they cancel the payment in Checkout.
4. Additional testing resources
There are several test cards you can use to make sure your integration is ready for production. Use them with any CVC
, postal code
, and future expiration date
.
5. After the payment
For detailed guidance on managing webhooks, processing refunds, and handling responses after the payment, please refer to the following documentation.
Last updated