# Hosted payment page ![Click to try out](https://3906929740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQyT5pndc80PGeNrMulEU%2Fuploads%2FMGyMOj7NRameltQ7N3js%2Fhosted.png?alt=media\&token=f4bc648d-7764-4648-92a8-77f472c977ef) ### 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. {% content-ref url="../get-started" %} [get-started](https://docs.moneycollect.com/docs/payment/get-started) {% endcontent-ref %} ### 2. Set up the server MoneyCollect uses a [Session ](https://apireference.moneycollect.com/docs/api-v1/250b72f42620b-create-a-session)object to represent your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process. ![](https://3906929740-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQyT5pndc80PGeNrMulEU%2Fuploads%2F9Vt5pLgYskrhwq9eNzhi%2Fimage.png?alt=media\&token=384fa75c-b5ca-44c7-a002-3d041f24c372) **Create a checkout button** Add a `checkout` button to your website that calls a server-side endpoint to create a Checkout Session. ```html ``` Add an endpoint on your server-side to create a [Checkout Session](https://apireference.moneycollect.com/docs/api-v1/250b72f42620b-create-a-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`, and`quantity`. * 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 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. {% content-ref url="../payment-methods" %} [payment-methods](https://docs.moneycollect.com/docs/payment/payment-methods) {% endcontent-ref %} ```java post("/create-checkout", (request, response) -> { // Use your private key MoneyCollect.apiKey = "test_pr_NWZsa******"; // Configure preferred payment method List 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 `checkout` button 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. ### 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. 
<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 `cancelUrl`page provided in Checkout Session and your customer will be redirected to the page if they cancel the payment in Checkout. ```html Checkout canceled

Forgot to add something to your cart? Shop around then come back to pay!

Restart demo

``` ### 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 NumberBrandDESCRIPTION
4242 4242 4242 4242VisaSucceeds and immediately processes the payment.
3566 0020 2036 0505JCBSucceeds and immediately processes the payment.
6011 1111 1111 1117DiscoverSucceeds and immediately processes the payment.
3782 8224 6310 0052American ExpressSucceeds and immediately processes the payment.
5555 5555 5555 4444MastercardSucceeds and immediately processes the payment.
4000 0000 0000 0077VisaAlways fails with a decline code of declined.
4000002500003155VisaThis card requires 3D authentication on all transactions
### 5. After the payment For detailed guidance on managing webhooks, processing refunds, and handling responses after the payment, please refer to the following documentation. {% content-ref url="../after-the-payment" %} [after-the-payment](https://docs.moneycollect.com/docs/payment/after-the-payment) {% endcontent-ref %}