Comment on page
Prebuilt Checkout page
Firstly, make sure that you have set up an account name on the MoneyCollect Dashboard.
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.currencyThe 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 includesproducts'name,images,quantity.- By setting
orderNo, you can associate your order number to Checkout Session. In the future, you can find the corresponding payment information in MoneyCollect Dashboard through the associatedorderNo. - If the billing address information
billingDetailsis 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.
returnUrla 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.cancelUrlRedirect your customer back to your website via the URL if they cancel the payment in Checkout.notifyUrlAfter 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 theurlof 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.Click your
checkoutbutton - 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.Click
Pay. - 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.
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>
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 |
Last modified 14d ago