#videovillain

1 messages · Page 1 of 1 (latest)

pure marshBOT
limpid pebble
#

Hi! Let me help you with this.

#

I am not sure all functionality will be working. Have you tried this?

pure marshBOT
rare cobalt
#

I have a bit

#

I am currently using the Pricing Tables as is and they display inside my Vue3 app, but then when you pay it sends you out of the app

#

I know there is a "return" url you can set, but we would rather just display everything in the app

#

I'm just curious if you know of any reason this wouldn't work

rotund pine
#

Pricing table works with Checkout Session once a customer choose a price you can't keep them in your website for the purchase

#

unless you implement your own pricing table and your own checkout form with Stripe Element

rare cobalt
#

hmmm

#

but what about a browser inside our app?

#

isn't that just like any other browser?

rotund pine
#

You mean using iframes ?

#

or webview?

rare cobalt
#

or something like ionic's browser

rotund pine
#

I don't know that, but it's not recommended to use webview in mobile apps. You can give it a try

#

but in that case I think you should create your own mobile pricing table with Checkout forms

rare cobalt
#

not recommended in general or by Stripe do you mean?

rotund pine
#

In general

#

it's hard to debug

rare cobalt
#

ahh okay

rotund pine
#

and very poor in performance

rare cobalt
#

Okay, well I actually have the elements style made too

#

but I'm struggling with something

#

but my element never shows that

#

and it enver shows the payment options

#

Is that part of the element when making a subscription or is that built by the developer? if by the developer, it doesn't seem to be part of this "guide"

#

This is my table with my 3 payment options, each with monthly/yearly the language is japanese though:

image.png
#

and when you hit the green button, its sends the info to an element component and you get this:

image.png
#

but as you can see, it doesn't show payment options or the subscription amount or anything

#

but this is working, I can finish payment and see it in my dashboard as a subscription

#

but it doesn't show what we want

rotund pine
rare cobalt
#

but what about the payment options?

#

isn't there supposed to be some card with some different options available to pick from? we have loads activated

#

this thing never shows:

image.png
rotund pine
#

How are you creating the PaymentIntent

#

can you share one ?

rare cobalt
#

just a sec

#

the php or the vue3?

#

Here is the onMount() in the component:

onMounted(async () => {
  stripe = await loadStripe(`${process.env.VUE_APP_STRIPE_PUBLISHABLE_KEY}`);

  try {
    const data = await playerSubscription(props.subscriptionArgs);
    clientSecret.value = data.latest_invoice.payment_intent.client_secret;
    messages.value.push("お支払い情報を入力してください。");

    const appearance = {
      theme: 'flat',
      variables: { colorPrimaryText: '#68E5AE' },
    }
    const options = {
      layout: {
        type: 'tabs',
        defaultCollapsed: false,
      }
    };
    const elements = stripe.elements({ clientSecret: clientSecret.value, appearance });
    const paymentElement = elements.create('payment', options);
    paymentElement.mount("#payment-element");
    const linkAuthenticationElement = elements.create("linkAuthentication");
    linkAuthenticationElement.mount("#link-authentication-element");
    isLoading.value = false;
  } catch (e: any) {
    console.error("ペイメント・インテントの作成中に問題が発生しました：　", e);
    messages.value.push("ペイメント・インテントの作成中に問題が発生しました。");
  }
});
rotund pine
#

The payment intent that you are using, could you pleaase share it's Id

rare cobalt
#

And the php:

public function makeSubscription(Request $request){

        try{
            $uniid=$request->player_unique_key;

            $playerid=Player::where('unique_key','=',$uniid)->first();

            if($playerid){
                $stripe = new \Stripe\StripeClient(env('STRIPE_SECRET'));

                $priceobj=$request->price_obj;
                $priceid="";

                if(UtalityController::isJson($priceobj)){
                    $json = json_decode($priceobj, true);
                    $priceid=$json['id'];
                }else{
                    $priceid=$priceobj;
                }

                $customer=$playerid->createOrGetStripeCustomer();
                $customerid= $customer->id;

                $sub=$stripe->subscriptions->create([
                        'customer' => $customerid,
                        'items' => [['price' => $priceid]],
                        'payment_behavior' => 'default_incomplete',
                        'payment_settings' => ['save_default_payment_method' => 'on_subscription'],
                        'expand' => ['latest_invoice.payment_intent'],
                    ]);
             return UtalityController::api_send(200,$sub);

            }else{
                return UtalityController::api_send(200,"StripeRepository makeSubscription: No Player Found");
            }

        }catch(Exception $ex){
            return UtalityController::error_send($ex->getMessage());
        }
    }
rotund pine
#

data.latest_invoice.payment_intent

rare cobalt
#

oh

#

just a sec

#

pi_3NcnibJaqukygSBJ1oLnPZwb

#

that's the latest one that just got made

#

did that help you figure out the issue?

rotund pine
#

thanks for sharing, checking..

#

by default only card are used

rare cobalt
#

i thought we could set that up in the dashboard and it would propogate down or something

#

is that not true?

rotund pine
rare cobalt
#

Okay! Do you have a quick example of this payment settings payment method types enum?

rotund pine
#

You have them in the documentations reference I shared with you.

rare cobalt
#

Not really, it doesn't have examples.

Would it look like this?

const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  },
payment_settings: {
    payment_method_options: {
      card: true,
      konbini: true,
    }
  },
};
rotund pine
#

payment_method_types: ["card","...]

rare cobalt
#

I do see that, thank you. Sorry for being bothersome, but what does it actually look like when I add it to the options object? Do i need to specify it is part of payment_settings? or just payment_method_types: ["card","...]

# 
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  },
  payment_settings: {
    payment_method_options: ["card", '...],
  },
};

Like this?

rotund pine
#

Wait, that code is your frontend,

#

you need to add payment_method_types: ["card",...] when creating the Susbcription

#

in your php code

rare cobalt
#

ahhh, I see

# 
$sub=$stripe->subscriptions->create([
    'customer' => $customerid,
    'items' => [['price' => $priceid]],
    'payment_behavior' => 'default_incomplete',
    'payment_settings' => ['save_default_payment_method' => 'on_subscription'],
    'pyament_settings' => ['payment_method_options' => ['card', '...]],
    'expand' => ['latest_invoice.payment_intent'],
]);

would that work? or does it need to be all in one line with the 'save_default_payment_method'?

#

Thanks for all you help! I'll try to figure it out from here!