Payment Information

Customer payment details

To show the customer his payment details use /customers/:customerId/payment_details endpoint. It will return the list of customer payment details.

📘

The Fetch customer's payment details endpoint will return bound property and active property for each payment method.

• If bound: true -> such payment details CANNOT be changed.
• If active: true -> such payment details are used for recurring payments triggered by Cleeng.

Update customer payment details

To enable the customer to add OR edit his/her payment details, you should implement appropriate flows:

1. Display current payment details. Both active and bound payment details should be displayed.

Payment details have important properties:

• active: true means that Cleeng triggers recurring payments for this payment method.
• bound: true means that recurring payments are processed outside of Cleeng and such payment details cannot be changed.

2. Add an "edit" option (e.g. a button).

📘

Important

The Fetch customer's payment details endpoint will return bound property for each payment method.

• If bound: true -> payment details CANNOT be changed.
• If bound: false -> payment details can be changed.

Adding and deleting payment details

• "Update payment details" feature actually involves adding new payment details and deleting the old ones.

  It is recommended that you remove the old details in the background once new payment details are successfully added.

• You can enable adding payment details using the methods below:

  • Adyen (sample cases: a customer updates a card / a customer wants to switch payment method to Google Pay or any other payment method supported by Adyen payment gateway that does not require any additional actions)
  • Adyen finalize adding payment details (finalize adding payment details that requires additional customer action, e.g. 3D Secure)
  • PayPal (sample cases: a customer changes payment method from a card to PayPal, a customer wants to use a different account in PayPal)

  Please note that no other payment methods are supported. If you want to use a different payment gateway and MediaStore SDK solution, please contact our Broadcaster Success Specialists Team.

• You can enable deleting payment details using the Delete payment details endpoint.

📘

Good to know

It depends on a broadcaster's payment settings whether a customer can change payment details (e.g. if a broadcaster has only PayPal payment method configured, a customer can only update PayPal payment method, he/she cannot change to e.g. Adyen).

It is recommended to use hardcoded paymentMethodId to decrease the number of requests and to have full control of possible new payment details.

Adyen Drop-in integration

To implement the add/update payment details feature for the Adyen payment gateway follow the tutorial for initial payment. The flow is very similar, the only difference is:

• skip orderId in Create Adyen payment session,
• call Add Adyen payment details in Adyen Drop-in onSubmit function,
• call Finalize add Adyen payment details in Adyen Drop-in onAdditionalDetails function

📘

Important

To have online bank payment methods (iDEAL, Sofort) visible in MyAccount, you need to implement support for transactions for authentication purposes (zero-amount). For details see the Adyen Authentication Transactions tutorial.

No payment method added

If there is no payment method with the property active: true, the "Add a payment method" option should be displayed like in the MediaStore SDK example below.

If a customer selects it, he/she should be redirected to "Update Payment Details" screen. The screenshot below presents the case when the publisher has PayPal, Card and Google Pay enabled.

Example user flows

Example user flows are presented in sample screens from MediaStore SDK.

1. Add/update a card

2. Add/update Apple Pay payment details

3. Remove Payment Method

Special cases

Payment methods with the bound: true property can be viewed (they are displayed in the list of customer payment details) but they cannot be edited. Examples of such payment methods include In-App payment methods (e.g. Apple, Android, Amazon, Roku).

If a customer selects the "Edit" button for a payment method with bound: true property, the application should display a pop-up informing that these payment details cannot be updated. See below the example of a pop-up in MediaStore SDK.

If a payment method with the property bound: true is the only one in the list, an option to add payment details should be displayed next to it.

List customer transactions

All customer transactions will be returned from /customers/:customerId/transactions. Transactions mean all captured payments.

Online receipts

Customers can access their receipts online, directly in their customer accounts.

To fetch an online receipt for a customer's transaction, i.e. successfully executed (captured) payment, use the following endpoint: /receipt/{transactionId}

Online receipts are available to customers from My Account -> Your Payments -> Payment History section.

A customer can access a receipt by clicking on a transaction price. This will open a receipt in a separate browser window or tab where it can be printed with the browser built-in printing mechanism.