Links
Comment on page

Prebuilt Checkout page

1. Set up your MoneyCollect account

Firstly, make sure that you have set up an account name on the MoneyCollect Dashboard.

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.
<html>
<body>
<button id="submit"><span id="button-text">Checkout</span></button>
</body>
<script>
// Information about the order
// Used on the server to calculate order total
var orderData = {
items: [{ id: "photo-subscription" }],
currency: "usd"
};
document.querySelector("#submit").addEventListener("click", function(evt) {
evt.preventDefault();
// Initiate payment
fetch("/create-checkout", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(orderData)
}).then(function(result) {
return result.json();
}).then(function(data) {
window.location.href = data.url;
});
});
</script>
</html>
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:
  • amountTotalThe 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 which can be displayed for customers on the hosted payment page. The displayed items includes products'name,images,quantity.
  • By settingorderNo, you can associate your order number to Checkout Session. In the future, you can find the corresponding payment information in MoneyCollect Dashboard through the associated orderNo.
  • 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 page on your website to redirect your customer after they complete the payment to display an order confirmation page or order details for your customer (e.g., their name or payment amount) after the payment.
  • cancelUrl Redirect your customer back to your website via the URL if they cancel the payment in Checkout.
  • notifyUrl After the payment is completed, the payment result will be sent to this URL.
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.
post("/create-checkout", (request, response) -> {
// Use your private key
MoneyCollect.apiKey = "test_pr_NWZsa******";
// Configure preferred payment method
List<String> paymentMethodTypes = new ArrayList<>();
paymentMethodTypes.add("card");
paymentMethodTypes.add("kakao_pay");
SessionCreateParams params = SessionCreateParams.builder()
.setReturnUrl("http://localhost:6060/success.html")
.setCancelUrl("http://localhost:6060/cancel.html")
.setNotifyUrl("http://localhost:6060/success.html")
.setPaymentMethodTypes(paymentMethodTypes)
.setAmountTotal(19 * 100L)
.setCurrency("USD")
.setOrderNo("C"+System.currentTimeMillis())
.setWebsite("https://www.mc.com").build();
Session session = Session.create(params);
return JSONObject.toJSONString(new CreateCheckoutResponse(session.getUrl()));
});
Test your endpoint by starting your web server (e.g., localhost:4242)
Testing
  1. 1.
    Click your checkout button
  2. 2.
    Fill 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.
  3. 3.
    ClickPay.
  4. 4.
    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 page

Create a cancelUrlpage provided in Checkout Session and your customer will be redirected to the page if they cancel the payment in Checkout.
<html>
<head>
<title>Checkout canceled</title>
</head>
<body>
<section>
<p>Forgot to add something to your cart? Shop around then come back to pay!</p>
</section>
<p>
<a href="index.html">Restart demo</a>
<p>
</body>
</html>
Create a returnUrlpage 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.
<html>
<head>
<title>Thanks for your order!</title>
</head>
<body>
<section>
<p>
We appreciate your business! If you have any questions, please email
</p>
<p>
<a href="index.html">Restart demo</a>
<p>
</section>
</body>
</html>

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.
Card Number
Brand
DESCRIPTION
4242 4242 4242 4242
Visa
Succeeds and immediately processes the payment.
3566 0020 2036 0505
JCB
Succeeds and immediately processes the payment.
6011 1111 1111 1117
Discover
Succeeds and immediately processes the payment.
3782 8224 6310 0052
American Express
Succeeds and immediately processes the payment.
5555 5555 5555 4444
Mastercard
Succeeds and immediately processes the payment.
4000 0000 0000 0077
Visa
Always fails with a decline code of declined.
4000002500003155
Visa
This card requires 3D authentication on all transactions