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.

<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:

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 include products'name,images, andquantity.
By settingorderNo, 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 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 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.

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

Click your checkout button
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.
ClickPay.
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 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>

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>

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.

PreviousAccept a payment NextIn-page checkout

Last updated 6 months ago

<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>

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())); });

<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>

<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>

Card Number

Brand

DESCRIPTION