Save customer's card details on Checkout page, can help customers to pay more quickly in their next payments.
1. Create a Customer
Create a corresponding Customer object for your customer in MoneyCollect.
// Use your private keyMoneyCollect.apiKey="test_pr_NWZsa******";CustomerCreateParams customerCreateParams =CustomerCreateParams.builder().setEmail("[email protected]").build();Customer customer =Customer.create(customerCreateParams);
2. Create Checkout Session
When creating the Checkout Session, you can specify the customerparameter to automatically attach the created payment method to an existing customer.
// Use your private keyMoneyCollect.apiKey="test_pr_NWZsa******";SessionCreateParams params =SessionCreateParams.builder().setReturnUrl("http://localhost:4242/success.html").setCancelUrl("http://localhost:4242/cancel.html").setNotifyUrl("http://localhost:4242/success.html").setAmountTotal(18*100L).setCurrency("USD").setOrderNo("C"+System.currentTimeMillis()).setWebsite("https://www.localhost.com").setBillingDetails(getBillingDetails()).setCustomer(customer.getId()).setStatementDescriptor("Mc122").build();Session session =Session.create(params);
3. Customer selects "save this card" during payment
Select "Save this card for future purchase" on the Checkout page.
Click "Pay".
After pay will save the card details to customer.
4. Customer selects the saved card to make payment
Use the Payment API to save payment details from a purchase. There are several use cases:
After the customer pays an order,store the payment details for future purchases.
Initiate the first payment of a series of recurring payments.
Charge reserved funds and store the details to charge the full amount later
1. Set up MoneyCollect
Firstly, make sure that you have set up an account name on the MoneyCollect Dashboard.
2. Create a customer before set up
To set up a payment method for future payments, you must attach it to a Customer. Create a customer object in MoneyCollect when your customer creates an account on your website. It is also possible to create a customer object in MoneyCollect before the customer is ready to pay. Customer objects allow for reusing payment methods and tracking across multiple payments.
// Use your private key
MoneyCollect.apiKey = "test_pr_NWZsa******";
CustomerCreateParams customerCreateParams =
CustomerCreateParams.builder()
.setEmail("[email protected]").build();
Customer customer = Customer.create(customerCreateParams);
3. Create Payment
To create a payment, specify the amount, currency, orderNo and customer.
After the Payment is created, only need to return the clientSecret in the returned result to the payment page. It is used to confirm the payment and update the card information on the client.
4. Collect card details
After the payment is created on the server and the clientSecret is transferred to the browser, you’re ready to collect Elements of the payment details on the client by using MoneyCollect.js. Elements is a set of prebuilt UI components that used to collect and verify card numbers, CVVs, and dates of expiration.
Include the moneycollect.js script on your checkout page by adding it to the head of your HTML file. Always load moneycollect.js directly from js.moneycollect.com to remain PCI compliant.
1. Set up MoneyCollect Elements
async function setupElements() {
moneyCollect = MoneycollectPay(apikey);
let params = {
formId: 'payment-form', // payment-form id
frameId: 'PrivateFrame', //IframeId
mode: "pro",
customerId: "",
needCardList: true,
autoValidate: true,
layout: {
pageMode: "inner", // Style mode of the page inner | block
style: {
frameMaxHeight: "50", // The max height of iframe
input: {
FontSize: "", // Collect the size of the font
FontFamily: "", // Specify a prioritized list of one or more font family names
FontWeight: "", // Collect the weight (or boldness) of the font
Color: "", // Collect the foreground color value of an element's text
ContainerBorder: "", //Collect the name of the font
ContainerBg: "", // Collect the weight (or boldness) of the font
ContainerSh: "" //Collect the color of the font
}
}
}
}
moneyCollect.elementInit("payment_steps", params);
}
setupFutureUsage:
It is used to set whether the card information can be used for payments in the future.
Set setupFutureUsage to 'on' && customer is provided when payment is created, the card information will be automatically attached to the customer when the Payment is confirmed.
You can also set this parameter when creating a Payment on the server-side.
Confirm Payment may take several seconds to complete. During that time, disable your form from being resubmitted.If the customer must perform additional steps to complete the payment, such as authentication, moneycollect.js guides them through that process.
when a payment is successful, the returned status of Payment is succeeded . when a payment fails, you can check the returned error to determine the reason.
If the payment succeeded, you can use the stored customerId,paymentMethod from the responsive payment information to collect payments from your customer in the future without prompting them for their payment details again.
6. Charge using saved payment method
List all payment methods associated with your customer, and pick one of payment methods to charge.
For more Payment status, please check the description of Payment API's status.
7. Testing
There are several test cards you can use to make sure this integration is ready for production. Use them with any CVC, postal code, and future expiration date.
